MeasureSchool logo
Search
Close this search box.
Search
Close this search box.

Contact Form 7 Tracking With Google Tag Manager

Last Modified on March 20, 2024

Contact Form 7 is a free WordPress plugin you can use to create different styles of contact forms that you can add to your web pages.

Have you set up your Contact Form 7 tracking yet?

In this guide, we’ll show you how to pass this data on to your Facebook pixel, Google Analytics, or Google Ads.

Here is an overview of what we’ll cover:

If you’re new to Google Tag Manager, check out our in-depth Google Tag Manager tutorial.

How to Identify if Your Site Uses Contact Form 7?

If you’re unsure whether your WordPress website uses the Contact Form 7 plugin, there are several ways to determine this. Here’s a step-by-step guide to help you identify if your site is utilizing Contact Form 7:

  1. WordPress Dashboard Check:

    • Log in to your WordPress dashboard.
    • Navigate to the “Plugins” section on the left sidebar.
    • Browse through the list of installed plugins. If you see “Contact Form 7” listed, then your site uses this plugin.
  2. Inspect Element Method:

    • Visit a page on your website where you suspect a contact form might be present.
    • Right-click on the form and select “Inspect” or “Inspect Element” from the context menu.
    • In the developer tools panel, look for elements or classes that include “wpcf7” in their name. If you find such elements, it’s a strong indication that the form is powered by Contact Form 7.
  3. Source Code Search:

    • Right-click anywhere on your website and select “View Page Source” or a similar option.
    • Use the search function (usually Ctrl + F or Cmd + F) and type in “wpcf7” or “Contact Form 7”.
    • If you find matches in the source code, your site likely uses the Contact Form 7 plugin.
  4. Plugin Detection Tools:

    • There are online tools available that can scan your website and provide a list of plugins being used. Tools like “BuiltWith” or “WPThemeDetector” can be helpful in this regard. Simply enter your website URL, and these tools will provide insights into the plugins your site is using.

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.

💡 Top Tip: Before setting up anything on your website, you can try it out first on your demo website.

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

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.

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 the form has fields with invalid input
  • wpcf7spam: fires when possible spam activity has been detected
  • wpcf7mailfailed: fires when form submission has been completed successfully, but sending mail failed
  • wpcf7submit: fires when form submission has been 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 the 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 the menu-597 field.

menu 597 field

To store this value, we will 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.

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

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. Select a variable by clicking the “+” button next to the action field.

Google Analytics form tracking event tag with variables

Select your dlv – formID variable. In this case, we put “FormID: ” in front of the variable, so that it has a nice clear label in analytics. The 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 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

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 to 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!

DOM Events for WordPress Contact Form 7

DOM (Document Object Model) events are signals that indicate something has occurred on a webpage.

These can be triggered by user interactions, browser actions, or specific scripts.

Contact Form 7, being a dynamic plugin, triggers several DOM events that can be useful for tracking and other purposes.

Here are the primary DOM events associated with Contact Form 7:

  1. wpcf7submit: This event fires when a form submission has been completed, regardless of whether the submission was successful or not.
  2. wpcf7mailsent: This event is triggered when the form submission is successful, and the email has been sent without any issues.
  3. wpcf7invalid: If the form submission contains invalid inputs (like missing required fields or incorrect email format), this event is triggered.
  4. wpcf7spam: This event fires when the form submission is suspected of being spam. Contact Form 7 has built-in spam protection, and when it detects potential spam activity, this event is triggered.
  5. wpcf7mailfailed: In cases where the form submission is technically successful, but the email-sending process fails, this event is triggered.

Summary

That’s how to set up Contact Form 7 tracking with Google Tag Manager.

If you want to up your GTM game, you can also learn how to track popups with GTM.

Have you set up your Contact Form 7 tracking with GTM? Have you run into any trouble while setting it up? Let us know in the comments down below!

FAQ

How can I track Contact Form 7 submissions using Google Tag Manager?

To track Contact Form 7 submissions with Google Tag Manager, you can utilize DOM events emitted by Contact Form 7. By creating a custom HTML tag in Google Tag Manager and setting up triggers based on these events, you can capture and pass form submission data to analytics platforms like Google Analytics or Facebook Pixel.

What are DOM events in the context of Contact Form 7 tracking?

DOM events, or document object model events, are events emitted within the JavaScript runtime environment. In the case of Contact Form 7, DOM events like “wpcf7submit” are triggered when form submissions occur. These events can be leveraged to track and capture data associated with form submissions.

Which analytics platforms can I integrate with Contact Form 7 tracking?

With the help of Google Tag Manager, you can pass Contact Form 7 tracking data to various analytics platforms such as Google Analytics, Facebook Pixel, or Google Ads. By configuring the appropriate tags and triggers, you can ensure that form submission data is recorded and available for analysis in your chosen analytics tools.

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
21 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jean
Jean
4 years 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
Julian Juenemann
4 years ago
Reply to  Jean

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

Andi
Andi
4 years 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
Julian Juenemann
4 years ago
Reply to  Andi

Great to hear all the steps worked for you Andi!

Abdul Samad
Abdul Samad
4 years 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
Julian Juenemann
4 years ago
Reply to  Abdul Samad

Good to hear it worked Abdul. This post will help you with the next steps.

Last edited 8 days ago by Aleksa Filipovic
Lisa
Lisa
4 years ago

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

Peter
Peter
4 years 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
3 years ago

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

Julian Juenemann
Admin
Julian Juenemann
3 years ago
Reply to  Mark Pommett

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

Paul
Paul
3 years ago

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

Julian Juenemann
Admin
Julian Juenemann
3 years 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
3 years ago

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

Mark
Mark
3 years 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
Julian Juenemann
3 years ago
Reply to  Mark

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

Muhammad
Muhammad
3 years 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
Julian Juenemann
3 years 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
3 years 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
Julian Juenemann
3 years 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.

Christina
Christina
2 years ago

Hey Julian 🙂 First of all thank you for your helpful instructions. I followed exactly what you described besides that I changed the trigger for the event listener. I created a custom trigger that is based on the event “borlabsCookieOptInGoogleAnalytics” that is automatically pushed into the data layer by the Borlabs Cookie Plugin when a user gives consent to all cookies. The event listener loads in the gtm preview when I accept all cookies but when I describe to the form the GA Tag for the form submission does not fire. Do you have any suggestion to solve the problem?… Read more »

Last edited 2 years ago by Christina
Uroš
Uroš
1 year ago

Thanks Julian 😉 … I found this guide and I need to say that it is so easy when you teach us how to take advantage of Tag Manager. Though I have a little problem. I have made everything what you have said, but the Tag fires also when there is a field missing and I get the error msg. Can you help me with that? In Click element I get different values (invalid & sent) but when I am trying to set this as an additional condition to fire a tag it doesn’t fire in any case. Is this… Read more »

MeasureSchool Locker

Unlock our Free Tools, Templates and Resources

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.

Ready to take your digital marketing to the next level?

Subscribe to our newsletter and stay ahead with our latest tips and strategies.