Contact Form 7 + GA4 Conversion Tracking Setup

I see broken Contact Form 7 → GA4 tracking in about 35% of WordPress sites I audit. The most common issue? People assume CF7 automatically sends conversion data to GA4, but CF7 only fires a DOM event that most setups completely miss. Without proper event listeners, you’re flying blind on your lead generation performance.

What You’ll Have Working By The End

Prerequisites

Step 1: Set Up the Contact Form 7 Event Listener

Contact Form 7 fires a wpcf7mailsent DOM event when forms submit successfully. You need to catch this event and push it to the data layer.

Add this code to your WordPress theme’s footer.php (or better yet, enqueue it properly):

document.addEventListener('wpcf7mailsent', function(event) {
    // Get form details
    var formId = event.detail.contactFormId;
    var formTitle = event.detail.inputs.find(input => input.name === 'your-subject')?.value || 'Contact Form ' + formId;
    
    // Push to data layer
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'cf7_form_submit',
        'form_id': formId,
        'form_name': formTitle,
        'timestamp': Date.now()
    });
    
    console.log('CF7 submission tracked:', formId);
});

Important: This listener only fires on successful submissions. If CF7’s email sending fails, this event won’t fire — which is actually what you want for conversion tracking.

Step 2: Create the GTM Trigger

In Google Tag Manager:

  1. Go to Triggers → New
  2. Trigger Configuration: Custom Event
  3. Event name: cf7_form_submit (matches your data layer push)
  4. This trigger fires on: All Custom Events
  5. Name: “CF7 Form Submission”
  6. Save

For more specific tracking, you can filter by form ID:

Step 3: Configure the GA4 Event Tag

Create the GA4 event tag:

  1. Go to Tags → New

  2. Tag Configuration: GA4 Event

  3. Measurement ID: Your GA4 measurement ID

  4. Event Name: generate_lead (recommended event) or cf7_submission (custom)

  5. Event Parameters:

    • form_id: {{DLV - form_id}} (create this data layer variable first)
    • form_name: {{DLV - form_name}}
    • page_location: {{Page URL}}
    • value: 1 (optional, for conversion value)

  6. Triggering: Select your “CF7 Form Submission” trigger

  7. Name: “GA4 - CF7 Lead Generation”

  8. Save

Which event name should you use? Use generate_lead if you want to leverage GA4’s enhanced ecommerce reporting. Use a custom event name like cf7_submission if you want more control over the naming.

Step 4: Create Required Data Layer Variables

You need these GTM variables to capture the form data:

Variable 1 - Form ID:

Variable 2 - Form Name:

Step 5: Set Up Client-Side GTM Configuration

For Client-Side GTM implementation, add this enhanced tracking script:

// Enhanced CF7 tracking with additional data
document.addEventListener('wpcf7mailsent', function(event) {
    var detail = event.detail;
    var formElement = event.target;
    
    // Extract form data
    var formData = {
        'event': 'cf7_form_submit',
        'form_id': detail.contactFormId,
        'form_title': formElement.getAttribute('data-title') || 'Contact Form ' + detail.contactFormId,
        'form_url': window.location.href,
        'user_agent': navigator.userAgent,
        'timestamp': new Date().toISOString(),
        'submission_id': detail.into.replace('#', '') // CF7 generates unique IDs
    };
    
    // Add any additional custom fields you want to track
    var emailField = formElement.querySelector('input[type="email"]');
    if (emailField && emailField.value) {
        formData.email_domain = emailField.value.split('@')[1];
    }
    
    // Push to data layer
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(formData);
    
    // Debug logging
    console.log('CF7 Enhanced Tracking:', formData);
});

This gives you richer data for analysis and troubleshooting.

Step 6: Mark as Conversion in GA4

Once your events start flowing:

  1. GA4 → Events (under Reports)
  2. Find your event (generate_lead or cf7_submission)
  3. Click the toggle under Mark as conversion
  4. Wait 15-30 minutes for the conversion to appear in reporting

The conversion will now show up in:

Testing & Verification

Real-time Testing:

  1. Submit a test form on your site
  2. GA4 → Reports → Realtime
  3. Check Events in the last 30 minutes for your event
  4. Verify event parameters are populated correctly

Debug View Testing:

  1. Install GA4 DebugView Chrome extension
  2. GA4 → Admin → DebugView
  3. Submit a test form
  4. Event should appear within 10-20 seconds with all parameters

GTM Preview Mode:

  1. GTM → Preview
  2. Load your site with the preview bar active
  3. Submit form → check if trigger fires and tag sends
  4. Look for “Tags Fired” showing your GA4 event tag

Cross-Verification: Contact Form 7 doesn’t store submissions by default, so install Flamingo plugin for comparison:

Troubleshooting

Problem: Event listener not firing at all Check that Contact Form 7 is actually sending emails successfully. CF7 only fires wpcf7mailsent after successful email sending. Test with a working email configuration first.

Problem: GTM trigger not firing despite data layer push Use GTM Preview mode and check the data layer tab. If the event appears there but trigger doesn’t fire, your trigger configuration is wrong. Most commonly, the event name doesn’t match exactly.

Problem: GA4 receiving events but not showing as conversions You forgot to mark the event as a conversion in GA4. Go to Events report, find your event, and toggle “Mark as conversion”. It takes 15-30 minutes to start showing conversion data.

Problem: Duplicate events on single form submission You have multiple event listeners or CF7 is submitting via AJAX and regular form submission. Add event.preventDefault() and ensure you only have one listener per form.

Problem: Events firing but missing form_id parameter CF7’s contactFormId is only available in the event detail after successful submission. If you’re seeing undefined, the form isn’t completing its submission process properly.

Problem: Conversion count way higher than actual submissions You’re likely tracking page views or other events as conversions. Check your GTM trigger conditions — it should only fire on cf7_form_submit custom events, not all events.

What To Do Next

This guide is part of the GA4 Conversion Tracking Hub — complete guides for tracking conversions from any form or landing page into GA4.