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 Name | Data Layer Variable Name |
---|---|
DLV - CF7 Form ID | cf7FormId |
DLV - CF7 Form Name | cf7FormName |
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 Name | Value (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 Name | Event Parameter | Scope |
---|---|---|
CF7 Form ID | form_id | Event |
CF7 Form Name | form_name | Event |
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 Name | Form ID | Form Name | Event Count |
---|---|---|---|
cf7_form_submit | 123 | "Contact Us Form" | 215 |
cf7_form_submit | 456 | "Newsletter Signup" | 580 |