Search
Close this search box.

Form Field Tracking with Google Tag Manager – The Ultimate Guide

Last Modified on June 2, 2024

So…you have form tracking set up, leads are coming in, and everything is going swimmingly. But wait, you don’t have form field tracking set up?

Oh no, you’re missing out!

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

Some of what you have to look forward to in this post:

We all know that we can ask users for precise information in our website forms. For example: Name, Email, Company Size, or Product Quantity to name a few.

All this information we collect helps us qualify our leads upfront and enrich each user with useful data points in our CRM.

However, what if you could also send this valuable data to Google Analytics and Facebook Ads? You can segment your data, create retargeting audiences, and analyze customer groups and preferences.

So, if you one day want to find out what percentage of your revenue comes from large companies or what marketing channel gave you the most leads, you’ll be able to do so.

Pretty neat right?

Well, today, I’ll show you one technique that you can use to grab the data submitted in your form fields and forward it to your favorite tracking tools.

Now, we’ve got lots to cover so let’s dive in!

What is Form Field Tracking?

It is a type of form tracking where you track specific form field entries from a user and then aggregate and analyze this data for insights.

For example, if you’re a SaaS company, you may ask your users what their company role is.

Later, you would analyze hundreds of your users over a year to see if any trends exist for what kind of users stick around longest, choose higher-tier plans, and contribute to most of your revenue.

Set Up Form Submission Tracking

🚨 Note: You’ll need Form Submission Tracking to be set up on your forms for this to work, so if you haven’t yet, go ahead and complete that setup before continuing.

First, if I fill out this form, and click submit, you’ll see that a Google Analytics event is fired. It sends over an event for our Contact Us form submission, which we can see in our GTM debugging tool.

Capture Form Field Data With a Form Trigger

We can also see this event being fired in our Analytics account itself.

If we go to our Google Analytics account → Real-Time reporting section → events, we see an event was just recorded.

Event recorded on Google Analytics real-time reporting section

As I mentioned, you’ll need to see these events firing before we start with any form field tracking implementation.

Let’s Start – Capturing Data With a Form Trigger

So in the example form, we have here, I have added a new form field for Company Size.

Company size field added to the form

While we are unable to send any personally identifiable information, like the name or the email address to Google Analytics, we can send over any other information we collect from this form.

🚨 Note: It wouldn’t make much sense to send the message field data over, as each message is likely unique and we won’t be able to see any trends based on it.

Standardized data, however, like the drop-down menu with the company size would be great data to segment our users later in Google Analytics or build an audience from that we can later target with ads.

So how can we send that data over and pick it up? 

We have the form submit trigger installed in Google Tag Manager called form – Contact Us, which has the event type: form submission.

Contact Us form submission trigger

It needs to satisfy the filter rules we set for the trigger.

Contas Us form trigger filter rules

If they are satisfied, we fire our event to Google Analytics, and the data is recorded. 

Inspect the Form Trigger Variables and Data Layer

With that trigger, we have certain variables filled automatically. 

If you go to the variable menu, you will see the form element, classes, ID, Target, and so on, have been filled with data. 

Inspecting the form trigger variables in the data layer

You can see the classes and form texts, but there’s also an interesting one, the form element. And here it says object HTML form element.

Inspect the form trigger variables in the data layer

As you might know, this is all the data currently in the Data Layer. 

Let’s go to the Data Layer tab. We can find our GTM Form Submit event and the entire code pushed to the data layer when we submit a form.

Data Layer from the GTM form submit event

Each row corresponds to key-value pairs that we can see in the Variables tab. For example, the gtm.elementclasses translates to the Form Classes variable.

If we look at the gtm.element portion, it still doesn’t give us more information here.

Let’s look into the data Layer and the actual JavaScript object in your browser’s developer tools.

Find the Form Field Value we Need Using JavaScript Object in Chrome Developer Tools 

Open your browser’s settings, go to More ToolsDeveloper Tools.

Opening the browser's developer tools

We can then go to the Console tab and type in dataLayer.

🚨 Note: There needs to be a capital L, like this: dataLayer

Click enter and we can see the Data Layer. Press the triangle to open it up.

Viewing the data layer in the console tab of the developer tools

So here we can see the actual events that happened and the data Layer pushes that happened.

Find Form Field Value We Need Using JavaScript Object in Developer Tools

If you compare it to our event menu here, we see the message, page view, DOM ready, and so on. We have five messages here.

If we look at the number of events in the Tag Assistant and the data layer, we have the same five items.

Comparing the number of events in the Tag Assistant and the data layer

🚨 Note: The numbering is a bit different between the two because the array in the data layer starts with the index zero. 

We want to particularly look at this fifth one. So the last one, which is the number four right here. Let’s open that up.

It has the information we also saw in the Data Layer. Let’s go to this GTM element and open that up. It gives us a host of information.

Expanding the form submit event in the data layer

What does this information mean?

The data layer is automatically filled with event information from the Form Submit, so anything from classes, parent elements, or the method the data is being transferred. 

The interesting part here is the input fields.

If I go and hover over them, it highlights the specific elements of our form. I want to look at the company size.

Scroll over and hover over each row to find which one corresponds to our company size drop-down select field.

Company size input field in the data layer

I want to take a look at this closer.

I’m just going to open this up again. We have again, more information here about this drop-down field.

Expanding the company size field in the data layer

We have the options and all different information could be interesting, like the input field ID, name, parent element, and so on.

If we look closely and scroll to the bottom, we will find the actual value that this element holds when we click on the submit button. So in this case, it is a Small Business.

Company size value in the data layer