How to track Contact Form 7 submissions with GTM and GA4

Why Is This Important?

Accurate tracking allows you to measure:

• Conversion rates: Evaluate form submission performance.
• Lead generation: Track the effectiveness of campaigns that drive form submissions.
• UX improvements: Identify potential issues and friction in the form submission process.

Step 1/7: Understanding Contact Form 7 Events

Contact Form 7 uses specific JavaScript DOM events upon form submission:

• wpcf7mailsent: Fired upon successful form submission.
• wpcf7mailfailed: Fired when submission fails.
  
  We'll use the wpcf7mailsent event to track successful submissions.

Step 2/7: Custom JavaScript to Push Events to GTM's Data Layer

To ensure reliable tracking, we’ll create a JavaScript listener that pushes a custom event to GTM's dataLayer when the Contact Form 7 form is successfully submitted.

Set Up in Google Tag Manager:

• In GTM, navigate to Tags → New → Custom HTML.
• Paste the following custom JavaScript snippet:

<script>
document.addEventListener('wpcf7mailsent', function(event) {
var formId = event.detail.contactFormId;
var formName = event.detail.contactFormTitle;

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'cf7SuccessfulSubmit',
  'cf7FormId': formId,
  'cf7FormName': formName
});
}, false);
</script>

Explanation of the JavaScript Code:

• Listens for Contact Form 7’s built-in wpcf7mailsent event.
• Extracts useful data like the form’s ID and form’s title.
• Pushes a clearly identifiable custom event (cf7SuccessfulSubmit) with relevant details into the dataLayer.
• Save your Custom HTML tag with a clear name like "CF7 - Submission Listener".
• Set the Trigger to fire on "All Pages".

Step 3/7: Create GTM Data Layer Variables

We’ll now create Data Layer Variables in GTM to capture form details:

• Navigate to GTM → Variables → New → Data Layer Variable
• Save each variable individually.

Step 4/7: Create GTM Custom Event Trigger

Create a trigger that listens specifically for our custom dataLayer event:

• Go to GTM → Triggers → New → Custom Event.
• Event Name: exactly match cf7SuccessfulSubmit .
• Trigger fires on: All Custom Events.
• Name your trigger clearly: "CF7 - Successful Form Submission".
• Save this trigger.

Step 5/7: Create a GA4 Event Tag to Send Data to Google Analytics

Next, set up the GA4 event tag to log form submission data:

• In GTM, navigate to Tags → New → Google Analytics: GA4 Event.
• Configuration Tag: Select your GA4 configuration tag.
• Event Name: Use a clear event name, such as cf7_form_submit.
• Event Parameters (recommended for detailed reporting):

• Under "Triggering," select the trigger: "CF7 - Successful Form Submission".
• Name the tag clearly: "GA4 Event - CF7 Form Submission".
• Save the tag.

Step 6/7: Preview, Debug, and Verify the Setup

Always test before publishing:

• Click Preview in GTM.
• Navigate to your Contact Form 7 page.
• Submit the form.
• In GTM preview mode, ensure:
  -cf7SuccessfulSubmit event fires correctly.
  -GA4 event tag "GA4 Event - CF7 Form Submission" fires properly with accurate parameters.

Step 7/7: Verify Data in Google Analytics (GA4)

Check in GA4 reports:

• Log into your GA4 account.
• Navigate to Reports → Engagement → Events.
• Check for your new event cf7_form_submit.
  (Data may take up to 24 hours, or use DebugView in GA4 for immediate verification.)

Set Up Custom Dimensions (Optional):

For deeper insights:

In GA4 Admin → Custom Definitions → Create custom dimensions:

Hot it Will Look in GA4

Your GA4 data will clearly show which Contact Form 7 forms perform best.

This granularity enables optimization based on real-world insights.