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.
      
   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.
      
   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 .*
      
   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.
      2. Some Forms, example using Form ID (You would need to enable the built-in {{Form ID}} variable):
         
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):
   
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):
   
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.
      
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.
      
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.
   
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:

• How to Use Timer Listeners in Google Tag Manager [V2]
• Implement User-ID Tracking
• How to “Autotrack” with GTM

——

Post screenshots updated November 30, 2017