How to Track WordPress Contact Form 7 Submissions in Google Analytics 4 and Google Ads via Google Tag Manager

Tracking form submissions on your WordPress site is essential to measure user interactions and conversions effectively. In this guide, we’ll walk you through setting up tracking for Contact Form 7 submissions in Google Analytics 4 (GA4) and Google Ads using Google Tag Manager (GTM).

Table of Contents

1. Why Track Contact Form 7 Submissions?
2. Prerequisites
3. Step 1: Install and Set Up Google Tag Manager on WordPress
4. Step 2: Add a Custom JavaScript Code to Detect Form Submissions
5. Step 3: Create a Form Submission Trigger in GTM
6. Step 4: Set Up GA4 Event Tracking
7. Step 5: Set Up Google Ads Conversion Tracking
8. Testing and Debugging
9. Conclusion

Why Track Contact Form 7 Submissions?

Tracking Contact Form 7 submissions helps you:

• Understand user behavior on your website.
• Measure the effectiveness of marketing campaigns.
• Optimize conversions and improve ROI.
• Report key metrics for decision-making.

Prerequisites

Before starting, ensure you have:

1. Google Tag Manager account.
2. Google Analytics 4 property.
3. Google Ads account (optional for Ads conversion tracking).
4. WordPress admin access.
5. Contact Form 7 plugin installed and configured.

Step 1: Install and Set Up Google Tag Manager on WordPress

1. Log in to your WordPress admin dashboard.
2. Install and activate the “Insert Headers and Footers” plugin (or any similar plugin).
3. Add your GTM container code to the header section:

• Go to Settings > Insert Headers and Footers.
• Paste the GTM code snippet into the header section and save.

1. Verify the GTM setup using the GTM preview mode.

Step 2: Add a Custom JavaScript Auto Event Listener in Tag Manager to Detect Form Submissions

To track Contact Form 7 submissions, you’ll need to trigger an event when a form is submitted. Use the following script:

1. Go to Tag Manager > Tags > Create New Tag > Select Custom HTML Tag

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

2. Copy the auto event listener code and paste the code into the Custom HTML Tag

This code pushes an event named cf7submission to the GTM data layer when a form is submitted.

Step 3: Create a Form Submission Trigger in GTM

1. Open your GTM workspace.
2. Go to Triggers > New.
3. Configure the trigger as follows:

• Trigger Type: Custom Event.
• Event Name: cf7submission

4. Save the trigger as Contact Form Submission Trigger.

Step 4: Set Up GA4 Event Tracking

1. In GTM, go to Tags > New.
2. Create a new tag for GA4:

• Tag Type: Google Analytics: GA4 Event.
• Configuration Tag: Select your GA4 configuration tag.
• Event Name: cf7_form_submission (or any name you prefer).

• Add Event Parameters:
  • form_id: {{cf7 Event Parameter - formId}}

3. Trigger: Use the Contact Form Submission Trigger created earlier.

4. Save the tag and publish the changes.

Step 5: Set Up Google Ads Conversion Tracking

1. Log in to your Google Ads account.
2. Go to Tools & Settings > Measurement > Conversions.
3. Create a new conversion action:

• Conversion Source: Website.
• Define the conversion action (e.g., Form Submission).
• Set up a conversion value (if applicable).

1. Copy the Conversion ID and Label.

Create a Google Ads Tag in GTM

1. In GTM, go to Tags > New.
2. Configure the tag:

• Tag Type: Google Ads Conversion Tracking.
• Conversion ID and Label: Paste the values from Google Ads.

3. Trigger: Use the Contact Form Submission Trigger.
4. Save the tag and publish the changes.

Testing and Debugging

1. Open GTM and enable Preview Mode.

2. Submit the Contact Form 7 on your website.
3. Check if the cf7_form_submission event appears in the GTM debug console.

4. Verify data in GA4 Realtime reports and Google Ads Conversion Tracking.

Conclusion

Tracking Contact Form 7 submissions using Google Tag Manager allows you

to monitor user interactions efficiently. With GA4 and Google Ads integration, you can measure conversions, optimize campaigns, and improve ROI. Follow the steps outlined in this guide, and ensure proper testing to validate your setup.