How-To Guide: Tracking Form Submissions with Google Tag Manager

How-To Guide: Tracking Form Submissions with Google Tag Manager

Form submissions are one of the most common conversion actions on a website, whether for signing up for a newsletter, registering for an event, or submitting a contact request. These conversions are also often the key goal of email, social media, or other digital marketing campaigns.

Tracking form submissions is an important part of any digital measurement strategy, but as a result of the variety of available tools, plugins, and scripts for implementing forms on a website, there is no one-size-fits-all solution for tracking form submissions.

So what’s the best approach?

If your form has a unique “Thank You” page, then the basic pageview tracking of Google Analytics or another tool may be enough for you to measure form completions. In GA, you can configure a destination goal based on the thank you page URL.

However, if a visitor could possibly return to that thank you page directly (via a bookmark or link from a confirmation email), then a simple destination goal would likely overstate the number of actual submissions.

The situation is further complicated if your form does not submit to a unique URL, (i.e. dynamically updates on the same page) or if it submits to an external site that you are unable to track (e.g. 3rd-party payment processing). In such cases, tracking the actual submit action of the form may be essential.

If you are using Google Tag Manager, there is a built-in capability for identifying form submissions and triggering analytics tags as a result. Note that GTM’s “Form” trigger is limited in the types of forms that it can handle. See the Standard Forms section below.

For more advanced cases, GTM’s data layer will be your friend! As long as you can push a custom event into the data layer, you will be able to track any type of form interaction on your website. This is covered in the Custom Forms section below.

Submission Tracking for Standard Forms

For a standard HTML form (<form>) with a submit button, you can likely use GTM’s built-in Form trigger to track submissions.

In this case, the configuration is straightforward:

  1. Create a Form trigger:
    1. Choose “Form Submission” type.
      Create Form Trigger in GTM - Choose Event
    2. Configure the trigger to “Wait for Tags” and “Check Validation” if desired. Enabling “Wait for Tags” will help ensure that your tracking tags have enough time to fire before the form submission sends the user to the next page. The validation check will prevent your tags from firing on invalid submit events.
      Create Form Trigger in GTM - Configure Trigger
    3. Enable the trigger on the page that contains the form. If you wish to enable the trigger on all pages, you can use {{Page Path}} matches RegEx .*
      Create Form Trigger in GTM - Enable
    4. Set the trigger to fire on All Forms. Alternatively, you could choose Some Forms and enter a condition based on the Form ID or another identifying attribute:
      1. All Forms.Create Form Trigger in GTM - Fire
      2. Some Forms, example using Form ID (You would need to enable the built-in {{Form ID}} variable):
        Create Form Trigger in GTM - Fire on some forms
  2. Create a Google Analytics tag and set it to fire on the form trigger you created in the previous step. Here’s an example of a GA event tag, using the built-in {{Form ID}} variable to identify the form (Form ID would need to be enabled from the Variables screen and your <form> element must have an “id” attribute):
    Create GA event tag in GTM for form submission
  3. Test your configuration with GTM’s Preview mode. You should see a “gtm.formSubmit” event when you submit the form, and your GA tag should fire on this event. (If the form sends you to another page, you may only have a split second to see the formSubmit before the page reloads):
    Form Submit event in GTM Preview mode
  4. Once everything looks as you expect, go ahead and publish your updated GTM container.

Keep in mind that the Form trigger will only work for forms with a standard “submit” browser event. If there is any kind of custom code that intercepts or prevents the standard “submit” from occurring, GTM’s built-in trigger won’t be able to capture the interaction.

Custom form implementations are not uncommon. So, if the standard form implementation isn’t working out, you may need to move on to the method for custom forms below.

Submission Tracking for Custom Forms

If your forms are custom-built or make use of a third-party plugin, it’s likely that the standard GTM form trigger won’t work for you. The most obvious way to spot a non-standard form is when it submits without a page refresh. These dynamic submissions are often achieved using scripts (jQuery and AJAX) that don’t send a standard submit event.

In these cases, we just need to send our own custom event instead. This method will of course involve working with your developers or IT staff to implement the necessary code.

  1. Ask your developer to push a custom event to the data layer upon successful form submission:
    • This can be as simple as a single line of JavaScript code:
      dataLayer.push({'event' : 'formSubmitted', 'formName' : 'Contact Us'});

      • The 'event' parameter is essential to allow GTM to identify this interaction and fire tags as a result. You will use this value to configure a custom event trigger.
      • You can add other custom parameters as necessary to capture any important information from the form. In this example, I have added a 'formName' variable to identify the particular form.
    • If you are use a third-party plugin, there is often an option to execute custom JavaScript code upon form submission.
    • If the form is custom built, the developers can include this line of code in the function that fires upon submission.
  2. Configure a Custom Event trigger:
    1. Create a new trigger.
    2. Choose type “Custom Event”.
    3. Enter your custom event value as the event name, e.g. formSubmitted.
      Create custom event form trigger in GTM
  3. Create new Data Layer Variables for any additional parameters sent with the form submission:
    1. Create a new variable.
    2. Choose type “Data Layer Variable”.
    3. Enter the custom parameter from your dataLayer push as the Data Layer Variable name, e.g. formName.
      Create formName data layer variable
  4. Create a Google Analytics tag and set it to fire on the custom Form Submitted trigger you created in step 2. Enter any of the data layer variables into the tag configuration as appropriate. As an example, here is a GA event tag using the formName variable as the Event Label.
    Create GA event tag with formName variable
  5. Test your tagging through GTM’s preview mode. In this case, you should see your custom event (e.g. “formSubmitted”) appear in the Preview panel when the form is submitted.
  6. Once everything is working as you expect, go ahead and publish.

Submit a form and look for your event in your Real-Time Google Analytics event report.

By the way, this “custom event” method could in fact be used to track any dynamic interaction on your website, not just form submission clicks. The only requirement is for a custom event to be pushed into the data layer when the action occurs. This could be used to track opens of modal windows, expansions of accordion sections, clicks on social sharing, and much more!  Let us know what you’re tracking with this tactic, or if you’d like to build your confidence with some hands-on training, check out our Google Tag Manager course.

——

If you found this post useful, here are other ways you can use GTM to better understand your visitors’ behaviour:

——

Post screenshots updated November 30, 2017

By | 2018-07-26T10:11:27+00:00 November 12th, 2015|30 Comments

30 Comments

  1. Yohan June 8, 2016 at 8:13 am - Reply

    Hi,
    Where can I see it in Google Analytics ?

    • Heather Murphy June 15, 2016 at 9:01 am - Reply

      Hi Yohan,

      Thanks for your comment.
      If you have configured the tags and triggers as we have outlined in the post above, you should be able to see the data coming through as an event in Google Analytics. If you have Google Analytics simultaneously open when testing your website, you will be able to see the event in the Real Time reports. Otherwise, the events can be seen in the Top Events report.

  2. Mateus July 18, 2016 at 6:41 pm - Reply

    Hi, how can I track this as conversions on google adwords?

    Thanks!

    • Heather Murphy July 19, 2016 at 9:34 am - Reply

      Hi Mateus,

      Thanks for your question!

      If you are looking to track form submissions as conversions in AdWords, you will first need to set up the ‘Form’ event as a Goal in Google Analytics. If you have followed the naming convention outlined in the post, you will enter the category as “Forms” and the Action as “Successful Submission” when creating your goal.
      From here, you will be able to import this goal into AdWords under Tools > Conversions.

      Hope this helps.

  3. chantheoun August 3, 2016 at 3:53 am - Reply

    HI, I have one problem my form is validated by jquery validation and when I submit the form whether if fails or passes js validation, google analytic still tracks. I just want it to tracks only successful submission.

    • Marc Soares August 3, 2016 at 5:28 pm - Reply

      Hi,

      Instead of using the form submission trigger, you could use a custom event trigger. See the “Submission Tracking for Custom Forms” section above. You would need to push the “formSubmitted” event to the data layer from your validation script, only when the form passes validation.

      Hope that helps!

  4. Naveen August 22, 2016 at 5:53 am - Reply

    Hi I have created a custom form and submitting it using ajax so after submitting the form it’s redirecting it to the thank you page so I want to track the form submission using GTM. Therefore I have used dataLayer.push({‘event’ : ‘formSubmitted’, ‘formName’ : ‘Contact Us’}); on success submission but unable to get data in analytics any clue where I am doing it wrong.

    • Marc Soares November 2, 2016 at 10:04 am - Reply

      Hi Naveen,

      Apologies for not replying earlier. We had a system issue and missed seeing your comment.

      Were you able to figure out the form submission tracking?

      You would first want to verify that the formSubmitted event is showing up in the data layer upon form submission. You can use GTM’s Preview mode for this. Next, would be to verify that your trigger and tag is firing upon that event.

      If the form is redirecting to a thank you page, it’s possible that your GA tag doesn’t have enough time to fire before the redirect happens. You can use the “Wait for Tags” option in your trigger to help with this.

      Let me know if you are still having any trouble getting this to work.

      Regards,
      Marc

  5. mark lerner December 16, 2016 at 4:56 pm - Reply

    I use a third party hosted form, which I am not able to edit. However, I would like to have the data from that form pushed to our marketing automation platform. Generally, this would mean that I’d have to include the form handler “Action=customurl”, however I can’t edit that part of the form on our third party hosted form (still following?)

    Can I use GTM to submit the data from our third party hosted form to my marketing automation?

    • Max Bondarenko December 19, 2016 at 10:16 am - Reply

      Hello Mark,

      Most 3rd party marketing automation platforms provide a way to send data to them via a pixel of some kind. And it sounds like that is very close to what you are doing when you are modifying action parameter on the form. Since you cannot modify that parameter on the hosted form the alternative would be to potentially create a custom pixel tag with your “customurl” and fire it on form submit via GTM (check your platform documentation as quite a few of them have more details on how to do it best for their platform). Depending on type of information you are sending to your marketing automation platform it might be tricky to extract some information from the form depending on how it is added on the page (as it might require some custom scripting especially if it is iframe).

  6. Sabanayagam December 23, 2016 at 1:18 am - Reply

    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: https://brandstory.in/get-a-quote/

    • Max Bondarenko December 23, 2016 at 8:24 am - Reply

      Hello Saba,

      It seems that you have dynamic form submission on that page and the way it is coded blocks form submission event from being visible to GTM. The best solution to it is to ask developers of the form to address “event bubbling” issue to ensure that event propagates to the top of the DOM. Or better yet – fire a dataLayer.push on successful form submission (see “Submission Tracking for Custom Forms” in the post).

      You can also hack it with some extra JavaScript. For example, since you are using jQuery on your site – you can try loading this script on “Window Loaded” event:
      jQuery(document).ready(function(e){jQuery('form[action*="/get-a-quote/#wpcf7-f666-p513-o1"]').on("submit",function(e){dataLayer.push({"event": "quoteformSubmit"});});});
      then you would trigger your “Form tracking” tag on the quoteformSubmit event.

  7. Pintu Dabhi January 11, 2017 at 3:20 am - Reply

    Hello Mate,

    Really nice and useful article. I have one query regarding google captcha. If on the site have multiple forms in a single page. developer face the issue for validate it. So, is it any other easy way to validate through GTM.

    It’s useful for while track the form submit because we validate input attribute through GTM. But, i have no idea to validate Google Captcha through GTM. So, could you please suggest me, best way to resolve it.

    Thanks…!!!!

    • Max Bondarenko January 13, 2017 at 11:19 am - Reply

      Hello Pintu,

      Just to clarify – are you looking for a way to validate forms via GTM, run google captcha through GTM or track if capthca was vaildated?

  8. htm_bn February 23, 2017 at 5:39 am - Reply

    Hello everyone,
    Can someone please tell me how or have any idea about how to procede in form submission like in this post, but i want to implement it using GTM with Snowplow and not with Google Analytics ?

    Any help please. Thank you so much

    • Marc Soares February 24, 2017 at 5:36 pm - Reply

      Hello,

      It would be possible to send data to another tool using the same process described in this post. The only step that would change is the tag; Instead of creating a Google Analytics tag, you would create a tag that sends data to your tool of choice. The form trigger and variables would be the same.

      I’m not very familiar with Snowplow. However, you can likely use a Custom HTML tag to fire the required script that will send data to Snowplow.

      Hope that helps!

  9. Alkesh Suchdeo April 5, 2017 at 8:36 am - Reply

    Hello,
    I have multiple forms on the page: https://www.ask-ehs.com/Aspx/enquiry.aspx. I want to track the form on the main page through Google Analytics and not the form in the footer.

    Can you please help me out with this? I am absolutely new to this type of form tracking.

    Thanks In Advance!!!

    • Marc Soares April 13, 2017 at 10:27 am - Reply

      Hi Alkesh,

      In order to differentiate the two forms using the standard Form trigger, each would have to have a unique form ID. So, you would need to assign each form element a unique id value in the HTML.

      However, if both forms are contained within the same general form element, I suggest using the “Submission Tracking for Custom Forms” approach described in the second part of this post.

      You would need to setup the form on your site to send a data layer event when it submits, for example: dataLayer.push({‘event’ : ‘formSubmitted’, ‘formName’ : ‘Main Form’}); You would then need to complete the trigger and tag configuration described above.

  10. Mubashir April 24, 2017 at 3:16 pm - Reply

    Hi Marc,

    I read your replies.

    Here is the url of my client.
    https://www.americanseamlessguttersfl.com/

    You can see each page have form.
    There is not thank you page and url.
    So how i can track them through GTM for GA Ads.

    Looking your help.
    Thanks
    Regards
    Mubashir

    • Marc Soares April 25, 2017 at 11:29 am - Reply

      Hi Mubashir,

      You can use the “Submission Tracking for Custom Forms” method described in the second part of the post. You would need your client to add the data layer push script within the submission action of the form. For example: dataLayer.push({‘event’ : ‘formSubmitted’, ‘formName’ : ‘Free Estimate’});

      (The “Submission Tracking for Standard Forms” method may work for identifying a submission, but you may not be able to differentiate validation errors from successful submissions. So, the custom tracking method will be more reliable.)

      It looks like your client’s site is built in WordPress, and it is using a plugin to generate the forms. The form plugin likely has a option to execute a block of code upon submission. This is where you would need to insert the data layer push above.

      Once that is implemented, you can follow the rest of the steps described in the custom forms part of the post. This would be the most reliable way to track in-line form submissions like this.

      Hope that helps!
      Marc

  11. Lili November 26, 2017 at 8:06 pm - Reply

    Screenshots are a bit outdated compared to GTM now.

    • Heather Murphy December 1, 2017 at 8:55 am - Reply

      Hi Lili,

      Thank you for your feedback! We have updated the screenshots in the post to reflect the current Google Tag Manager interface.

  12. Erik December 10, 2017 at 9:36 pm - Reply

    Hi,

    Thank you for a great article. I’ve implemented this as a standard form but each form submission is registered as multiple events in Google Analytics. Any idea what might cause this? Example of form where I’ve implemented this: http://www.workplaceassured.com.au/riskprofiler.aspx

    Thanks,
    Erik

    • Marc Soares December 12, 2017 at 9:41 am - Reply

      Thanks Erik. Glad you found the post helpful.

      Did you configure your form submission trigger to fire on “Some Forms” based on the Form ID or Form URL? You may have other tags running on the page that are loading and submitting their own hidden form elements. If your trigger is matching all form submissions, that may explain why you are seeing multiple events.

      I suggest making your form trigger more specific by using either the Form ID or Form URL. The Form ID will capture the value of the “id” attribute of the form. The Form URL will capture the “action” attribute.

      Let me know if that works for you!

      Marc

  13. Peter February 27, 2018 at 10:03 pm - Reply

    Marc,
    Great article!
    I understand how to track conversions and goals but do you have any suggestions on how to tag and segment leads as having originated from an Adwords click vs. a general organic listing or referral? In other words, when the form is submitted, is there a way to make the notification email include some indication that the user found the site through an Adwords click? I’ve always wrested with this. In some cases I’ve created isolated landing pages and used them just for Adwords, but it would be nice to not have to isolate your guests from the rest of your website. I think the days of single landing pages are dying. People prefer to click around and visit multiple pages on a site.I think it helps them feel in control.

    • Marc Soares March 1, 2018 at 3:22 pm - Reply

      Hi Peter,

      Thanks for your comment. If you track your form submissions in Google Analytics, you will be able to segment on traffic source using the Campaign, Source, Medium, or Channel dimensions. Unless you have a very high volume of submissions, you can lookup each individual submission in GA based on the date and time. If you need something more unique, you could retrieve the GA Client ID on the page and include it in the form submission.

      In order to include the traffic source in the email generated by form, your form submission script would need to identify the source based on the landing page URL and referrer. You would need to replicate the traffic source processing that GA does (See this article in the Help Centre: https://support.google.com/analytics/answer/6205762?hl=en).

      An alternative to source-specific landing pages is to use a tool like Google Optimize to dynamically change the page based on the traffic source. In that case, you could have one page, but still have specific content or forms for each traffic source.

      Hope that helps!
      Marc

  14. Bob May 23, 2018 at 2:37 pm - Reply

    Hi Marc,

    Thanks for this helpful article. I am going to be following your steps to start tracking our forms, but I have a question about tracking forms specifically from AdWords. I would like to be able to identify EXACTLY which forms came from Adwords, but I have not been able to find anything that will give me that level of detail.

    In GA, we are able to see the orders that come through our BigCommerce site include the order number and amount. And we’d like to see something similar with our contact forms.

    Wondering if you have any thoughts as to how we might be able to make that happen?

    Currently, our forms do not have a unique identifier (such as form submission “#23”), but I think setting that up and being able to pass that onto our “thank you” page might be the first step.

    I’ve also thought about a non-GA solution and that is to pass on the browser header information of “referrer” (e.g. google.com) and “server” (e.g. “adclick_server”) with each submission, but am looking into whether our dev can pass on that info.

    If you have any thoughts, it would be much appreciated.

    Thanks!

    • Marc Soares May 24, 2018 at 2:06 pm - Reply

      Hi Bob,

      If you can generate a unique ID for each form submission, you can pass this in as a hidden field with your form and also send it as a custom dimension to GA. This then provides you with a key to match your form submissions with sessions in GA.

      Alternatively, you could use the Google Analytics client ID as your unique identifier. There’s an available method for retrieving the client ID from the GA tracker. See the documentation here: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#getting_the_client_id_from_the_cookie. With this method, you should also store the Client ID in a custom dimension in GA.

      Let me know if that answers your question.

      Marc

  15. JB June 12, 2018 at 7:33 pm - Reply

    Hi I have followed this and selected all forms but my tag is still not firing.

    Can you explain why this may not be happening?

    • Marc Soares June 13, 2018 at 10:08 am - Reply

      Hello,

      Are you following the standard implementation or the custom implementation? If the standard implementation with the Form Submission trigger isn’t working, then I suggest using the custom implementation.

      In either case, if you are seeing the gtm.formSubmit or formSubmitted event appearing in Preview mode but your tag is not firing, I suggest checking your trigger configuration.

      Marc

Leave A Comment