Contact Form 7 Tracking With Google Tag Manager

Hi measure geeks, today we’re going to show you how Contact Form 7 tracking can be set up with Google Tag Manager. You’ll learn how to pass this data on to your Facebook pixel, Google Analytics, or Google Ads.

We’ve got lots to cover.

Let’s dive in.

1. Tracking Forms With No Thank-You Pages

One of the things that trips a lot of people up when trying to track Contact Form 7 submissions is the default confirmation.

It doesn’t redirect you to a thank-you page, you just get a little pop-up message instead.

contact form 7 thank you message tracked with google tag manager

What is a data-driven marketer like yourself to do?

Thankfully, there is a convenient function the plugin does by itself.

2. Contact Form 7 Emits DOM Events

What are DOM events?

We’re not talking about high-society champagne parties.

DOM event tracking with Google Tag Manager

DOM (document object model) events are events that are emitted in the JavaScript runtime environment.

Some Contact Form 7 DOM events include:

  • wpcf7invalid: fires when form has fields with invalid input
  • wpcf7spam: fires when possible spam activity has been detected
  • wpcf7mailfailed: fires when form submission has completed successfully, but sending mail failed
  • wpcf7submit: fires when form submission has completed, regardless of other statuses
  • wpcf7mailsent: fires on form submissions where email has been successfully sent

We’re going to create an event listener that listens for the wpcf7submit DOM event. This is just going to be a custom HTML tag, and we’re going to fire it on all pages. (If you only want it to fire on pages with contact forms, that’s fine. We’re just selecting all pages for the sake of simplicity.)

Using a piece of custom JavaScript

In Google Tag Manager:

  1. Paste the JavaScript code into a Custom HTML tag
  2. Set the trigger to All Pages
  3. Click Save

contact form 7 event listener in google tag manager

This is just going to listen for the wpcf7submit DOM event. When it detects this event has happened, it is going to push a custom event called formSubmit into the data layer.

It’s also going to push the formID and all the form fields into the data layer as well.

Let’s test it out. Make sure your GTM container has been published, make sure it’s in preview mode, refresh the form page, and submit another test submission.

On the left of your GTM preview window, you’ll see the formSubmit DOM event. Click on that, click on the data layer tab, and you can see the data that has been pushed into the data layer.

data layer values form submit event google tag manager

Our end goal is to create a tag that passes these data layer values into Google Analytics any time the  formSubmit event happens. That means our trigger will simply be the custom event of formSubmit.

In tag manager, create a new trigger, give it an appropriate name like custom – formSubmit, select the trigger type of custom event, and enter the event name formSubmit. You can leave the “all custom events” radio button selected. Click save.

Contact Form 7 formSubmit custom event trigger

For the sake of this lesson, we want to grab the formID and value from the drop down field right above the submit button. We are going to create two data layer variables to store these values.

Storing the formID value is very straightforward. We’re just going to create a new variable, name it something appropriate like dlv – formID, select data layer variable as the type, and name it formID.

formID datalayer variable

Notice we’re just grabbing the formID label right out of the data layer.

formID label

Now let’s create a variable to hold the value of menu-597 field.

menu 597 field

To store this value, we are going to create a data layer variable just like the first one. The only difference is that the value we are trying to grab is inside of an array. The fields object above is an array, meaning it’s a list of values instead of one singular value.

3. Using the Dot Notation to Pull Values From an Array

There are six values in the fields array. We want to grab the sixth one. It is important to know that when counting objects in an array, you start from zero. So our 6th object actually has an index of 5.

[0,1,2,3,4,5]

So the data we want to store is:

fields object -> position 5 -> value

We denote this hierarchy using the dot notation, so our custom data layer variable name will be:

fields.5.value

dlv form interest google tag manager

Click save, and you’re done creating variables.

4. Using Variables in Your Google Analytics Event

Now that the form values are stored in a variable, we can use these variables to insert values into a Google Analytics event.

In Google Tag Manager, create a new Google Analytics event tag. Name it something appropriate like Google Analytics – Event – Form Submit. The event category is not dynamic, so you can name it whatever you’d like. In this case, we chose formSubmit.

In the Action field, we want to pass along the formID, so this is where we enter one of the variables we just created. Click the “+” button next to the action field to select a variable.

Google Analytics form tracking event tag with variables

Select your dlv – formID variable. In this case, we put “FormID: ” in front of the variable, just so it has a nice clear label in analytics. The end result of what will be in the action field is:

FormID: {{dlv- formID}}

Let’s do the same thing with the Label field, except we’re going to add the dlv – form interest variable. The end result will be:

Interest: {{dlv – form interest}}

Just make sure you select your settings variable, and this part of the tag is done.

ga contact form 7 form submit event

All that is left is to add the custom – formSubmit trigger that we created earlier, click save, and our tag is done.

custom contact form 7 form submit trigger

5. Seeing Contact Form 7 Tracking Data in Google Analytics

All that’s left is to test it out. Make sure to publish your container, refresh your form page, submit a test form submission, and head over to the Real Time > Events in Google Analytics.

In a matter of seconds you’ll see a little blip, and you’ll see your event category and event action. If you click on either of those to drill down further, you can also see your event label.

GA real time contact form 7 tracking events

Success!

Comment, Like, and Subscribe Today

If you have any questions about contact form 7 tracking, please leave us a comment below.

While you’re at it, gives us a thumbs up on our video and subscribe to our channel to get new videos like this every week!

To take your data-driven marketing skills to the next level, sign up for our premium measure community Measure Masters today.

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jean
Jean
1 year ago

Hi, thank you for this great article. I followed exactly what you have explained, but my tag on the test environnement is fired as soon as the page has been loaded, not when a form is submitted. Where could be the error ?

Julian Juenemann
Admin
1 year ago
Reply to  Jean

thanks for your comment. Does the event appear on the left side? A screenshot would help.

Andi
Andi
1 year ago

Worked smoothly, even for GTM noob like me. Thank you for this comprehensive article, made my day (by now it’s night LOL). Been struggling for days to get this one working til I tried out your tutorial.
Big kudos and all the best!

Julian Juenemann
Admin
1 year ago
Reply to  Andi

Great to hear all the steps worked for you Andi!

Abdul Samad
Abdul Samad
1 year ago

i follow all the steps and its working fine but how i do track conversion in GA and set goals of this form submission kindly make video on it. it would be helpfull. let me know the solution for it thanks

Julian Juenemann
Admin
1 year ago
Reply to  Abdul Samad

Good to hear it worked Abdul. This post will help you with the next steps: https://measureschool.com/how-to-define-an-event-goal-in-google-analytics/

Lisa
Lisa
1 year ago

easy to follow even as a non Programmer. Exactly what I needed. Thank you so much.

Peter
Peter
1 year ago

Interesting. It seems that the event still fires even when some fields of the form aren’t filled. How do you manage this ?

Mark Pommett
Mark Pommett
1 year ago

How do we add Google ad conversion tracking for lead gen? Thanks

Julian Juenemann
Admin
1 year ago
Reply to  Mark Pommett

take your conversion tag and attach one of the triggers you use to track the form

Paul
Paul
1 year ago

Hi, thanks for this but the “formSubmit” does not appear in Chrome tag assistant. Screenshot attached.
 

Julian Juenemann
Admin
1 year ago
Reply to  Paul

It definitely works, but maybe not on your site. Your site and form might be different from the demo, so you might need to adjust your approach. From what you have written I can’t debug it from afar, so, unfortunately, I can’t give you instructions.

and btw: The Chrome tag assistant is called the Preview Console. It has nothing to do with Chrome or the Tag Assitant extension.

Paul
Paul
1 year ago

Thanks for the headsup. I was able to fix it with some workarounds. Thanks!

Mark
Mark
1 year ago

The instructions were fine until here:

“Just make sure you select your settings variable, and this part of the tag is done.”

Which settings variable? The formID or the form interest (or my equivalent) variable?

Thanks 🙂

Julian Juenemann
Admin
1 year ago
Reply to  Mark

I’m referring specifically to the GA Settings variable – https://measureschool.com/google-tag-manager-variables/

Muhammad
Muhammad
8 months ago

Hi, thank you for this tutorial but I have a question!
I am using multiple forms in my website, so how can I capture form ID in GTM and show it as form Title in Google Analytics Event?
For Example
FormID: 554 is for form “Download Brochure”
Form ID: 774 is for form ” Registration”

So can I show these form title instead of just form ID so I will have easy understanding of which form is getting filled more.

Thanks in Advance.

Julian Juenemann
Admin
8 months ago
Reply to  Muhammad

yes, I’d recommend you look into Lookup Table variables. You can essentially rewrite your FormIDs into whatever you want.

Jackson
Jackson
4 months ago

Hi Julian, I am having the same problem as Jean, not sure if that was resolved. No event appears on the preview and the tag is fired as soon as the page is loaded

Julian Juenemann
Admin
4 months ago
Reply to  Jackson

yea, it’s, unfortunately, a custom problem, which appears on some sites. There is no one way to solve these. It would require some looking into.

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.