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

Form Field Tracking with Google Tag Manager – The Ultimate Guide

Last Modified on March 25, 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?

GTM For Beginners

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

Oh no, you’re missing out!

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

We all know that we can ask users for very specific information in our website forms.

For example: Name, Email, Company Size or Product Quantity to name a few. 

All this information that we collect helps us to 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 would be able to 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’m going to show you one technique that you can use to grab the data submitted in your form fields and forward it on 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 on, you would perform an analysis of hundreds of your users over the course of a year to see if there are any trends 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 off, 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 submit, 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 under the real-time reporting section, under events, we see an event was just recorded.

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

Let’s Start – Capturing Data With a Form Trigger

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

And while we are not allowed to send any personal identifiable information, like the name or the email address to Google Analytics, we can send over any other information that we collect from this form.

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

But standardized data like this drop-down menu with the company size would be really great data to be able 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 actually pick it up? 

Well, if you have the form submit trigger installed in Google Tag Manager, we’ll be able to see that for this event Contact Us, and the event type form submission.

And if checks our rules or trigger rules, filter rules that we have right here, then we fire our event to Google Analytics and data is recorded. 

Inspect the Form Trigger Variables and Data Layer

With that trigger, we actually have certain variables filled automatically. 

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

inspect-form-trigger-variables-data-layer

We actually use the form ID to fire our tag. So only if that condition is true we fire our tag.

You can see the classes, you can see the form texts, which doesn’t really make too much sense. 

But there’s also an interesting one, which is the form element. And here it says object HTML form element. 

As you might know, this is all data that is currently in the Data Layer. So let’s go over to this tab right here. 

We can find our form elements again. This is actually what’s getting pushed to the data Layer when we submit a form. 

So we have gtm.elementclasses, which is translated into this form classes variable. And we also have our GTM.element, which still doesn’t give us more information here. So let’s look into the data Layer and the actual JavaScript object. 

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

We need to open up our Developer Tools then go to More tools.

We can then simply go to the console right here, and type in the words data Layer. 

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

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

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

find-form-field-value

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

And in this case, we also have five, the number is a bit different because array 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. And this one has our GTM element in here, and a little bit more information. 

So let’s open that up. 

And we have some information here. This is really what we also saw in the data Layer. 

Let’s go to this GTM element and actually open that up, and it gives us a host of information. 

What does that actually mean? 

Well, the data layer is actually automatically filled with the event information from the Form Submit. 

So anything from classes or the parent elements, the method hereof that data being transferred is also in this element. 

But the interesting part here is actually the input fields, because you may have noticed this already, if I go and hover over them, we have a few signs up here that this is actually activated. 

I want to look at the company size here. So I’m going to just scroll over and see right here. I can find that this element is probably our interest or company size drop down select field. 

I want to take a look at this closer. 

I’m just going to open this up again. And we have again, more information here about this drop-down field. We have the options, all different information could be interesting, like what the idea of this input field is, what the next sibling is, for example, and so on, and so on. 

But if we look closely and it’s actually right at the bottom, we will find the actual value that this element holds when we click on the submit button. So in this case, it would be small business

So this is great because we can pull it out of this element, and then transfer that into Google Analytics. 

How would we do that? 

Well, since this is in the data Layer, we would need to use a data Layer variable. So let’s go over to Google Tag Manager, click on variables here.

Pull the Form Field Value from the Data Layer

We’re going to create a new user-defined variable. This will be a dataLayer variable for our business size. And as the configurations will choose our data Layer variable right here. 

And what do we put into the data Layer variable name? 

We’re going to use the dot notation and it’s pretty straightforward if you know the rules. You just need to look for the right elements. 

In this case, it would be four, ignore this element number four, as we will check any data Layer push if this is actually available. 

Where we want to start is to look at what is in front of the colon here, gtm.element, and we go down with see 14, and then we go down even further, which was value. 

If I hover over this value you already see 4 GTM element 14 value. 

Again, ignore the four we’ll just go with the GTM element at the beginning. Go over to Google Tag Manager, input GTM element, then with the dot notation, we’ll dig deeper into this object, which would be the number 14. 

And then we’re going to get our value. Let’s save this and simply try it out. Let’s go back reload here, going to put in another test and send it off. Let’s choose corporate and send this off.

pull-form-field-value-from-data-layer

GTM Form Submit right here, and how that our data Layer variable gets filled with the actual value of the input field. 

Great!

We can now use that data Layer variable to fill in our missing pieces in our Google Analytics event tag. 

Push Your Form Data to Google Analytics

Let’s go over to Google Tag Manager and tags will simply edit our tag. Here we have a category action. 

And let’s fill the label with our data Layer variable business size. 

Again, this is just like a placeholder, it will be filled with whatever the user has chosen as his business size.

We can leave all the other configurations untouched. If you want to configure this again, then check out the post. 

Let’s save this, refresh.

Now our form field tracking is all set up and we just have to test it’s working.

Go back to our page. Let’s do this again, fill out the form and the message and choose a company size and click submit.

add-data-layer-variable-to-tag

Analyzing Form Field Data in Google Analytics

Let’s go over to Google Analytics and see if we have a new Form Submit. 

It just came in. 

And if we click here on the form category, we see that the Contact Us is now medium size business

So this was correctly transferred. 

Obviously, you can look at the data in all the other Google Analytics Reports after some time has passed.

Once you have been collecting data for some time, which is under the behavior reports under events, you will find your Contact Us form submit. 

Note: It takes a bit of time for Google Analytics to gather the data and display it in all the other reports. 

But that’s really how you would send over your data to Google Analytics. 

form-field-data-analysis-google-analytics

Segment Your Data Based on Form Field Value

And if you choose to segment the data later, so only look at one or the other business size, you could always add a segment here, and then build your own segment that looks at the events that only have the label small business size, for example. 

But this is how you could then use that data to segment your users in Google Analytics.

segment-your-data-woth-form-field-value

But obviously, since we have implemented this in Google Tag Manager, we are not restricted to just using this data in Google Analytics, we could also send it over to Facebook or Google Ads. 

Form Field Tracking Use Case #1: Enrich Your Facebook Pixel Conversion Data

So if we had a Facebook event here, and I have prepared a Facebook event that fires on our page view and tracks the lead, we could add some extra data here by putting in a comma and a new object. 

And then expanding that to say, we want to send over the attribute business size. And I’m going to send over whatever is filled into our data Layer variable. 

So in our case, I’m going to open this up with the two curly brackets and choose my data Layer variable that I have just created right here. Then I attach my usual trigger and save this. 

Refresh. 

Let’s try this out again. 

Let’s go back first, fill that out.Let’s go with medium size, going to send us off. Let’s have a look at our Facebook Pixel helper, we can see our lead was sent off with the custom parameters, business size, Medium Business size, and this should then be transferred to our Facebook Pixel. 

We can have a look at the event debugging under the Facebook analytics section here.

enrich-your-facebook-pixel-conversion-data-with-form-field-values

Here we go, event debugging. 

Somehow it doesn’t want to show me the data.

I suspect that I haven’t used this test account for a long time. So maybe it takes a while to populate this. 

But normally, you should see that under your event debugging panel here that there was a new event with that data sent over. 

So you can use that data as well as in the Facebook Pixel. 

Form Field Tracking Use Case #2: Restrict When Your Form Submission Trigger Fires

And obviously, one other use case would be to use that variable in the trigger itself. So you could go into the trigger and say, I also want to have another condition here where the business size needs to contain it needs to be a small business, for example. In which case your tags only would fire if that is actually true. 

restrict-when-your-form-submission-trigger-fires

So really versatile, once you know how to pull data out of your form field, and then transfer that over to Google Tag Manager and use it in your tags and triggers. 

Don’t forget, in the end, if you want to take this live, you need to submit this as a version. I want to press publish. This will publish your version to the website in Google Tag Manager. So your data will be tracked for all users.

FAQ

How do I capture form field data using a form trigger?

To capture form field data using a form trigger, you need to identify the relevant form element and its associated values in the Data Layer. By inspecting the form trigger variables and the Data Layer using browser developer tools, you can find the necessary information and create a dataLayer variable in Google Tag Manager to pull the desired form field value.

How do I push form data to Google Analytics?

Once you have captured the form field value using a dataLayer variable, you can push that data to Google Analytics. By editing the corresponding tag in Google Tag Manager, you can use the dataLayer variable to fill in the missing pieces of the tag configuration, such as category, action, or label. Saving and refreshing the setup will ensure that the form data is sent to Google Analytics.

Can I use form field data for segmentation in Google Analytics?

Absolutely! Form field data can be used for segmentation in Google Analytics. By creating custom segments based on specific form field values, such as business size or other user attributes, you can isolate and analyze specific user groups to understand their behaviors and preferences better.

Summary

So there you have it! That’s exactly how you can set up Form Field Tracking with Google Tag Manager. It’ll pay off down the road when you want to segment your form submissions based on these new dimensions you have available.

If you’re interested in where your traffic comes from before landing on your website, check out our handy guide on how to track the initial traffic source with GTM.

If you have any questions about Form Field Tracking, please leave us a comment below.

While you’re at it share the post with anyone you think would enjoy it!

MeasureMasters

REOPENED!

Master Data & Analytics with MeasureMasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
Subscribe
Notify of
guest
22 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Javi
Javi
4 years ago

Nice article Julian, I think we assume we cannot store personal data in Google Analytics according to GDPR law, but its really useful for segmenting the audience with no personal data. Just one question: how can you deal with a SPA form using AngularJS?

Regards

Carson
Carson
3 years ago

Hello Julian! Firstly, thank you for taking the time to make an amazing and thorough overview! Recently, I did this on my property and after walking through it with a developer, he encouraged me to find a different approach as this method would not be persistent. He said that those element positions may change as the form changes (new fields, removing fields, A/B testing etc). The field I want could be the value for element 22 today, but that may differ in a week or on a user by user basis depending on optimization. In situations where you may be… Read more »

Carson
Carson
3 years ago

Hey Julian,

Thank you for the prompt response, I appreciate it! I will definitely work with the team to come up with a back-end solution!

Do you know if this would be possible in GTM through other avenues? Would it work to grab the element name (as opposed to the value) to store in a variable and then use that variable to pull it’s corresponding value? I’m still pretty fresh to GTM and this is particular project is more involved.

Let me know your thoughts, thanks!

Hanna
Hanna
3 years ago

Hey Julian,
Thanks for this comprehensive guide on a very important topic. I wonder how would I discover what the correct gtm.element for a specific field that I want to record is when my form redirects to a thank you page? This means that I can not see the numbers that gtm assigns to my different elements in the console after the submit happens. I would appreciate any input on how to figure this out, thanks!

Dejan
Dejan
3 years ago

Hello Julian, nice article. Can you give me advice how can I follow values from input fields if there is many inputs? I just want to get values from input fields which is greater than zero.

Also Im getting in “Form element” – array of html, not Object. And can not see in my dataLayer – console gtm.element.

Every advice would be helpful, thanks 🙂

Ronaldo
Ronaldo
3 years ago

Nice post do you have a tutorial for tracking what are the submitted email or name form element for the GA4?

Keith
Keith
9 months ago

there is a free text field, i want to track the feedback , how?

Cédric
Cédric
2 years ago

Thank you Julian for this great guide. I have a form with 3 dropdown lists and I would like to send these 3 to Google analytics. we will have a lot of combination with the 3 lists, because I have 3 values possible for the 1st one, 8 for the second one and 5 for the last one. How can i send these information in the most usefull manner to Google Analytics to analyse them later ?

Joris
Joris
2 years ago

Hey Julian, really nice article. I really appreciate it.

Do you have any similar article but in order to track form field data into GA4 ?

Jorge
Jorge
1 year ago

Julian, How do we do this in the new version of google tag manager? I cannot access the JavaScript object (like you did in the video when you open up developer tools). Any advice would be very helpful!

Sofiia Wycisk
Sofiia Wycisk
1 year ago
Reply to  Jorge

Hi Jorge, the process is very similar to the old one. You should activate the preview mode and fire your event. Then you should go back to the Tag Assistant in the previous tab where your event would be displayed. Select the correct one from the list on the left side and then click Data Layer on the right side. The object you are looking for should be there.

Luca
Luca
1 year ago

hi, i’m trying to follow your video. The problem is that when I try to open the data lyer from the developer console the dataLyer is not shown to me! I write dataLyer and I see only one result in gray .. Can you help me?

Alicia
Alicia
1 year ago

Hi Julian, great article. However, I’m having some issues. We are a charity that uses a form for our donations, we were hoping to use this method to push the value of that donation to Google Analytics, however, when I look at the data layer in the console there are no selectors or ids. When I hover over the inputs it does not highlight the form as it does in your video. Our Donations option is in a drop-down ($5, $10,$15 etc). Any help would be much appreciated.

Sofiia Wycisk
Sofiia Wycisk
1 year ago
Reply to  Alicia

Hi Alicia, are you using the GTM Form Submit trigger for tracking your form? There is also another way to solve this problem by writing a line of code that would get this value. With the drop-down menus, there is a select element in the code. To get the selected value of a drop-down list component, you would have to go through all the option elements that are present in your list and return the one that is selected. Could you please share your website URL? It would be way easier to give an answer by testing it out.

Alicia
Alicia
1 year ago
Reply to  Sofiia Wycisk

Hi Sofiia,

Thank you so much for replying. We use a page destination as the trigger for a form completion (thank you page).

The form for the donation is multiple steps once you get to the third step, there is a drop-down for the donation amount. I can see a selector for those options in the code and they all have a unique value but I’m not sure what to do with that information.

I only do the marketing and am not the developer, but I know the website is built with Umbraco if that helps.

Website URL

Last edited 1 year ago by Alicia
Viktor
Viktor
1 year ago

Hello Julian, huge thanks for your commitment in sharing your knowledge regarding GTM! The company I am at has created a website for companies to upload job ads. What I’d like to do is track the different fields of a job ad post, e.g., company size and industry. I have created a form submission tag which triggers on the elementvisibility of a pop-up message saying “thank you” which is properly displayed in GTM preview mode. However, when typing dataLayer in console, I solely get displayed with the gtm.element of the pop-up message, meaning that I don’t see the inputs to… Read more »

Last edited 1 year ago by Viktor
Keith
Keith
9 months ago

once a user fills in the form and submit, upon successful submission, the form will become a blank state. hence the GTM data Layer variable will return nothing. How can i capture the value that they input right before the submit?

Last edited 9 months ago by Keith
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.