Track Contact Form 7 with Google Tag Manager

Updated: January 14th, 2021

Contact form 7 is yet another pretty popular form plugin for WordPress. What do good marketers do with forms? They track submissions, say, with Google Analytics 4 and then measure the overall performance: where do those conversions come from? which forms perform better? etc.

Nowadays, one of the most popular ways how to track any interaction on the website is …surprise surprise!… Google Tag Manager. If for some reason, you haven’t tried it before, you definitely should (here are some reasons why).

Anyway, back to the topic. Contact Form 7 is no exception and you can definitely track it with Google Tag Manager. You can either read this long (but very useful) guide and learn more about the magic of form tracking, or you can just continue reading this blog post because today I’ll explain how Contact Form 7 event tracking with Google Tag Manager and Google Analytics 4 works.

Note: If you are looking for a tutorial on how to do that with Universal Analytics (a.k.a. GA3), please refer to this guide instead.

 

Why this guide?

I’ve already seen some guides on the web covering Contact Form 7 event tracking with GTM, however, they have some issues/limitations:

• Some offer an inaccurate solution (by using Click Trigger!!!? which is a big NO in form tracking)
• While others are giving not enough. I mean, they show how to track form submissions (which is good) but I’ve found that it’s pretty easy to also get values of each submitted form field which can give you much more insight!
• Many of the guides are quite outdated (google-analytics-wise)

Interested? I hope that after reading the previous paragraph you felt like this:

 

Table of contents

+ Show table of contents +

• Video tutorial
• Things to keep in mind
• Contact Form 7 DOM events
  • 1. Auto-Event Listener
  • 2. Variables and a Trigger
  • 3. Google Analytics 4 Event Tag
  • 4. Let’s test
  • 5. Register custom dimensions
  • 6. Configure a conversion in GA4
• The most common mistakes setting this up
• Final Words

 

Video tutorial

If you want to quickly learn how to track Contact Form 7 with Google Tag Manager and Google Analytics 4, here’s a video tutorial. However, if you get stuck somewhere or want to learn more technical details, continue reading this guide.

Looking for a tutorial related to Universal Analytics, then take a look here.

 

Things to keep in mind

This solution works with AJAX-based forms (built with Contact Form 7) which means that if the page does not refresh after the successful submission, then go ahead and continue reading.

Also, this guide is mainly targeted at single-page forms. Multi-page forms fire events of successful form submissions after each step. Their tracking is not covered in this guide.

Contact Form 7 DOM events

In their documentation, Contact Form 7 developers have listed several DOM events that are dispatched after a particular form interaction occurs:

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

To make Contact Form 7 event tracking come true, at first, I tried listening to wpcf7submit event but what I ended up with was that this DOM event was being dispatched even if required form fields contained errors. As a result, I switched to wpcf7mailsent event.

 

1. Contact Form 7 Event Tracking: Auto-Event Listener

The first ingredient of the form tracking is a piece of code that will be listening and waiting for a successful form submission. That code is also known as an auto-event listener. The listener will be waiting for wpcf7mailsent DOM events and if one occurs, it will push some useful data to the Data Layer (event name, form id, values of all form fields).

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

Compared to other solutions found online, this will not only create a Data Layer event called cf7submission but will also return a full response, an array of every form field, and its value. More on this – a bit later.

In order to implement this code, go to your Google Tag Manager account, then a container and create a Custom HTML tag that fires only on those pages which contain forms. Let’s say that in our case, a form is in the footer of each page, so we’ll fire it on All Pages.

 

1.1. Test the listener

Before we continue, it’s crucial to test if the listener is capable of capturing a successful form submission. In GTM, enable Preview and Debug mode by clicking the Preview button at the top-right corner.

Then you will be asked to enter the URL of the page where your Contact Form 7 is located. Do that.

Now, you will be redirected to that website and you will notice a widget appear at the bottom-right corner. It must say connected.

If it doesn’t, please read this guide. Now, it’s time to submit the form. Enter all the required fields and click SUBMIT (or whatever is the text of the form button). Once you see the form success message, go to the GTM preview mode’s browser tab (or window). Its URL contains tagassistant.google.com.

If everything worked smoothly, you should see a cf7submission event on the left side (just like in the screenshot below).

Click that cf7submission event and go to the Data Layer tab. What you’ll see is an array of all form fields, field names, and their values (which were entered by a visitor). So not only will you be able to track successful form submission, but you’ll also have a chance to capture form field values too. P.S. Keep in mind that Google Analytics does not allow you to store PII on their platform (but that data might be sent to other tools).

 

2. Variables and a Trigger

So what have we done so far? Well, we have some data in the Data Layer that we could to use:

• cf7submission is a Data Layer event that should be turned into a trigger. No tag will fire without a trigger.
• Just for demonstration purposes, we’ll also want to capture a subject line of form submission and pass it to Google Analytics 4 later on. We can fetch that field’s value by creating a Data Layer variable.

If you want to turn some Data Layer event (in our case, it’s cf7submission) into a tag-firing condition, you need to create a custom trigger.

Now, it’s variables’ turn. Let’s take a closer look at what’s happening in the Data Layer after cf7submission event occurred. In addition to event and formId, Contact Form 7 listener also pushed the response which is an array containing 5 objects. Each object represents a form field. In JavaScript, indexes start from 0, not from 1, so if we want to fetch your-subject field’s value (which is the third object), we’ll have to choose index 2, not 3.

In one of my previous blog post, how to pull data from the Data Layer, I’ve explained 3 different data structures:

• When all data points are on the same level
• When there are different levels (children-parents)
• And when there are arrays.

In this case, we have to choose the 3rd option, pulling data from arrays in the Data Layer. In order to do so, we first have to define the parent key, which, in this case, is response. Then we have to set the index (in order to tell Google Tag Manager in which object we are interested). This time, it’s 3 (because it is the 4th object in the array, an in JavaScript indexes start from 0 (0, 1, 2, 3, 4)). And, finally, we choose the final key – field’s value.

As a result, our Data Layer Variable name is response.3.value

Another variable which I would recommend to create is formId. If you have several forms on a website, it will help you distinguish which form was submitted (and you won’t have to create separate triggers and tags for each Contact Form 7).

Save both variables and test them. The best way to do it is to refresh the Preview and Debug mode, refresh the page with the Contact Form 7 and try submitting it again.

After that, click cf7submission event once again and go to Variables tab. You should be looking for two newly created Data Layer Variables.

 

In the screenshot below, everything is working just as we expected: one variable contains the actual subject line while the other one fetched ‘9′ which is the ID of my test form. If you got undefined value, double-check if you entered all variable settings correctly. Remember that Data Layer variable names are case-sensitive.

If you are still facing issues with any of those two variables, read this guide on how to pull data from the Data Layer.

 

3. Google Analytics 4 Event Tag

The first two steps of the Contact Form 7 event tracking are done! Now, let’s send the form submission event to Google Analytics 4 with the following settings. Also, if you are new to Google Analytics 4 event tracking, I would recommend reading this guide afterward.

Go to Tags > New > GA4 Event. I presume that you already know some Google Analytics 4 basics and you already have the Google Analytics 4 configuration tag created in the GTM container (if not, watch this video).

In that tag:

• Select your existing GA4 configuration tag.
• Enter the name of the event (the recommended value if generate_lead)
• Then click on Fields to Set and enter two parameters:
  • form_id and set its value to be the Data Layer variable (that returns the ID): {{dlv – formId}}
  • form_subject and set its value to be the Data Layer variable (that returns the ID): {{dlv – Form Subject}} (although, keep in mind that I used this just for demonstration purposes. In reality, it does not make a lot of sense to track form subjects in tools like GA. Data cardinality will be too high).
• Set the tag to fire on the cf7submission Custom Event trigger.

 

 

4. Let’s test

Save all changes and refresh the Preview and Debug mode (by clicking the PREVIEW button at the top-right corner of the GTM Interface). Then you will be redirected to the page where your Contact Form 7 is implemented. Submit it and take a closer look at what’s happening in the Preview mode tab (or window).

Expected result: Google Analytics 4 event tag must fire only when the form was submitted successfully (in other words, when the cf7submission event is present on the left side of the preview mode). But the Custom HTML tag must fire on any page (regardless of whether the form was submitted or not).

Once the tag appears in the section of fired tags, head over to the DebugView of Google Analytics 4 and try to find your device (in the top-left corner’s selector) if there is more than one.

Then you should start seeing events coming from your device (including the generate_lead). If you are facing some issues with the DebugView, read this guide.

Click the event and you will see the parameters that were sent together with it. Click any of those parameters to check the values.

But our job is not done yet. Even though you see custom parameters in the DebugView, you won’t see them in regular GA4 reports (or Analysis Hub). If you want to use/see them (and I bet you do), you must register them as custom definitions. Read the next chapter to learn more.

 

5. Register custom dimensions

This applies to any event parameter that you send to Google Analytics 4. If you want to see/use them in things like Funnel reports, Exploration, see their reporting cards in standard reports, etc., you must register custom parameters in the GA interface.

In Google Analytics 4, go to All Events and then click Manage Custom Definitions. Since we sent 2 custom parameters with the Contact Form 7 submission, we have to register them both here.

Click the Create Custom Dimensions button and then enter the name of the first parameter that you sent. In my case, that is form_id. Save it.

Then register a second parameter (in my case, that was form_subject) and save it. By the way, I sometimes use the words “custom parameter” and “custom dimension” interchangeably. In general, custom metrics and custom dimensions are both grouped as custom parameters.

And now we wait. Within the next 24 hours, the custom parameters will start appearing in your Google Analytics 4 reports.

If you want to learn where to find the CF7 event data in GA reports, read this tutorial about event tracking in GA4.

 

6. Configure a conversion in GA4

The last step of the Contact Form 7 event tracking: create a conversion in Google Analytics 4. This is not necessary but if you want to treat every form submission as an important interaction, you should do it.

I will assume that you want to treat every generate_lead event as a conversion. In that case, you should log in to your Google Analytics 4 interface and go to Conversions (on the left sidebar).

Then click New conversion event and enter generate_lead. Hit save.

Then submit the Contact Form 7 once again and check the GA4 DebugView. From this moment, the generate_lead event will be displayed with a green icon. This means that GA4 now treats this as a conversion.

If you want GA4 to track conversions ONLY of certain Contact Form 7 forms (and not all generate_lead events), read this chapter on a feature called “Create event” in GA4). If you want to learn where to find the conversion data in GA4 reports, read this part.

 

The most common mistakes setting this up

If you haven’t worked a lot with Google Tag Manager before, some parts of this guide might be confusing. If you have followed all the steps of this blog post and something is still not working, here are the most common mistakes that I’ve noticed people do.

Hopefully, some of them will apply to your case and you will be able to resolve the issue.

 

Mistake #1. Your form is not a Contact Form 7

Sometimes, WordPress website use multiple form plugins. Even if you have installed CF7, maybe the form that you’re dealing with is using a different plugin.

The easiest way to check whether your form is Contact Form 7 is to do the right-click on any form field.

Then check the code of that form field. If you see something related to wpcf7, that’s a Contact Form 7. If not, then this blog post will not help you. Read another guide instead.

 

 

Mistake #2. Misconfigured triggers

When you configure everything, here is how the final setup must look:

• The Custom HTML tag must use ONLY the All Pages trigger. DO NOT add the Custom Event trigger to the Custom HTML tag.
  
• Google Analytics 4 event tag must have only the Custom Event trigger.
• Check if you have correctly entered the event name in the Custom Event trigger. It must be exactly cf7submission. If you are not sure what I am talking about, revisit step #2 of this guide.
  

 

Mistake #3. If you cannot see the cf7submission event in the preview mode

This is crucial. The cf7submission event MUST appear in the preview mode. If it does not happen, the setup will not work.

There are two main reasons why you don’t see it in the preview mode:

• Your form is not a Contact Form 7
• You have added a tag but it does not fire on the Pageview (a.k.a. Container Loaded) in the preview mode.
  • Click the Container Loaded event in the preview mode and check if your Custom HTML tag has fired. If it hasn’t, refresh the preview mode and start again.
  • Also, check if the trigger of that Custom HTML is All Pages (because it should be).

 

Mistake #4. Google Analytics 4 tag is firing but you cannot see the event in real-time reports?

This issue is quite common. If you are facing it, read this troubleshooting guide.

 

Mistake #5. Your Contact Form 7 refreshes the page after it is submitted

The solution that is described in this blog post applies ONLY if the form submission does not refresh the page. The form success message should appear without reloading or redirects.

If the form is indeed reloading the page, consult your developers to fix it or you can refer to CF7’s website. Here is an article from the CF7 blog. If the link is not working, try to google for something like “Contact form 7 AJAX is not working”.

Other CF7 + GTM guides online also rely on AJAX (when the form does not reload the page).

Looking for other form tracking alternatives? Read this.

 

Contact form 7 event tracking: Final Words

And there you have it. In this blog post, I’ve explained how to track single-page AJAX-based Contact Form 7 with Google Tag Manager and Google Analytics 4. The process is similar to other WordPress Plugin, Gravity Form:

• Implement a custom auto-event listener that listens to successful form submissions.
• Create variables and a custom trigger.
• Set up Google Analytics Analytics event tag that sends the event of a successful form submission to Google
• Register parameters as custom dimensions/definitions
• Finally, configure a conversion (optional)

As it was mentioned before, you might face some difficulties if your form is multi-page (consists of two or more steps and each one of them refreshes the page). What I’ve noticed so far, is that usually each step has its own form ID, therefore you can track submissions by updating the custom cf7submission trigger. Set it to fire when form ID equals XX (replace XX with the ID of the last step’s form).

If you still face issues with Contact Form 7 event tracking (by using GTM), read this guide: how to track form submissions with Google Tag Manager. I bet you’ll find something useful.