Update time: January 13, 2025
This article introduces how to track forms in Contact Form 7.
There are many ways to track Contact Form 7 form submissions:
- Element visibility,：because if the Contact Form 7 form is successfully submitted, specific information will be displayed on the page, read more: 「GTM」Using Element Visibility for Form Submission Tracking
- Dom events：Contact Form 7 provides several types of custom DOM events. You can utilize the events within your JavaScript code to run a function in a specific situation. Contact Form 7 provides the following DOM events:
wpcf7invalid— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.wpcf7spam— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.wpcf7mailsent— Fires when an Ajax form submission has completed successfully, and mail has been sent.wpcf7mailfailed— Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.wpcf7submit— Fires when an Ajax form submission has completed successfully, regardless of other incidents.
Now we need to track the form submission in https://www.bbccss.com/contact-form-7
Next, let’s see how to implement form tracking through the DOM events provided by Contact Form 7:
Step 1 : Custom HTML to inject javascript
In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Custom HTML」，Name it “HTML – Contact Form 7 Listener”, and make the following settings: 
Source Code：
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>
In fact, it is the addEventListener method. Read more: GA4 Event Tracking Series ⑦ —— Custom Events (addEventListener Method）
Step 2 : Set Up the Variables
From the code, we can know that there are data layer variables formId and response in the data layer, which need to be obtained using data layer variables in GTM.
In GTM, click「 Variables」——「New」——「Choose a variable type to begin setup…」——「Data Layer Variable」, name it “dlv-formId”, and then set as follows:、
Set the dlv-response in the same way.
Step 3 : Set Up the Trigger
In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “Custom Event- CF7 Submit Form”, and make the following settings:
From the code, we can know that the event is cf7submission, so the event name is set to cf7submission.
Step 4 : Set Up the Tags
In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics: GA4 Event」，Name it “GA4-Event-CF7 Submit Form”, and make the following settings:
The event name is submit_form_cf7
Step 5 : Preview and Publish
Next is preview debugging.
Tags is triggered and can be published.
Read More：
Step 6 : Custom Definitions
The next step is to register event parameters form_id, if you want to use it in GA4, you need to register it in the Custom definitions of GA4.
In GA4，click「Admin」——「Custom definitions」——「Create custom dimension」, then do the following configuration:
The event parameter response is in Json format and cannot be directly registered as a custom dimension. It contains PII information and is not recommended to be sent to GA4.
Step 7 : Verify Data in Reports
Generally, after 24 hours, we can see the data in GA4, such as:
