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:

• How to Identify if Your Site Uses Contact Form 7?
• Tracking Forms With No Thank-You Pages
• Contact Form 7 Emits DOM Events
• Using the Dot Notation to Pull Values From an Array
• Using Variables in Your Google Analytics Event
• Seeing Contact Form 7 Tracking Data in Google Analytics
• DOM Events for WordPress Contact Form 7

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.

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

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.

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.

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.

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

Now let’s create a variable to hold the value of the 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

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.

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.

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

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.

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