Google Tag Manager | Web Analytics

Google Tag Manager Tutorial Part 3: Tracking Form Submissions – Update 2020

Image that generically represents data with the text containing the articles title.

In Part 2 of our updated Google Tag Manager Tutorial, we covered the tracking of download links. If you missed it, you may want to start here. In this third part, we will take a closer look at a very popular topic – Form submissions. Most marketers will be interested in tracking this as the goal of many campaigns is to generate leads via contact forms and so these are the conversions that measure a campaign’s success.

Google Analytics does not automatically track this activity but Google Tag Manager (GTM) offers an automated solution for tracking form submissions.

In this tutorial, we assume that you already have a Google Tag Manager account, have created a Container, and have installed it on your website. You should also have a Google Analytics account set up for your website and have linked it to GTM.

Set up form submission tracking by following the steps below.

Step 1: Find a Unique Identifier

We will show you how to set this up using the example of a contact form. The steps below describe the general process and indicate which parts need to be changed for your specific website.

The first step is to find something that will help identify your form. We will do this by looking at the form’s HTML element and deciding what will help uniquely identify this form.

To inspect the form on your website, right-click to access your browser’s developer tools. (In Chrome, for example, right-click on the element you want to inspect and select “Inspect”.) This will show you various attributes unique to the form, for example, its content, CSS class, and other elements.

In our example below, you can see the form has an id contact-form. An id is a suitable identifier that is typically unique to the element and not used anywhere else on the website. If your form does not have a unique id, you could also use the form classes, the page URL of the form action, or the form text to identify this particular form. Using id or classes is the easiest, so we recommend using these if possible.

As a last resort, you could simply use the page URL that the form occurs on to identify it but be careful with this. If you have another form on the page, like a search box, then this form may trigger your contact form event.

Website HTML code highlighting the ID attribute of a Form element

Step 2: Enable The Built-In Form Variable

For your event tag configuration, you will require the built-in variable Form ID (or Form Classes if your form has a unique class). If you have not used this variable before, then you have to select and enable it. To do so, navigate to Variables in the GTM interface, and in the section Built-In Variables click on Configure. Scroll to the various Form-Variables and set a checkmark by Form ID.

The Built-In variable configuration page of Google Tag Manager with Form ID checked

Step 3: Create The Form Submission Trigger

This trigger defines what exactly a contact form submission is. It listens for form submissions on particular pages of your website and checks whether they meet the conditions that you have set specifically for your contact form.

For the trigger setup, follow these steps:

  • Navigate to Triggers in the left-hand sidebar and create a new one.
  • Replace Untitled Trigger with a descriptive name like Form Submission – Contact Form.
  • Choose Trigger Type: Form Submission. This will listen for submitted forms.

For the trigger configuration, you will set:

  • Do not tick the checkbox Wait for Tags. We do not recommend using this option by default with forms, since it can break form submissions. It can be used if it is tested thoroughly.
  • Tick checkbox Check Validation. This checks that the form is actually submitted.
  • Enable when:
    • Page Path contains contact.

This enables the trigger on pages that have contact in the path, for example, http://www.amazeemetrics.com/en/contact. You should change this to enable the trigger on the page or pages of your website that contain the contact form. You can also enable the trigger on all pages if required.

  • Fire on:
    • Select options: Form ID equals contact-form.

This uses the variable you enabled in Step 2 and the unique id you identified in Step 1 to specify exactly which form you want to track as a Contact Form Submission.

  • Change Form ID to whichever identifier you found in Step 1 and the corresponding variable you enabled in Step 2.

Click Save to finalize the trigger setup.

The Google Tag Manager Form Submission Trigger configuration page.

Step 4: Create The Form Submission Event Tag

The last step in tracking form submissions is simply creating a Tag that will record the Event in Google Analytics with the information that you want. The Event will fire when the conditions of the trigger that you set up in the previous step are met. Now, create the tag by putting all the pieces together:

  • Go to > Tags > New to create a new tag
  • Name it GA – Event – Contact Form Submission
  • For your tag configuration, choose Google Analytics: Universal Analytics as your Tag Type.
  • Track Type: Events
  • Category: Enter Form
  • Action: Enter Contact Form Submission. You can rename the event category and action to match whatever event naming convention you use.
  • Label: Enter Successful. This is optional and you can change this or leave the field blank.
  • Non-Interaction Hit: Leave it on the default setting false. This means that this event will change your bounce rate because it will be counted as an interaction on your site.

As the last step, you select the trigger that you created in step 3 in order to fire the tag when a specific condition is met. Here is an overview of the final setup:

The Google Analytics event tag configuration page with the Contact Form event configured.

Step 5: Save a Version, Test, and Publish

You are almost done! The tag you just created will not start working until you publish it but, first, you should thoroughly test that it is working as expected. Having saved your tag, enable the Preview mode (click on Preview in the top right corner), go to your website, and refresh the page.

Make sure to cover these test scenarios for form submission tracking:

  • Click on the submit button without having filled out the form. The tag should not fire in this case.
  • Complete the form with correct details and then click on submit. The tag should fire now.

The Google Analytics Real-Time Event Report should display your event hits if everything is working properly. Read our blog post on Google Tag Manager Testing Problems and how to fix them if you run into any issues.

If all your tests are successful, then you can click the Submit button in GTM. Give this published version a descriptive name like Contact Form Submission event added and click Publish.

Next Tutorial Coming Up

Using the Form Submit Trigger is an easy approach to master contact form tracking. However, depending on the form and its technology, this might not always work. Forms come in many shapes and sizes which is why we thought it is adequate to present you with different tracking techniques so you are flexible.

Stay tuned for our upcoming blog post where we cover a more advanced approach for tracking forms: The Element Visibility Trigger.

We cover a broad range of Google Tag Manager topics, read more.

Do you need help with your Tag Manager Tracking?