How to Track forms with Form Submission Trigger in GTM

Table of Contents

Update time: January 13, 2025

In this section, I will explain how to use Form Submission trigger for tracking in Google Tag Manager.

Meet Form Submission

Form submission trigger is to fire a tag when a form has been sent, can be used to track successful form submissions.

Form Tracking Requirements

To be able to use Form Submission to track the form, the code of the page needs to meet two requirements:

HTML must include a <form> tag, ensuring that both the browser and the trigger can recognize it as a form.
There should be at least one <input> or <button> element with its type attribute set to submit for users to submit the form.

Form tracking cannot be performed if any of the conditions are not met. Let’s see if the code structure of some subscriptions is satisfied？

See, the code structure is satisfied.

When you do form tracking, you first check the code structure to see if these two requirements are met. If not, please let your colleagues in development adjust.

Case Presentation

Let’s look at an example. The subscription function of my blog is a form, here:

The first step is to check the source code of the page to determine whether it meets the Form Tracking Requirements.

Step 1 : Enable Built-In Variables

Google Tag Manager has built-in built-in variables for form tracking. It needs to be enabled before it can be used. If you have already enabled it, please ignore this step.

In GTM , click「Variables」——「Configure」，Check these Built-In Variables of click：

There are six built-in variables:

Form Classes: Accesses the gtm.elementClasses key in the dataLayer, which is set by Form triggers. This will be the string value of the classes attribute on the form.
Form Element: Accesses the gtm.element key in the dataLayer, which is set by Form triggers. This will be a reference to the form’s DOM element.
Form ID: Accesses the gtm.elementId key in the dataLayer, which is set by Form triggers. This will be the string value of the id attribute on the form.
Form Target: Accesses the gtm.elementTarget key in the dataLayer, which is set by Form triggers.
Form Text: Accesses the gtm.elementText key in the dataLayer, which is set by Form triggers.
Form URL: Accesses the gtm.elementUrl key in the dataLayer, which is set by Form triggers.

Step 2 : Set Up the Trigger

In GTM，click「Triggers」——「New」——「Choose a trigger type to begin set-up」——「Form Submission」，name it “Form Submitted-Subscription”, and make the following settings:

Here are some setting options:

Wait for Tags ：Delay form submit until all the tags that depend upon this event have fired or the specified timeout has elapsed, whichever comes first. If unselected, tags will be given a best-effort opportunity to fire, but slow tags may not fire before the form submit causes the next page to load.When checked, the following page will appear:
The default Max wait time is 2000 milliseconds, and there are options to set conditions. The effect of this setting is that it can be selected when this form event depends on other events. If it is a separate form tracking, it is not necessary to check.
Check Validation：Only fire tags if the form will successfully submit. If unselected, fire tags whenever a user tries to submit the form.When checked, the following page will appear:The purpose of this option is to ensure that it is triggered only after successful submission, but in fact, after you check it, it will not trigger whether you succeed or not.

Step 3 : Set Up the Tags

In GTM , click「Tags」——「New」——「Choose a tag type to begin set-up」——「Google Analytics: GA4 Event」，named “ Event-Subscription”， and make the following settings:

Save！

Step 4 : Preview and Publish

Next is the Preview test:

Step 5 : Verify Data in Reports

Generally, after 24 hours, we can see the data in GA4, such as:

If you don't understand, You can leave a comment below.