Track Forms with Google Tag Manager Form Submission Trigger

Updated: March 12th, 2023

This blog post is a part of a much larger and comprehensive guide, Google Tag Manager Form Tracking and it contains Google Analytics 4 examples.

 

GA4 event tag

You are probably already familiar with the main Google Tag Manager concept: every interaction you want to track needs a tag and a trigger. If you want to track all form submissions with Google Analytics 4, you’ll need to create a Google Analytics Tag and a Trigger (rule) when a tag must fire.

Creating a tag is the easy part of this process. Let’s make one – you’ll need it in the next chapter of this blog post.

In this article, I presume that you have already installed Google Analytics 4 and already have the GA4 configuration tag. If not, read this blog post first.

After you have a GA4 config tag in your GTM container, it’s time to create a GA4 event tag that will be used in all of the examples of this article.

1. Go to Tags
2. Press New button
3. In Tag Configuration choose Google Analytics: GA4 Event
4. In the Configuration Tag field, select your current GA4 configuration tag. The event tag that we are creating will reuse some of the settings from the configuration tag (e.g. Measurement ID)
5. In the Event Name field, I enter generate_lead
6. Leave the Triggering part empty (for now) and click Save. We’ll get back to it later.

Let me quickly explain some of the choices. The reason why I used generate_lead as an event name is that it is in the list of GA4 Recommended events. But if you want, you can name it something else.

 

Google Tag Manager Form Submission Trigger

Open a list of Variables in your Google Tag Manager account (by clicking the Variables in the main menu). By default, form variables are disabled, therefore, you need to enable them. Under built-in variables, click Configure, and in the right sidebar enable all Form variables (all changes are automatically saved).

Then open a list of all your triggers (by clicking Triggers in the left sidebar of the GTM interface). Create a new trigger with the following settings:

A little about the Check validation checkbox. Once this is checked, Google Tag Manager will not activate the Trigger if the default action of the form (submit and redirect) is prevented.

If left unchecked, the Trigger will go off whenever a submit event is registered (even when a form is submitted with errors (e.g. several required fields are left blank)).

When that checkbox is enabled, an additional field “Enable this trigger when…” appears. In my case, I want this trigger to be active on all pages, that’s why I entered Page Path contains /. Why? Because Page Path will always contain at least one slash on any page.

Now, let’s use GTM’s Preview and Debug mode to find out whether the default form auto-event listener works for us. At the top-right corner of your Google Tag Manager account, click Preview.

Then a new browser tab will open asking you to enter the URL of the page where the form is located. Enter it and click Start.

Then a new tab (or window) will open with your website. At the bottom of the screen, you should see a badge similar to this one (that says connected):

If the preview mode’s tab or the badge has not connected, read this guide on how to fix Google Tag Manager Preview and Debug mode.

After Preview and Debug mode is enabled, navigate to the site where the form is located. Fill in the form (try not to leave any fields blank):

1. Hit the submit button. Did a Form Submit event appear in the Preview and Debug console? If not, then GTM’s Form auto-event listener will not work with this form and you should try other methods here.
   
2. If the Form Submit event did appear in Preview and Debug console, then you should do another test – try leaving at least one required form field empty and submit the form again. This way you’ll imitate an error in your form:
   1. If Form Submit event fired once again, then you should check other form tracking options mentioned in this blog post.
   2. If Form Submit event did not fire – that’s great! It means that GTM will track only those form submissions which were successfully completed (and this is exactly what you need).

If you are reading this paragraph, I’ll presume that the Form Submission trigger works as expected and fires the event in the preview mode ONLY when a form is submitted successfully.

Let’s create a trigger specifically for that form. Remember the Form Submit event that was previously mentioned? Click on it (in Preview and Debug mode), then click Variables.

Then scroll down and start looking for any Form variable that is unique for that form. Usually, it will be Form ID variable, on other occasions – Form Classes (but Form ID is a better option). As you can see in the image below, I have submitted a form (of which Form ID variable is wpdevart-forms-7).

This is a good identifier that is not used on any other elements in the website, so I’ll use it for my trigger:

1. Go to Triggers and open that Form Submission trigger that you have previously created
2. Instead of “All Forms”, select “Some Forms” and enter the condition to target only that particular form. In my case, that is Form ID equals wpdevarp-forms-7.
   1. If you don’t see Form ID variable – Enable it in the list of Built-in variables of Google Tag Manager.
   2. Form ID may (and probably will) be different in your situation (compared to my example).
      

Save the trigger.

If you have more than one form that visitors/users can submit, then it might make sense to include an additional parameter in your GA4 event tag (that will help you distinguish which form was submitted).

In GTM, go to Tags and edit that GA4 event tag that you have created.

There is no strict requirement of how that parameter should be named, so I’ll name it form_id. And its value will be the value of the {{Form ID}} variable.

Save the tag.

 

Let’s Test + Register Custom Dimension in GA4

1. Assign this new trigger to the Google Analytics 4 Event Tag that you created at the beginning of this blog post.
2. Refresh or enable a Preview and Debug mode (by clicking the Preview button in the GTM interface once again)
3. Then fill in the form and submit it. If Google Analytics Tag fired, that’s good news! Also (if possible), try submitting a different form on your website: in case of a successful submission, a GA tag should not fire.
4. You should also check the incoming events in Google Analytics 4 Debug View.
5. If you plan to use the form_id (or some other custom parameter in GA4 reports), you have to register them as custom dimensions. Read this guide to learn more.

 

If the Form Submission trigger Doesn’t Work for You

If this trigger does not work for you, that is no surprise. Even though this feature is built-in in GTM, most of the forms on the web are not supported by it.

That’s why I have created a very detailed Google Tag Manager form tracking guide that includes a bunch of different form tracking techniques. If form tracking with Google Tag Manager form auto-event listener didn’t work for you, make sure you check other options mentioned here.

If you have questions, feel free to contact me via social media accounts or write a comment in this blog post.