How to Track Contact Form 7 Submissions with GTM, GA4

How to track Contact Form 7 submissions with GTM and GA4

Published by Marty Paukstys, founder of D2CEBL. 20+ years of Google PPC & Analytics experience. Google Ads Search and Google Analytics certified.
 

Contact Form 7 is a highly popular WordPress plugin used by millions of websites. However, tracking Contact Form 7 submissions effectively in Google Analytics 4 (GA4) using Google Tag Manager (GTM) can be tricky, as submissions occur asynchronously (AJAX) without page reloads.

In this guide, you'll learn how to reliably track Contact Form 7 submissions using a custom JavaScript snippet, 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.
GTM Variable NameData Layer Variable Name
DLV - CF7 Form IDcf7FormId
DLV - CF7 Form Namecf7FormName

 

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):
Parameter NameValue (DLV Variable)
form_id{{DLV - CF7 Form ID}}
form_name{{DLV - CF7 Form Name}}

 

  • 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:

 

Dimension NameEvent ParameterScope
CF7 Form IDform_idEvent
CF7 Form Nameform_nameEvent

 

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.
 

Event NameForm IDForm NameEvent Count
cf7_form_submit123"Contact Us Form"215
cf7_form_submit456"Newsletter Signup"580

Sources

Back to How To
  • Share
  • facebook
  • icon_linkedin
  • icon_x