Track Contact Form 7 with Google Tag Manager

Updated: August 27th, 2020

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

Note: this blog post teaches how to track events with Universal Analytics. If you want to get familiar with event tracking in Google Analytics 4, you can also refer to this blog post.

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!

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

By the way, if you have any feedback, please leave it in the comments and I’ll get back to you.

 

Table of contents

+ Show table of contents +

• Things to keep in mind
• Contact Form 7 DOM events
• 1. Contact Form 7 Event Tracking: Auto-Event Listener
  • 1.1. Test the listener
• 2. Variables and a Trigger
• 3. Google Analytics Event Tag
• 4. Let’s test
• 5. Set up a Google Analytics Goal
• The most common mistakes
• Contact form 7 event tracking: final words

 

Video tutorial

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

 

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 targetted at single-page forms. Multi-page forms fire events of successful form submissions after each step. Their tracking is not covered in this guide but I don’t want to leave you on thin ice so here are some hints/directions.

• For multi-page forms, use the auto-event listener mentioned in this blog post (#1 chapter)
• 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 to XX (replace XX with the ID of the last step’s form).

 

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 and the orange notification bar will appear. If it doesn’t, view this troubleshooting guide.

Now, go to the website where the form is located and refresh the page. A debugging console will appear at the bottom of the screen where you can see which tags have and haven’t fired. Fill in all form fields and submit the form.

If everything worked smoothly, you should see a cf7submission event in the Preview and Debug Console (just like in the screenshot below).

More importantly, 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 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.

P.S. As a time saver, I’ve prepared a GTM recipe that automatically creates a CF7 listener and a custom event trigger in your container. New to GTM recipes? Here’s a guide on how to import recipes.

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 how to pull data from the Data Layer.

 

3. Google Analytics 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 via Universal Analytics tag with the following settings:

• Track Type: Event
• Event Category: form submission
• Event Action: form id {{dlv – formId}} (when the actual event occurs, form ID will be replaced, so the final result could be form id 9
• Event Label: {{dlv – Form Subject}} (the same applies here: when the actual event is dispatched, the Data Layer Variable will be replaced with its value, e.g. This is a test.
• Do not forget to add the Custom Trigger we’ve created earlier.

 

4. Let’s test

Save all changes, refresh the Preview and Debug mode, go to the website where the Contact Form 7 is implemented and refresh that page as well. Submit it and take a closer look at what’s happening in the Preview Console. Expected result: Universal Analytics event tag must fire only when the form was submitted successfully.

Once the tag appears in the section of fired tags, head over to Google Analytics Real-time event reports.

 

5. Set up a Google Analytics Goal

The last step of the Contact Form 7 event tracking: create a Google Analytics Goal. Log in to your Google Analytics account and:

1. Go to the desired account’s Admin section
2. Choose a view you’re interested in
3. Go to Goals and press NEW GOAL

Now, enter the following settings:

• Template: Custom
• Goal name: enter anything you like. In the example below, I’ve entered Form submission
• Type: Event

Finally, enter Goal details:

• Event Category equals to form submission
• If you have more forms on a website and you wish to track ONLY THIS ONE, then you can additionally set the rule: Event Action equals to form id 9

If you leave other fields empty, they will not be checked.

 

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 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 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. Misconfigured goal in Google Analytics

When you configure GA goals, you need to know some of the nuances. Because of them, some beginners struggle to properly set them up. If you also cannot see form submissions as goals in Google Analytics, read this troubleshooting guide.

 

Mistake #6. 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

So there you have it. In this blog post, I’ve explained how to track single-page AJAX-based Contact Form 7. The process is similar to other WordPress Plugin, Gravity Form:

• Implement a custom auto-event listener which listens to successful form submissions.
• Create variables and a custom trigger.
• Set up Universal Analytics event tags that push the event of a successful form submission to Google’s servers.
• Finally, set up the Google Analytics goal.

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 to 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: 6 ways how to track form submissions with Google Tag Manager. I bet you’ll find something useful.