Capture Submitted Form Values with Google Tag Manager


Use GTM to track form values

Have you ever wished you could see the submitted values of a form in Google Analytics? Often, forms on our websites are used to capture valuable information about an individual. Once submitted, that information may go to another system or website and be hard to tie back to the online visitor who submitted the form.

Let’s fix that! By selectively capturing and storing this information in Google Analytics, you can better analyze your website traffic, create segments, or even define remarketing audiences. Capturing this information is actually pretty easy when we use Google Tag Manager (GTM) to pull out values from different fields of a form and record them in Google Analytics (GA).

In this blog, I’ll discuss two different methods for tracking form field values: Using the dataLayer or writing some JavaScript code.

Basic Overview

For the Google Tag Manager experts out there, here’s the short version of the instructions that follow:

  1. Create a Form Submit Trigger targeting the right form
  2. Form field values are pushed to dataLayer when form is submitted
  3. Use dataLayer variables or custom JavaScript variable to use values within GTM
  4. Use variables in Tags, Triggers, and other Variables

Using dataLayer to Track Values in Forms

With Google Tag Manager on your site, every user interaction can be measured. Essentially, all these interactions can be added one by one in the dataLayer object, which gives you access to information about the page as well as the user interactions. You may not use all this information, but it will stay there until the page refreshes or the user navigates away.

This is also true in the case of form tracking. When a user submits a form, the form submit event as well as the form field values will get registered into the dataLayer. GTM will then act upon that form submit event by using a Form Submit Trigger, and it will figure out what to do with the information that just got added into the dataLayer.

For instance, GTM might fire a corresponding GA Event Tag saying a user submitted a “lead generation form”, or it might ignore the form submit event if there is nothing set to be done in the Container. Regardless, the form field values will show up in the dataLayer upon submit of the form. To capture the form values using the dataLayer, follow the steps below in Google Tag Manager.

First make sure you meet these requirements:

Form Trigger

You must have at least one Form Submit Trigger already set up in GTM. If you haven’t created one yet, read more below to learn how to define a trigger.

I’m A Real Form!

You must be using a standard html form that follows the html guidelines. For example, if the submit button is not actually a standard html submit button, this solution is not for you.

…And I Live On Your Site!

Your form must live on your site. If you’re form is in an Iframe, you need to be able to add GTM to the page where the form lives.


Let’s go through an example using a simple standard HTML form.


Example Form for Tracking in Google Tag Manager

See It In Action!

To start, let’s open the page with the form on it. You can use our form on this page as a test!

To get started, fill out the form so that we have some values. When you go to submit it, we want to immediately stop the page from going away. The easiest way to do this, on most sites, is to CTRL + Click on the Submit button. This will submit the form and open the confirmation page in a new tab. Navigate back to the original tab and you’ll see all of the events that occurred on that page.

Next, we want to see that the form was submitted and all of the information that was added to the data layer. For this, we’ll use the JavaScript Console within the Web Developer Tools in our browser.

You’ll find the Console as part of the Web Developer Tools, listed in the Chrome menu under More Tools. On a Windows computer, you can also use the shortcuts: F12, or CTRL + SHIFT + J. For a Mac, use CMD + OPT + J.

In the Console, type dataLayer and press enter to see what the dataLayer contains. Google Tag Manager uses the dataLayer to keep track of all of the interactions that have happened on the page. Each entry in the datalayer is a new “event” or action that occurred on the page, or a new place when some information was added to the dataLayer.

Since we just submitted the form, the very last Object in the dataLayer array should include the form submit information. Expand the last element to make sure it contains what we expected. It should start with event: “gtm.formSubmit”

If you don’t see a form submit event, make sure the Trigger is set up correctly. You can use the Google Tag Manager Extension in Preview Mode, to verify if the trigger is getting registered. In the extension, on the left hand side, look for the form submit event. If it isn’t there, you might have to fix your “form submit” Trigger.

Form Submit in GTM DataLayer

Looking through different properties of this entry in the dataLayer, we can start to identify the fields that we are interested in tracking; for example, we can capture the value of Gender in field 5 and Country in field.

Pull Out What We Need

If you can see it on the dataLayer, then we can get it in Google Tag Manager! Inside of GTM, and create a new Data Layer Variable. Let’s pull out the gender from the contact form. Here, we would name it something like DLV contact form gender.

With dataLayer variables, there’s an easy way to access nested values. In the console, you can drill down by clickING on the arrows. Every time you drilled down using an arrow, you can represent that drill down with a period in the variable.

In our case, the ‘gender’ value was nested under the gtm.element, then under the 5 field. To get the value, we specify the value property. So, we put all this together and insert gtm.element.5.value in the Data Layer Variable Name box. This variable will return the value of the radio button selected for “gender”.

access form field value with a Data Layer Variable in GTM

Also, to capture the value in the “country” field, create a new Data Layer Variable called DLV contact form country and put in gtm.element.9.value. This variable will return the “country” selected from the dropdown menu.

Data Layer Variables to pull out form field values

Finally, to test if you are actually capturing expected values, put the container in Preview/Debug Mode, refresh the form page, and submit the form once again — remember to stop the page immediately before it goes away or use CTRL + Click to open the form in a new tab.

You should be able to verify the correct values in the Tag Manager preview/debug panel, under the Variables tab. Variables are re-evaluated on every action, so you need to click on the gtm.formSubmit event along the left side of the panel in order to see the values at that specific moment.

Now that you have successfully created a Data Layer Variable, you can use it freely anywhere it seems fit; for example, you can use {{DLV contact form country}} in a Custom Dimension, use it as an Event Label, or even use it on a Trigger to fire yet another Tag based on what the user put in the form. The opportunities are endless!

Writing JavaScript to Track Values in Forms

Let’s track the same fields from the previous example using JavaScript. We are going to create a Custom JavaScript Variable in Google Tag Manager to pull out the value of a field on form submit. In the Custom JS Variable we will use a CSS Selector to find the element on page.

In your form, right click on the fields you are interested in tracking and Inspect those elements. The goal here is find out an element id, class, or something else that helps us come up with a CSS Selector.

In this example, we can use the :checked attribute of the radio buttons to find out which one is checked.

Since the Country dropdown menu has an id, we can use getElementById to select it.

In GTM, create a Custom JavaScript Variable called JS contact form country, and add the following code in it. Basically, we are pulling out the value selected for the country, or if nothing has been selected on form submit, it returns “Country not selected”.

Ideally, you would want to have a form validation system in place to make sure users have filled out the required fields before being able to submit the form.

GTM JavaScript Variable to pull out values from form fields

To track Gender values, create another Custom JS Variable called JS contact form gender and use the following code

Again, you can use these new Variables anywhere in GTM by using {{JS contact form country}} or {{JS contact form gender}}.

Disclaimer about tracking Personally Identifiable Information (PII): Do not track PII. Never send information such as first or last name, address, email, etc. to Google Analytics. You can examine it with Google Tag Manager, but it is against the Google Analytics Terms of Service to send PII to Google servers.


In this blog, we introduced two methods for capturing form field values with Google Tag Manager. You should now be able to access form values using either Data Layer Variables or Custom JavaScript Variables, and use them in your Container, in Tags, Triggers, or even in some other Variables. In addition, check out these other resources regarding Form Tracking and what we can do after we set up tracking:

Zee is a former LunaMetrician and contributor to our blog.

  • Joe Savitch

    How would one pass the value from a user input? It seems very easy/straight forward to grab info using an id or css selector but what about the value from a field? Just as easy or a little trickier?

    • Yeah it’s very easy. You can use an appropriate css selector and follow my example on Writing JavaScript to Track Values in Forms.

  • Joe Savitch

    function () {
    var growing = document.getElementById(‘Growing’).value;
    if (growing)
    return growing;
    return “Growing Not Selected”;

    So for the form field What is your intended use? the id=”Growing” so that function will return what the user input is? It doesn’t matter that it isn’t a pre populated choice?

    • yes the function will return whatever the user has put in the text field. If the user left it blank, it will return “Growing Not Selected” which probably needs to be changed to something more meaningful.

  • The ultimate guide for implementing Google Tag Manger to form fields and to collect data. It makes easy to analyse and trigger user engagement. I loved your article most. Thank you very much for sharing this information.

    • You’re welcome! I’m glad you found it useful.

  • Seth Kent

    Before going to track data i want to know how to track my form submission for my page.
    On Trigger section i choose “Form tracking” > next i left the remaining In Some triggers> i gave form id >contains >id then i save and check . But i am not getting any event tracking in my preview mode

    How to track my form for this page:

    • That means the form tracking trigger (or tag) is not set up correctly. Refer to this blog post to get more ideas.

  • Benjamin Bollaert

    Hello, I’m a newbee in GTM and my use case is to be able to get the data from the form and then pass some of them to a personalization tools to change content variation (CTA,…) on the homepage. Eg : the age will make the visitor to fall into a Senior, GenY, GenX segment…
    I can do it directly by getting the data an trigger a Custom HTML that will do the Javascript calls. That works fine.

    But because of my very little experience, I think I understand I should apply some kind of decoupling like website dataLayer Third Party system. Something like :
    1/ pass the data into the data layer (I’m fine with this)
    2/ perform afterwards an action to call the JS : through a Trigger? I don’t know…Through an asynchronous listener? Maybe…
    What would be your recommendation (best practice / best approach) for this use case?

    Thanks a lot for this post & your blog, I made a giant leap today !

    • Hi,

      It seems like you are trying to pass some values from a form to a 3rd party tool. You can do this by pushing the info into the datalayer via a custom event after the form was successfully submitted, then grabbing the values out of the dataLayer in GTM using a datalayer variable. Finally you will fire a custom HTML tag, using the custom event you just defined for the form submit, and pass the {{datalayer variable}} above to the 3rd party tool.

      form submit >> custom event getting pushed into datalayer with additional values from the form >> fire a custom html tag to pass the given values to the 3rd party tool

      Hope that answered your question.

  • Thank you so much for this great article, it helps me so much !
    I have just one question about the usage of the Datalayer to Track Values in Forms.
    I followed your advices and it’s working very well for tracking most fields, but on the checkboxs, it always return the value “1”, even if the box is checked or not.
    Do you have an idea on how to track this data ?
    Keep on this amazing job : )
    Thank you again !

    • Thanks so much! Glad you found it helpful.

  • Audrey Chou

    Thank you for the article, Zee! You helped me set up tracking for a drop down! Could you include checkbox tracking too? I read Simo’s blog post but it was too hard to understand. I don’t have much technical knowledge :/ Thank you!


  • Health Geek

    Is there any method to combine two variables for a single event? I mean to say for one event i get two values??
    Please help me on this.

    • Hi Health Geek,

      You can combine values into one of the fields – like Event Label or something like that. For instance, if you’re trying to track a checkbox item, where multiple items can be selected, you might combine them like so: “Option 1|Option 3”. If you want them to show as separate rows inside of Google Analytics, you’ll have to send two separate events.

      Hope this helps!

  • Oz Aviles

    Hi Zee,
    I am having problems with “tracking form in google tag manager” to save my custom js in gtm. this is the code:

    function () {
    var findOut = document.getElementById(‘How did you find out about us?’).value;
    if (findOut)
    return Event Type;
    return “”;

    and the question in my form is” How did you find out about us? can you tell me how to fix it


    Thanks for this post, Zee. What would be the best way to track this Checkbox? I’d like to store label text as a variable.

  • Very helpful article! I am having issues with viewing the collected data in google analytics though. Where is this information being stored? All I could find was the form event, but not the data.

  • Giovani Promesse


    I need to check that completing a form is successful.

    So I started implementing the tag to check the form and its trigger that I set in this way (I read 3 guides and all three said to do so) -> bit.Ly/2sSppQk

    But with this set, nothing starts, because, going to see on the site, I see this error bit.Ly/2sI5MMq which does not appear if I turn off “Check Validation”.

    So, what do I wrong? Is there a mistake in the site code? Do I have to give up the tag on my site?

    Thank you!!!

  • Roberto Perez

    Hello, what happen when my dataLayer doesn’t Load me all the input in the website, only a couple only when I click some element in the page it generates some time other space in the array of the dataLayer. ?

    The another thing I don’t know if I calling the variables right this is the paga url when I suppose to track then this is the variable I created to track this gtm.submit gtm.element.5.gtm.elementURL how I explain in the first question.

    If you have other advice, please let me know.

    Regards, Roberto

    • Hi Roberto,

      Not sure exactly where to jump in and help here. Ideally, all of the input fields are within the Form that is being submitted. If there are additional items on the page that are not in the form, you can use a Custom JavaScript variable to find and retrieve those values.

      Hope this helps!

  • Tan Doan

    I also want to track Name and Age too. Can I do the same way to track it? If not, What should I do to track these information in GTM and Google Analytics?

    Thank you so much,

    • Hi Tan,

      Unfortunately, GA does not allow you store things that are ‘personally identifiable’ – like Name, Email, etc. Your best bet would be to pass in a unique identified, like a random user ID, and then later join the information together in another tool (like Excel.)

      Age is fine to capture and store inside of GA!


  • Can this be done using hubspot javascript forms?

Contact Us.

Follow Us



We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203


4115 N. Ravenswood
Suite 101
Chicago, IL 60613


2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187