Track Contact Form 7 with Universal Analytics (a.k.a. GA3)

Updated: January 14th, 2021

Note: In July 2023, Universal Analytics stops working. It is no longer recommended to do new implementations with Universal Analytics (GA3). Read a guide about Contact Form 7 tracking with GA4.

Contact form 7 is a very 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 to track Contact Form 7 with Universal Analytics and Google Tag Manager.

What is Universal Analytics? Is the older version of Google Analytics (a.k.a. GA3). Why would I publish a guide including Universal Analytics? Because some businesses might be still using it.

Note: If you want to track Contact Form 7 with Google Analytics 4 (and GTM), please refer to this guide instead.

By the way, if you think that you cannot create Universal Analytics properties anymore, think again 🙂 Here’s the guide on how to do that.

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

+ Hide table of contents +

• Things to keep in mind
• Contact Form 7 DOM events
• 1. Auto-Event Listener
  • 1.1. Test the listener
• 2. Variables and a Trigger
• 3. Universal Analytics Event Tag
• 4. Let’s test
• 5. Set up a Goal in Universal Analytics
• 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 Universal Analytics (and 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 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 the 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 Universal 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 the 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 an 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. Universal 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 Universal Analytics (GA3) 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 (by clicking the PREVIEW button once again in the GTM interface). 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 Universal Analytics Real-time event reports.

 

5. Set up a Goal in Universal Analytics

The last step of the Contact Form 7 event tracking: create a Goal in Universal Analytics. Log in to your GA3 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 uses 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.
  
• Universal 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. Universal 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. A misconfigured goal in Universal 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 Universal 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.

 

Track Contact Form 7 with Universal Analytics: 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 Universal Analytics and Google Tag Manager. 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 Universal 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 XX (replace XX with the ID of the last step’s form).

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