3 Form Tracking Techniques with Google Tag Manager

Having form tracking set up on all your website forms is an absolute must. And Google Tag Manager makes doing it easy and flexible.

In this post, we are going to explore three techniques to track form submissions with the help of Google Tag Manager and Google Analytics.

What Should You Track?

You can track a lot on your forms:

  • Form submissions
  • Pulling data from form fields
  • Inserting information from your website into form fields
  • Prefilling form fields

In this post, I’ll be talking about form submission tracking specifically. However, here are some of our other guides on form tracking:

How to Track Form Submissions?

Why are there three different techniques? Well, there are always multiple techniques to get the data that you want. You shouldn’t be discouraged when one or the other technique doesn’t work for what you need.

If you are flexible, you can learn about the capabilities of each tool. This way, you’ll be able to implement and test different tracking techniques so you get the data that you need in your system.

This holds especially true for forms because there are many shapes and sizes of forms available, each with different technologies. Sometimes the trigger or the technique that I show in my individual tutorials won’t work for a specific form, so it helps if you stay flexible and know about these different tracking techniques.

In this post, I’m going to show you the three tracking techniques that I use most often when it comes to forms.

Which Technique Should You Use? (Test Your Form)

Start by having your web page with the form you want to track, Google Tag Manager, and Google Analytics all open in three separate tabs. In our demo shop, we have several different contact forms.

This tutorial covers three different form tracking techniques, but not all techniques work with all types of forms. In order to find out which tracking technique we need to use, you’ll first need to test your form.

This will help you figure out what success outcome we should use as our form trigger and hence which technique to use.

There are three that we will look for in this tutorial: a URL success page; a form submit trigger; and an element visibility trigger.

In your form, fill out some test information. Click on Send and see what happens.

Screenshot of Contact Form 1 being filled and submitted with test data

In the case of this first form case, we get redirected to a success page with a unique URL in the address bar.

Screenshot of a thank you page on a website after a form has been submitted

Keep track of these interactions on your site. If there is a clear success page here and the URL changes, you can track form submissions using ordinary pageviews on Google Analytics without much extra effort.

You should use the first form tracking method of this tutorial: 1. Tracking Form Submits with a URL Success Page.

Let’s demonstrate a different potential outcome. If your contact form doesn’t lead to a new URL when a user submits, tracking can get a little more tricky.

In this second contact form, we seem to be redirected to a success page, but the URL doesn’t actually change. Instead, we get a message on the same page that this was submitted successfully.

Screenshot of form  page with no form but a message saying that the form was successfully submitted

If this is how your contract form behaves, we need to try a different tracking approach because there’s no new pageview to track. In this case, you should use use the second method in this tutorial: 2. Form Tracking With Form Submit Trigger.

There is a third possibility that we will cover in this tutorial. On this third contact form, it just gives us a success message down here at the bottom of the form, which is still visible. There is no new URL, and besides the addition of this text element, the page hasn’t changed after submitting the form.

Screenshot of Contact Form 3 being filled out and submitted, with text at the bottom of the form confirming that a message was sent

If your form submission looks like this, you might have a couple of options. Again, you can’t track success based on the URL, but you might be able use the Google Tag Manager forms submission from the second method. This is especially handy if you already have this form trigger set up from following the tutorial.

However, I want to show you another method to track this that will give you more flexibility. In some cases, you might not want to use the form submit trigger if it has some problem, or if you don’t even see the event inside of Google Tag Manager.

In this case, you’ll want to try the third method covered in this post: 3. Form Tracking With Element Visibility Trigger.

1. Tracking Form Submits with a URL Success Page

If you already have Google Analytics deployed, then you will get some data just from the page view for the success page in your Google Analytics account. 

Screenshot of Google Analytics showing the real-time overview report with one active page view for the form submission

From here, you can classify this as a Google Analytics Goal so that every time somebody goes to this page, there will be a conversion within Google Analytics.

Create a Goal in Google Analytics

Go over to your settings, marked by the gear icon, and make sure you are looking under the Admin header. Under the Goals heading, click the button that says + New Goal.

Screenshot of Google Analytics admin section and creating a new goal

You’ll see  different template options here. I usually go with the custom template. Pick what works for you and click Continue.

Screenshot of selecting a radio button labeled “Custom” on a Google Analytics goal creation page

Under the Goal Description, give your Goal an appropriate name, such as Contact Us submit. Next, choose a Goal slot ID and the type of Goal that you want to input. In this case, you have a page view that you want to classify, so select the Destination Goal here. Continue to the next section.

Screenshot of naming a new goal, choosing a goal slot ID, and choosing a goal type in Google Analytics

Next, you want to connect this Goal directly to the URL for the success page. Select the Equals to option, and fill the field with the corresponding URL segment. Note that you don’t want to put in the full URL! You just need the page path that comes after your domain.

Screenshot of selecting goal destination in Google Analytics

Actually, I usually choose a different type of matching option here. I’ll often choose Regular expressions, because it’s very powerful. We did a video on this as well, if you want to get a little bit more sophisticated with your tracking and cover different cases and matching options, then I’d recommend to check out regular expressions. But for the sake of simplicity, let’s use Equals to for this tutorial since it works well for this purpose.

Testing

To test your new Goal, start by clicking Verify this Goal under your Goal details. For this demo account, it says zero percent conversion rate. This is expected for the tutorial’s demo site since there isn’t much data for it, but if yours is working, you should see some more conversions.

Screenshot of Google Analytics goal page with goal details section filled, mouse hovering over button labeled “Verify this Goal”

Another way to test your new Goal is in real time on your site. Save this for now.

Screenshot of saving a new goal in Google Analytics

And then let’s go back to our Real-Time Report and click on the Conversions heading.

Screenshot of Google Analytics conversions page with no recent conversion data

Now that you have open, you can go back to your form on a different tab. Try another conversion here by testing your form submission and seeing what happens on your Google Analytics conversion data.

Screenshot of contact form being filled and submitted

If everything is working, you’ll see your Goal appear in your conversions data. You’ll be able to view that and a full report later on as a Goal conversion.

Screenshot of Google Analytics conversions page with one active goal for the form submission

As you can see, it doesn’t always have to be complicated when it comes to tracking forms and form successes. If you have a success page right after the form is submitted, the user has taken the action that you wanted them to take. Therefore, the action can be converted and you can fire your tag or set up such a Goal conversion inside of the tool.

2. Form Tracking With Form Submit Trigger

Set Up in Google Tag Manager

If your contact form changes appearance and presents a success message without navigating to a new page with a different URL, you’ll need to build something in Google Tag Manager to make this work. One of the methods is to use the built-in form submission trigger to pick up the interaction of submitting the form. 

Create Form Submit Trigger

How does that work? Well, in your Google Tag Manager account, click the Triggers heading and click New to create a new trigger.

Screenshot of Google Tag Manager creating a new trigger

This new trigger will be our form trigger, so remember to name it. Next, click in the box and scroll down until you find the configuration type called Submission Trigger. Click on this.

Screenshot of naming new form trigger and choosing “Form Submission” as the trigger type

For now, leave all your options unchecked. We can come back to these later. Just to try it out, go ahead and click the Save button.

Screenshot of saving trigger configuration in Google Tag Manager

Set Up Form Variables

We have one more step before testing. Under the heading Variables, click the Configure button. Scroll down until you find all the variables related to forms. Check each of the boxes to activate them.

Screenshot of configuring variables in Google Tag Manager, with boxes checked for all variables related to forms

With those activated, you can move on to preview and debug mode. Click out of the popup to return to the Google Tag Manager page and click the Preview button.

Screenshot of variables in Google Tag Manager showing all form variables activated, with mouse hovering over “Preview” button

Return to your contact form page. To test your new trigger, fill out and submit the form.

You should see our preview and debug mode down at the bottom of your screen. Pay attention to what happens in your Google Tag Manager box once you click the Send button.

You will probably see there is a submission briefly inside of this box, but it will disappear when you are  redirected to the success page, which makes it hard to inspect.

To get around this, I usually  just open up the submission in a new tab by holding Command (⌘) for Mac or Control (Ctrl) for Windows while clicking on the Send button. This will open up our success page in a new tab, and leave your form tab alone, which is really handy for looking at our form submission tracking in Google Tag Manager. 

Screenshot of submitting form using Ctrl+click with Google Tag Manager extension across the bottom of the screen

Inspect Form Submit Variable Fields

To inspect your trigger tracking, click on the Variables header in your Google Tag Manager box. Here’s where you can find the variables that you just activated. You can inspect them and see how they get filled when you complete an action like submitting the form. This is what Google Tag Manager picks up from the form, and you can use that information to build a trigger and fire a tag. Now, it’s important to remember that this trigger should be unique to this specific form so that your Google Tag Manager form submission doesn’t trigger when another form, like a search form, is filled out.

Screenshot of form variables for the form submission on Google Tag Manager extension

To demonstrate this, I will use a different field in the sidebar on the same page. I can fill out the field and click the Sign up button and ⌘+click or Ctrl+click to inspect the variables in my Google Tag Manager box.

Screenshot of filling out and submitting email newsletter subscription in sidebar

Now we’ll see two forms submissions here, and we can compare them to each other to make sure that your trigger correctly fires on only the contact form. If you switch between the fourth and the fifth tags in Google Tag Manager (the ones associated with the two form submissions), you’ll notice that one variable changes: the Form ID.

Screenshot of highlighted “Form ID” variable on form submissions in Google Tag Manager extension

If there’s a Form ID available in your form, Google Tag Manager pick that up and put it into your form variables. You can use these variables to more narrowly define your trigger filter for this particular event. In Google Tag Manager, you can select your form trigger to edit it into a specific trigger that only fires on your contact form.

Screenshot of form trigger in Google Tag Manager

Now that this form trigger is specifically for your contact form, be sure to rename it to reflect that. Now you can install a filter in these configurations. Click the radio button for Some Forms and  choose the variable that you want to specify. In this case, it would be the Form ID. There are different matching options, which in this case can be either equals or contains. Finally, enter the Form ID variable that is specific to your contact form. This is the part that tells Google Tag Manager to track your contact form and not any other form for this trigger. Remember to save your changes!

Screenshot of renaming form trigger, selecting radio button for “Some Forms,” and specifying the correct Form ID for the contact form in trigger configuration settings

Create Tag

Now, if you want to send this over to Google Analytics, you would make this with an event tag because it’s an interaction, not a page view (since there is no new URL). In Google Tag Manager, select the Tags heading and click the New button.

Screenshot of Google Tag Manager tags section creating a new tag

Here, you can build a new tag that will interact with Google Anaytics. Name it appropriately, click in the box to select a tag type, and click on the tag type called Google Analytics – Universal Analytics.

Screenshot of naming tag and selecting Google Analytics as the tag type in Google Tag Manager

Select Event from the Track Type dropdown, and fill out the category and action fields according to the type of event and the function. In this case, Form Submit and Contact Us are good descriptors. You should definitely fill in the Categories and Action fields, but you can leave the Label and the Value fields free if you like.

Screenshot of tag configurations, selecting “Event” as the track type, naming the category “Form Submit,” and naming the action “Contact Us”

Select your Google Analytics settings variable in order to link your tag to your Google Analytics account. Click in the Triggering box to select a trigger, which you already defined earlier.

Screenshot of choosing Google Analytics settings and choosing a trigger to make the tag fire in tag configuration settings

Simply select the trigger that you configured earlier. No extra edits needed.

Screenshot of choosing trigger

This should give you a functioning tag. Don’t forget to save!

Screenshot of saving tag in Google Tag Manager

Testing

Refresh the page and head into preview and debug mode. It’s a good idea to refresh your shop page, too. To test your new trigger tracking, fill out the form and submit it. If everything is working, you should see your tag appear in your Google Tag Manager box.

Screenshot of Google Tag Manager extension showing that a tag fired for a form submission event

You’ll see in Google Analytics that your form submission and your Google Analytics event fired and were recorded. Under the reports heading Real-Time and the subheading Events, you should be able to see the data successfully recorded.

Screenshot of Google Analytics real-time events report showing one active event for a form submission

Create Goal in Google Analytics

If you want to create a Goal out of this event in Google Analytics, head over to your admin section, marked by the gear icon. If you created a Goal using the first tracking method, go ahead and click that same one. Otherwise, create a new Goal and name it accordingly.

Screenshot of selecting goal from list in of existing goals in Google Analytics

Since this contact form has an interaction rather than a new URL when successfully submitted, change the type to an Event. Continue to the next section.

Screenshot of editing goal description to an “Event” type

Here, you can enter the category. You don’t have to actually fill out every field. Just one completed field will work, but it must model whatever data gets sent over to Google Analytics. So in this case, the descriptors we used earlier in Google Analytics were Form Submit and Contact Us. Therefore, we should copy one of those into the corresponding field, such as Contact Us in the Action field. Save this to have updated configurations. 

Screenshot of writing “Contact Us” in the action field of goal details and saving the goal configuration

If you go back to your form page and submit the form, you should see a new Goal conversion happening on your Google Analytics page under the subheading Conversions

Screenshot of Google Analytics real-time conversions report showing one active goal conversion for a form submission

So this is the second way to track forms with Google Tag Manager by using the form submit trigger.

Top Tip: Check Validation

Now, you might have seen these options that I’ve skipped over in the trigger section: Wait for Tags and Check Validation. My experience with these checkboxes is that you need to be testing them before implementing them and not just ticking them by default. So if your form now works and your conversion now is tracked, I would recommend trying these out.

If you check the box for Check Validation, you will get more fields. Here, you can use your page path variable or page URL variable to tell Google Tag Manager when it should track this form submission. For example, maybe you don’t want it to pay attention to all pages. If you only want to track this on the “Contact Us” page, you can specify that by selecting Page Path, contains, and the URL segment for your page. This will turn on the Check Validation feature for this form. This means that if a user has entered something wrong, such as an invalid email address, you usually get an error and you don’t want to fire your tags. This function prevents this from happening, but it doesn’t always work for every form depending on how it is built. Therefore, I would test this out with your form rather than turn it on by default. If this solves your problem, keep it checked. If it breaks your trigger and suddenly you don’t get your form submission anymore, then I would turn this off.

Screenshot of trigger configuration with “Check Validation” box checked to validate that the page path contains a contact form

Top Tip: Wait for Tags

I also recommend that you test the Wait for Tags option before implementing it rather than check it by default. Wait for Tags is a function that makes sure your event and all your tags have fired before the user gets redirected on to the next page. Usually, I think this is a good option to take. But again, because this won’t work well for all forms, I would thoroughly test this before deploying it. 

Screenshot of trigger configuration with “Wait for Tags” box checked

3. Form Tracking With Element Visibility Trigger

What is the Element Visibility Trigger?

If your form adds a new element to the page upon submission, then using an element visibility trigger is a good way to track form submissions.

Element visibility triggers fire when a page element becomes visible on a user’s screen, which is helpful when a pageview doesn’t necessarily demonstrate user engagement.

This also can be useful for things like scroll tracking, but in our case we want to use an element visibility trigger to track an element that only becomes visible after a form has been submitted.

Let’s take a look at this in Google Tag Manager. Go to the Triggers heading and click on the New button.

Screenshot of creating a new trigger in Google Tag Manager

Click in the box to select a trigger configuration. This time, we want to select the Element Visibility trigger. What is this trigger all about?

As its name implies, the element visibility trigger will fire if something is visible on the screen to the user. It does this by inspecting and observing the document object model to see if there are any changes. 

Screenshot of selecting “Element Visibility” as new trigger type

Inspect Your Page with Chrome Developer Tools

To demonstrate this, if I right-click on the success message, I can go into our developer tools by clicking on Inspect

Screenshot of right-clicking on text element with mouse hovering over menu item “Inspect”

This view is in Chrome Developer Tools, and here we can see the representation of the document object model. Here, we can choose one of the elements that is changing during the page load.

We can see that there is a div class called “wpcf7-mail-sent-ok,” which is one of the nodes that gets inserted when a submission has happened successfully. Copy this node.

Screenshot of highlighted div class CSS code in Chrome Developer Tools extension and highlighted text element on page

If I reload the page and we look at that same node here, you’ll notice that this success class looks different. This is because it actually gets changed once we fill out this form. 

Screenshot of specific div class CSS code after form was submitted

If I submit the form and pay attention to this div class, we see that there was a different style appended. There’s also a new class appended to this: “wpcf7-mail-sent-ok.”

Screenshot of new div class CSS code with highlighted page text element

Set Up in Google Tag Manager

Create Element Visibility Trigger

To have effective element visibility triggers, you need make sure that your tag fires when the element changes. It really helps to have a bit of CSS knowledge, because we will use it to tell Google Tag Manager which element it should be observing.

If you don’t know CSS, just follow along closely with the tutorial and you should still be able to create the trigger. In the trigger configuration on Google Tag Manager, you are given the option to use either the ID or the CSS selector.

Since the div node we found earlier doesn’t have an ID, you will need to use the CSS selector.

Element Selector

What do you enter into the CSS selector field? This is something we can test in our JavaScript console. To access the console, select the Console header in your developer tool. In the command field at the bottom of the console, type document.querySelector followed by parentheses around a pair of double-quotes.

Between the quotes, you can enter any CSS selector and try this all out. Now, in this case, we had a div node, so we can look for the CSS by typing “div” in the quotes.

Therefore, the whole text in the command field should read document.querySelector(“div”).

Screenshot of inputting selector script into Chrome Developer Tools console

To test this, hit the enter key. When you do this, you’ll get the first div that’s on the page. Here, that was the div class hfeed site.

As it turns out, that’s not the div that we wanted to select. We wanted to select the one that changed earlier when we submitted the form: the class wpcf7-mail-sent-ok

Screenshot of Chrome Developer Tools highlighting selected CSS code “hfeed site”

To select for more specific classes, you’ll have to use dot notation. This time, add a dot and then the class that you want. In this case, your command field should read document.querySelector(“div.wpcf7-mail-sent-ok”).

Press enter, and then hover your mouse over it. The success element on your form page should light up in response when you do, which tells you that you have found the element that you want Google Tag Manager to observe.

Screenshot of Chrome Developer Tools with new selector script and new selected script that highlights text element on page

So now you have confirmed that this is the right CSS selector to enter into my Google Tag Manager trigger configuration. Copy the whole node div.wpcf7-mail-sent-ok.

Screenshot of trigger configuration with “Element Visibility” as the trigger type, “CSS Selector” as the selection method, and form submission success script as the element selector
When to Fire This Trigger?

The trigger configuration has a few options for trigger frequency. In the case of this particular form, users can fill it out and submit it multiple times without navigating away from the page. Because of this, you should select the option Every time the element appears on screen

Screenshot of trigger configurations with radio button selected to fire trigger “Every time an element appears on screen,” with 50 as the maximum percent visible
Visibility

The visibility field asks how much of the element needs to be visible for the trigger to fire. If it’s at the edge of the screen, it’s not visible to the user, but you still want to trigger the tag. 50% is fine in that case.

Observe DOM Changes

You’ll also need to select the Observe DOM changes option. A  little warning box will appear because it can slightly affect site performance, but realistically, it shouldn’t affect too much of the page load time. 

Trigger on All Elements

For the last option, select the All Visibility Events button.

Screenshot of trigger configurations with “Observe DOM changes” box checked, and trigger fires on “All Visibility Events”

Remember to give your trigger an appropriate name that will make sense when you look at your tags later. Save and refresh the page. 

Create Tag

Go ahead and connect this your predefined event tag from earlier in the tutorial. Click on the tag to edit it and you can simply switch out the trigger.

Screenshot of refreshing Google Tag Manager and selecting existing tag

We can do this down here by clicking the edit button, marked by the pencil icon.

Screenshot of selecting edit button for tag triggering

Get rid of the old trigger by clicking the minus-shaped delete button.

Screenshot of deleting existing tag trigger

Then click in the Triggering box and click the new visibility element trigger to add it to your event tag.

Remember to save on your way out!

Screenshot of saving Google Tag Manager tag configuration

Testing

To test your new trigger, refresh Google Tag Manager, refresh your form page, and close the developer tools box.

Fill out and submit your form one more time. Once you’ve submitted it, you’ll see your element visibility tag appear in Google Tag Manager.

Screenshot of Google Tag Manager extension showing that a tag fired for an element visibility trigger after submitting a form

And since you have set it up as a Goal, you’ll also see a new conversion inside of Google Analytics.

Screenshot of Google Analytics real-time conversions report showing one active goal conversion for contact form submission

That’s it! This is the third method of installing form tracking with the help of Google Tag Manager and using the element visibility trigger.

Other Form Tracking Techniques Worth Mentioning

  • Form Tracking With AJAX – explained in MeasureMasters
  • History Change Listener – explained in MeasureMasters
  • Data Layer Pushes – explained in MeasureMasters

Summary

So there you have it! This is how you can track forms with the help of Google Tag Manager and Google Analytics. These are three of the main form of tracking techniques and should cover most use cases.

Have you enjoyed success with a different technique? Would you like to see more content on other tracking techniques? Please leave a comment down below!

Julian Juenemann
About the author: Julian Juenemann

Julian started and grew venture-backed startups with his unique 'data first' approach to Online Marketing. He then founded MeasureSchool.com to help marketers, like him, the data-driven way of digital marketing.

guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tracie C
Tracie C
1 month ago

Thank you for the video! It helped a lot!

Veliyan Deliyski
Veliyan Deliyski
1 month ago

Hi Julian, great video.

However, I see that you set up the trigger to fire every time the “thank you” element appears in the viewport. After firing it, you scrolled to the top of the page, so the element was no longer in the viewport. Don’t you think that it will fire once again when you scroll back to it? And if yes, how would you handle the option to submit the same form multiple times on the same page?

Best regards and thank you in advance.

Veliyan Deliyski
Veliyan Deliyski
1 month ago

I am talking about form submissions that do not result in a page reload or redirect – when you just submit the form and a ‘thank you’ div appears on the screen. So how would you handle multiple form, submits in this case (because sometimes the users tend to do so)?