How To Track Form Submits Using Google Tag Manager & GA4: A Step-by-Step Guide

Below we talk about how to set up form submit tracking leveraging Google Tag Manager to ensure proper measurement within Google Analytics 4.

As the adoption of Google Analytics 4 continues and the setup process intensifies among organizations, there is a growing need for guidance on tracking custom events, particularly form submissions and sign-up events. This is especially relevant in industries such as SaaS, where sign-up, free-trial, and subscription models typically require users to submit forms with their contact information. These events are critical components of many demand generation models, so it's crucial to ensure they are being tracked accurately.

Now I know what you are thinking, Google tracks my form submissions as automatic events, why would I need to set up custom form submit event tracking if Google is already doing it for me? Having recently migrated over 375 clients from UA to GA4, going through a 1-1 remediation for each of them, there are a few things that I encountered throughout this process that may be helpful to others who are setting up custom GA4 form submit events using GTM.

Below I will walk you through the automatically tracked form submit as an event, some of the challenges that I encountered, and a step-by-step guide on one of the ways you can set up custom form submit event tracking for measurement in Google Analytics 4.

Understanding Automatically Tracked GA4 Form Events

In GA4, form submissions can be automatically tracked as events, providing valuable information about user interactions or missed opportunities. Leveraging GA4 enhanced enhancement measurement allows you to measure form events with the ability to toggle the automatic collection on & off from your GA4 data stream. Below you can see I have 'Form Interactions' toggled off.

In GA4, two types of form events are automatically tracked: form_start and form_submit. The form_start event is fired when a user begins filling out a form, and the form_submit event is fired when the form is successfully submitted. Both events include the form name, action, and form elements.

It is important to note, that if you want to use these details in reports you will need to set up these variables as dimensions within your Google Analytics 4 property - whether using automatic events or not. This helps improve your ability to segment your data, providing more significant insights into user behaviors & conversion details.

However, in going through this process I noticed inaccuracies when testing in how the auto event was firing, but more importantly how the automatically tracked form_submit event data was being collected & reported on.

Below are a few examples of inaccurate automatic form tracking events that I encountered:

1. form_start fired upon form start, but form_submit fired when submit was hit, without fields filled out, causing a false positive event completion.

2. form_start fired upon form start, but form_submit did NOT fire when redirecting to a /thank-you/ page.

3. form_start fired upon engaging with the form, but form_submit fired when Submit button was hit, without fields being complete & required.

Below is an example: the auto-tracked form_submit event didn't fire once the form was complete.

While these are just examples I have encountered, others have come across similar issues, just different situations. To avoid these issues, it's recommended to toggle off the Form Interactions Auto Event and use GTM to set up custom form submit events, which provide more control over when and how events are tracked. This approach also allows adding additional data to the event, such as user IDs, which can be used to gain a complete picture of user behavior.

By the end of this post, you will have a better understanding of the variables, triggers, tags, event parameters, and custom definitions needed to create a form_submit event and toggle to conversion in Google Analytics 4.

#1 - Setup Custom GA4 Form Submit Variables

While I addressed this in a previous post about setting up phone call event tracking it is important t understand what a 'variable' is. A GTM variable is a named placeholder for values populated when code is executed across your website. This means we will use variables to set up triggers, which execute our defined tags. To properly setup variables for form submit tracking:

1. Navigate to the Variables tab within your GTM workspace. You will be presented with built-in & custom variables.

2. Under built-in variables - Select the 'Configure' button.

3. Ensure all checkboxes under the 'Forms' built-in variables are selected. Once done it will look like this:

Once complete, you can move on to creating the trigger for your form submit call event.

#3 - How To Set Up GA4 Form Submit Triggers in Google Tag Manager

Now that you have established your built-in variables, you can create your form submit trigger. It's important to understand that while custom event triggers are an effective means of tracking form submissions, it's not the sole technique available.

Having experience integrating Hubspot & GA4 using GTM, I can already tell you if you happen to utilize a CRM like Hubspot and integrate their forms on your website, you'll need to incorporate additional variables, and triggers into your setup, which I will elaborate on shortly.

1. Find the event name in the dataLayer:

   1. In your GTM workspace, Open Preview

   2. When your debug window opens, find your phone number or phone icon and click it.

   3. In debug mode, you will see the event name: {event: "lead", . . .} once the event action takes place, this is your event trigger name.

   4. 'lead' is only for my example, in others it could be:

      1. gtm.js

      2. gtm.load

2. Setup the 'Trigger' within your GTM Workspace

1. Next, click 'Triggers'+ 'New' from within your GTM workspace

2. Name your trigger 'Form Submit' or 'Form Submission'

3. Your event name is 'lead' or gtm.js or gtm.load

4. Here I will fire on some events where the page path contains /thank-you/

   1. This can be used if your form goes to a thank you page

   2. You can also use a form_id that comes with form variations

   3. These variable values will be based on your form type

5. Once complete, name your form_submit trigger configuration and save.

I mentioned above that I would briefly share the steps necessary if you have a CRM such as HubSpot and use their forms throughout your site. If you want to track those form engagements you need to add the HubSpot Form Listener as an additional Custom HTML tag in Google Tag Manager.

#3b - Set Up GA4 Form Submits For HubSpot Using GTM

1. You must create a new variable called - Hubspot Form GUID.

2. Create a Custom HTML Tag that is the Form Listener. Once you add the HubSpot Even Listener, it will look as follows:

3. Next, establish your Hubspot form event trigger:

4. Once you complete those steps, you will need to create your Hubspot event tag & test that it fires correctly in GTM & GA4 - similar to what we will be doing in our next step.

#4 - Creating Your GA4 Form Submit Event Tag

With your form_submit trigger ready to fire, we need to ensure that when it fires, the data is correctly passed to GA4 using our form_submit event tag. To set up your form_submit tag:

1. In your GTM workspace, click 'Tags' + 'New'

2. Name your tag. I like to use GA4 - Form Submit.

3. Select - 'Tag Configuration', and a drop-down with tags will appear.

4. Select - 'Google Analytics: GA4 Event'

   1. Configuration Tag is GA4

   2. You can also manually add the GA4 ID here

5. Event Name - form_submit or form_submission

   1. I wanted to keep the naming convention the same as Google recommends

6. Select 'Triggering'- and your trigger is the Form Submit trigger we just setup

7. BONUS: If you have multiple forms you can utilize the event parameter name.

   1. Select the 'Event Parameters' arrow

      1. Parameter name = form_name

      2. Parameter value = add the name of the specific form:

         1. Contact Us, Schedule a Demo, or Book an Appointment

   2. This will allow you to see the form names in GA4 reporting if you ever need to segment by form_name.

8. Save.

#5 - Testing Your GA4 Form Submit Event Configuration

To test & verify your form is tracking, go back into your GTM Workspace and enter preview mode. Once the preview mode loads, all you need to do is test your event by filling out the form you are tracking.

As you can see below, our GA4 Form Submit Tag has fired.

Now, the GA4 Form Submit event is firing correctly, as shown in GTM above!

#6 - Confirm Your GA4 Form Submit Fires Correctly

You're almost there. You need to confirm in GA4 debug mode that your event tag was passing the correct data to GA4. To do this:

1. Navigate to GA4 -> Admin -> DebugView

2. Navigate to GTM and go to 'Preview' mode.

3. When in the preview window, fill out the form you are tracking.

   1. This will fire the tag which should render in GA4 as seen below.

   2. BONUS: notice the form_name parameter you passed from GTM to GA4 is visible as contact_us!

Once you have confirmed your custom event is firing in GA4 you will need to come back in 24 - 36 hours where you will be able to find your form_submit event and toggle it to conversion. This will enable the event to turn from blue to green - as seen above.

BONUS: Because we passed the form_name parameter through to GA4, we need to set up a custom definition in GA4 so we can use it within GA4 reporting. To do this:

1. Navigate to Custom Definitions

2. Create Custom Dimensions

   1. Dimension name = form_name

   2. Event Parameter = form_name

Nice work, now you can use this event dimension in GA4 reports outside of just debug mode.

You Are Now Collecting Form Submit Events in GA4

Congratulations! You have now successfully set up a customer GA4 form submission event! Just like with Click to Call events, with this in place, you no longer need to worry about whether or not your tracking is set up correctly, and if you are tracking your form submissions. You can spend that time focusing on other campaign initiatives.

We hope this was helpful to you. Stay tuned as we look to dive deeper into the GA4 setup process including how to create reports using Exploration and look at how to integrate e-commerce tracking for measurement in GA4.

Frequently Asked Questions:

Question: Why is it important to track form submissions?

Answer: Tracking form submissions can help you understand how well your forms are performing and identify areas for improvement. For example, you can track the number of form submissions, the conversion rate of your forms, and the fields that are causing people to abandon their forms.

Question: What are some common challenges with tracking form submissions?

Answers: One common challenge is ensuring that the form is properly configured to track submits. Another challenge is ensuring that the tracking code is implemented correctly. Additionally, it can be difficult to track form submissions from mobile devices.

Question: Can I track form submissions from different platforms in GA4?

Answer: Yes, GA4 allows you to track form submissions from various platforms like WordPress, Shopify, or custom-built websites by setting up the appropriate tracking codes and triggers.