The fastest way to figure out whether a form you wish to track is built with Contact Form 7 is to use the Developer Tools in Chrome. All you need to do is browse to the page where the form is housed, right-click on the form submit button and select ‘Inspect’. It will open up a panel that shows the code generating that particular form. If it is built using Contact Form 7, the classes will contain ‘wpcf7’ in the name. If they look anything like the snapshot below, continue on with this guide. And if the form seems to have been built with some other plugin, you’ll need to find out which before being able to tag and record submissions through it.

Understanding Contact Form 7 DOM Events

Contact Form 7 utilises custom DOM events to register form submissions. Below is the list the plugin-maker has provided:

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

Our interest lies in the wpcf7mailsent event. This one tracks whether a mail has been sent out on successful form submission. We could also track the wpcf7submit event, however that will track form submissions regardless of whether it was correctly filled up or triggered blank field/ incorrect input warnings.

 

How to build a trigger for Contact Form 7 tracking?

Step 1. Creating a custom event listener

The first step in being able to implement successful Contact Form 7 tracking is to figure out whether wpcf7mailsent event has been executed. We can do this by creating a custom HTML listener and adding it to all the pages where the form has been placed.

Create a new tag and choose ‘Custom HTML tag’ as the tag type. Copy and paste below HTML into the tag window box:

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

Add the All Pages trigger to the tag and save it. I’ve named the tag as CF7 Listener Tag for convenience. If you’re not sure how to create the All Pages trigger, view this quick guide.

Step 2. Verifying the custom event listener using Preview

Now that our event listener is ready, we want to see what sort of data it is pulling in on successful submission, and how can we ensure the important bits are sent over to Google Analytics for storage.

To do this, we need to get into the Preview mode (click Preview button on the top-right and input your website URL). You should see a screen like below on successful connection. As you can see, our newly created tag for checking Contact Form 7  submission has triggered on page view. However, as it did not detect wpcf7mailsent getting executed, our custom event ‘cf7submission’ was not sent through.

 

Now let’s try actually submitting a test form. Here’s the preview screen we see after a successful submission:

 

If you scroll further down the data layer output, you will see filled-in form responses as well. Google Analytics, however, does not allow storing personal identification data such as this, so this guide will not be covering how to store this information.

Step 3. Creating a trigger for ‘cf7submission’ event

A custom trigger is required to capture when the ‘cf7submission’ Data Layer event is fired. Create a new trigger, and choose Others -> Custom Event under Trigger Type. Enter your chosen event name under ‘Event Name’ field (mine’s named ‘cf7submission’), and have the trigger fire on All Custom Events.

Attaching this trigger to a Google Analytics 4 tag

 Create a new GA4 event tag and enter measurement ID of the GA4 property associated with your website. Under Event Name, enter a name that will make sense to you when you see it in your GA4 account (I chose ‘cf7form_submit’). It’s basically the name that will be used to send successful form submissions to GA4. Choose the above created custom trigger to make this tag fire.

If you want, you can also send certain event parameters over to GA4 along. Clicking on that small lego-like button will open up a list of possible parameters that you can send over. I’ve only chosen to send over Page URL for now. GA4 does actually display page destination where a particular event has fired, but there were some structural changes going on with this site when I was working on it so I chose to have the whole page URL sent along.

 

Make sure this tag is getting fired when our custom event ‘cf7submission’ is triggered.

 

Testing Contact Form 7 tracking

Let’s quickly jump back into the Preview mode to confirm the tracking has been correctly set up. Below is the screen we can now see after a successful form submission:

As you can see, our custom tag for recording Contact Form 7 submissions has fired, sending the defined event over to GA4. We can reconfirm that GA4 is receiving this by going to GA4 Admin panel -> Data Display -> DebugView. DebugView is used to analyse live data coming in to GA4 through debug devices. You will be able to see various events getting tracked here as you move through your website. In this case, on successful form submission, the custom event ‘cf7form_submit’ that we have sent to GA4 through the tag can be seen coming in.

 

The custom parameter ‘Page URL’ can also be expanded to show the URL of the page the form was submitted on. Please note that GA4 requires us to create a custom definition to register any incoming custom event parameter. I’ll be covering how to go about this in another guide later.

 

Making it a key event in GA4

The last step is to ensure a successful form submission through Contact Form 7 is registered as a key event on GA4. Key events are basically the new terminology for UA’s conversions. These are critical actions whose measurement is important to the flow of your business. For example, in this case, form submissions is one of the two primary actions a user can take on the website, making it a key event.

To mark an event as a key event, go to Admin panel -> Data Display -> Key Events. Find your custom event and toggle the marker ON, as shown in the below screenshot. If you cannot see your custom event here yet, don’t fret. GA4 doesn’t report live data, so you might need to wait for 24 hours to allow for fresh Google Analytics data to flow in.

 

Quick questions: 

Will this guide work for a multi-page form built with Contact Form 7?

No, these steps are specific to.a single page form only. If you got a multi-page form on your website, the best bet would be to track Form ID generated on the final page of the form – Contact Form 7 usually assigns a unique Form ID to each step, so finding out the ID for the last step and having the tag fire on it would be your solution.
 

Why is the Preview mode not showing ‘cf7submission’ event?

You might want to check whether the custom HTML event listener has been set up correctly. The tag should contain the above-mentioned HTML as is, and should fire on Page View (All Pages) trigger so that no page gets missed out. You might also need to check on whether the Preview mode is correctly opening up, with the debug version of the website connected properly and its GTM tag is showing found on the Preview screen.

Once you get the hang of it, setting up this tracking wouldn’t feel like a complicated black box it seems like from the outside. If there still are any other issues you run into, feel free to drop your questions in the comment box below.