How to Track Form Submissions in Google Analytics 4

Forms are a vital tool for capturing leads and driving conversions on websites, with an estimated 74% of sites utilizing them in some capacity. Whether it’s through email marketing forms or lead-generation forms on landing pages, tracking form submissions is crucial for optimizing user engagement and ultimately boosting conversions. By monitoring form interactions in Google Analytics 4, you can gain valuable insights into user behavior and make data-driven decisions to improve your website’s performance. In this article, we will walk you through the process of tracking form submission events in Google Analytics 4, so you can effectively measure and optimize your conversion goals. Let’s dive in and learn how to track form submissions in Google Analytics 4.

Which Form Tracking Method Should You Select? 

To determine the best tracking method for your specific needs, it’s essential to consider various factors related to your website and the types of forms you’re using. Factors such as the form type, tracking requirements, and technical expertise all play a role in determining the most suitable tracking method.

For instance, different methods may be better suited for tracking specific types of forms, such as WP Contact Form 7 or Hubspot forms, which may have dedicated tracking options. Additionally, your tracking needs will dictate the level of detail and data you require, influencing your choice of tracking method.

Moreover, your technical proficiency should also be taken into account when selecting a tracking method. More advanced methods, like utilizing AJAX JavaScript Listener, may require a higher level of technical expertise, whereas simpler methods may be more accessible to those with limited technical knowledge.

To help visualize the decision-making process for choosing a tracking method, a flow chart is provided below. This flow chart outlines the key factors to consider and can guide you towards selecting the most appropriate method for tracking form submissions in Google Analytics 4. 

Method #1: Tracking the form submission in Google Analytics 4 using Enhanced Measurement

Enhanced Measurement in Google Analytics 4 offers a convenient way to automatically track form submissions without the need for manual event tracking implementation. This feature simplifies the process of capturing form submission data and provides valuable information about user interactions on your website.

That means that you need to take only a few steps to set up Google Analytics 4 to track form submissions (no code changes are required). To enable form submissions tracking in Google Analytics 4 using Enhanced Measurement, you can follow the steps outlined below. 

Once the “form interactions” feature is enabled, the next question that typically arises is where to locate the form submission events and what they entail.Google Analytics 4 automatically captures two events, form_start and form_submit, as part of its Enhanced Measurement Events. The form_start event triggers when a new user interacts with the form by clicking on a form field, while the form_submit event is generated upon successful form submission. To locate these events, simply navigate to the “Reports” -> “Engagement” -> “Events” report.

Google Analytics 4 form events come with various parameters that offer insights into the specific form being referenced. These parameters include form_id, form_name, form_destination, and form_submit_text, offering detailed information about form interactions, the table below explains them in detail.

Note: You can only use the aforementioned parameters in GA4 Explore reports if you register them as custom dimensions in Google Analytics 4. There is no possibility to see them in GA4 Standard Reports. Additionally, there is a limit of custom dimensions you can create in the GA4 property. Therefore, be mindful and select only those that you really need to use.

By following the outlined steps, activating GA4 form tracking can be completed in just 15 minutes, enabling you to promptly access and analyze the data. However, if you have a WordPress website with a contact form 7, additional considerations may need to be taken into account, which we will delve into in the next section.

Method #2: Tracking WP Contact Form 7 Submissions in Google Analytics 4

If you have a WordPress website and are using Contact Form 7, I recommend trying the Enhanced Measurement method outlined above. It has been effective for my WordPress site and should work for yours as well. However, if you have already attempted Enhanced Measurement in GA4 and found that it is not accurately tracking your form submissions, I suggest using the GTM4WP plugin as an alternative solution.

Follow the steps below to implement this plugin for form submission tracking:

In WordPress:

Install and activate the GTM4WP plugin. Go to “Settings” -> “Google Tag Manager” Page. Enter your Google Tag Manager ID. Click on the “Integrations” tab and enable “Contact Form.”

In Google Tag Manager:

Open Google Tag Manager and create a new trigger with the type “Custom Event.” You can set the event name as “gtm4wp.contactForm7Submitted” and the trigger name as “cf7 form submission.” as I have done

Create a new tag with the type “Google Analytics: GA4 Event.” Configure the tag with your GA4 Configuration Tag, you can set the event name as “form_submitted,” and name it as “GA4 – Event – CF7 Form Submission.” Assign the trigger “cf7 form submission” to the tag.

After that, you should publish the GTM container and enjoy measuring CF7 Form on WordPress in Google Analytics 4.

Method #3: Tracking Form Submissions With Google Tag Manager

Tracking form submissions with Google Tag Manager offers a flexible way to collect data on user interactions with forms on your website. Below are different methods you can employ to effectively track form submissions using Google Tag Manager:

Using “Form Submit” Trigger 

This method effectively tracks user form submissions on your website by setting up a trigger to capture these events in real-time. By creating this trigger in Google Tag Manager, you can gather and analyze valuable data on form submissions in Google Analytics. Before setting up this trigger, make sure to enable all form variables in your GTM settings. Now to set up the trigger, follow these steps:

• Navigate to the triggers section in your GTM account and click on “New” to create a new trigger configuration.
• Select “Form Submission” under the User Engagement section, which is GTM’s default form listener.
• Enable the “Check Validation” box and specify an action that indicates a successful form submission, such as ensuring the page URL contains the website name.
• Choose the “All forms” option for when the trigger fires, and give the trigger a name before saving it.

Create a GA4 Event tag, enter your GA4 Measurement ID and for the event name use “form submitted”. Now assign the trigger created to this event tag. To test and validate if the form submission event is being tracked, you can utilize the GTM preview mode. If the Form submitted event appears in the preview mode when you test it by submitting a form, then this method is successful for you. If not, consider exploring other methods covered in the following sections.

Using “Thank you” Page Trigger 

This method is particularly useful for websites that redirect users to a thank you page after a form submission. Implementing a “Thank you” page trigger involves setting up a trigger that activates when users land on a designated “thank you” page post-form submission. This trigger signifies successful form completions and allows you to track conversion events associated with form submissions.

To set up this trigger in Google Tag Manager:

• Go to Triggers in Google Tag Manager.
• Click on the “New” button.
• Choose the trigger type as “Pageview” and select “Some page views.”

If that is the only page in your website that contains thank you, you can set one of the following rules for this trigger: Page URL contains thankyou. If not enure to use the whole URL

Next, create an event tag as described in the method above, add this trigger to it. Save and test the event to ensure it is working properly. By configuring this trigger, you can effectively track and measure successful form submissions on your website’s thank you page.

Using Element Visibility Trigger 

Using the Element Visibility Trigger is a method that allows you to monitor form submissions based on specific elements on your website. This trigger tracks when form elements become visible or interacted with by users, providing valuable insights into user engagement with forms.

To use this method you will need to use a selection method which is either a CSS selector or ID. To obtain the CSS selector for the specific element on your website that shows a successful form submission, you can follow these steps to do so. To obtain the CSS selector for a specific element on your website, follow these steps: Right-click on the element you want to track, select “Inspect” to open the browser’s Developer Tools, locate the highlighted code showing the element’s structure, right-click on the code, and choose “Copy selector” to copy the CSS selector. 

To implement the Element Visibility Trigger for tracking form submissions, follow these steps:

• In Google Tag Manager, navigate to Triggers and click on “New” to create a new trigger.
• Choose the trigger type as “Element Visibility.”
• Configure the trigger settings by selecting the CSS Selector as the Selection Method and then Pasting the copied CSS selector specifying the element(s) on your website that represent form submissions. This could be the form itself or specific form fields. Set the trigger conditions based on when the form elements become visible or interacted with by users. Save and name the trigger for future reference.

Ensure you create a GA4 event tag as described in the “Form Submit” Trigger section, then add this trigger to it. Save and test the event to ensure the form submission is being tracked.

Using AJAX JavaScript Listener 

An AJAX JavaScript listener is a powerful method used to track dynamic interactions on a website without the need for a full page reload. AJAX (Asynchronous JavaScript and XML) technology enables web pages to update content seamlessly without refreshing the entire page. In the context of form submissions, an AJAX JavaScript listener can be configured to detect when a user submits a form using AJAX technology.

If your form utilizes AJAX technology, it most likely refreshes itself to display a success message without a full page reload, the AJAX JavaScript listener can capture this form submission event in real-time. This capability allows you to monitor user interactions with the form without disrupting the user experience with a page refresh.

To use this method create a custom HTML tag and copy the code below into it, set it to trigger on all pages. This code is a free AJAX listener provided by the Lunametrics team.

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {


 'use strict';
 var $;
 var n = 0;
 init();


 function init(n) {


 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();


 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);


 }


 }


 function bindToAjax() {


 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {


 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;


 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params and headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');


 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the response
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });


 });


 }


 function objMap(data, delim, spl, decode) {


 var obj = {};


 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {


 return {};


 }


 var arr = data.split(delim);
 var i;


 if (arr) {


 for (i = 0; i < arr.length; i++) {


 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);


 var key = trim_(pair[0]);
 var value = trim_(pair[1]);


 if (key && value) {


 obj[key] = value;
 }
 }
 }
 return obj;
 }
 // Basic .trim() polyfill
 function trim_(str) {
 if (str) {
 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
 }
 }
 })();
 /*
* v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

Now test this Custom HTML tag using the debug mode to ensure it is tracking the form submission event.

Using Window.DataLayer 

Leveraging the Window.DataLayer method involves pushing form submission data into the data layer for Google Tag Manager to capture and process, enabling seamless tracking of user interactions with forms. To implement this tracking method, collaborate with a developer to incorporate a custom dataLayer.push() function to be triggered upon successful form submission; the code for this will seem like the code snippet below:

window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
   'event': 'formSubmission',
   'formType': 'Newsletter Subscription',
 });

After the developer has implemented dataLayer.push for all forms, test the functionality by utilizing the Preview and Debug mode in Google Tag Manager. Submit the form to trigger the event and verify the event’s appearance in the Preview mode to ensure proper functionality. If you are unfamiliar with window.dataLayer or seek a more in-depth understanding of the topic, refer to our dedicated article for comprehensive information and guidance.

Method #4: Tracking Hubspot Form Submissions in GA4

HubSpot is a widely used CRM platform, so knowing how to track HubSpot form submissions using Google Analytics 4 (GA4) is very essential. To do this, you’ll need to use Google Tag Manager (GTM). Follow these steps to track HubSpot form submissions in GA4: 

1. Make sure that Google Tag Manager is set up correctly on your website.
2. Go to the Tags section in Google Tag Manager and click on ‘New’ -> ‘Tag configuration’ -> ‘Custom HTML’.
3. Paste the provided code into the HTML section of the new Tag.
4. Set a trigger for the code to activate on all pages with HubSpot forms.

The code serves as a HubSpot form submission listener. It listens for form submission events and pushes the event name to the dataLayer when a form is submitted.

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>    

To send the form submission event to GA4, follow these steps:

1. Create a New Trigger in the Triggers section
Click “New” -> Trigger configuration -> select “Custom Event”. In the Event name section, type “hubspot-form-success” and select “All custom Events”. Name the trigger as you wish and save it.

2. Create a Data Layer Variable to Return the Form Id.
Go to the Variables section, scroll down to user-defined variables, click “New” -> Variable Configuration -> select “Data Layer Variable”. In the Data Variable Name section, type “hs-form-guid”.

3. Create a GA4 Event Tag to Send the Form Submission Data to GA4.
In the Tags section, click “New” -> Tag Configuration -> select “Google Analytics: GA4 Event”. In the Configuration tag input, select the GA4 account where you want to send the conversions. In the Event name, you can type “hs_form_submission” or better still use “generate_lead” the name for form submission recommended by Google. In Event Parameters, add “hs_form_id” and select the Data Layer variable created above in the value field. Add the custom event trigger created in step 1 in the Triggering section. Save and name the Tag.

You can use the GTM preview mode to check if the event is triggered when you fill out a form. Additionally, you can use the GA4 DebugView to check if the event is being sent to GA4.

Method #5: How to track TypeForm Submissions in GA4

Tracking TypeForm Submissions in GA4 is pretty straightforward. First, you need to set up Google Analytics 4 (GA4) in your TypeForm account. You can do this in your TypeForm account and go to the integration section to integrate to GA4. Here’s a dedicated article from the TypeForm team to help you achieve this.

Once the integration is complete, every submission of your Typeform will trigger the TypeformSubmit and TypeformQuestionPassed events, which will be sent to GA4. These events carry valuable data that can be viewed in the Engagement reports in GA4, with the event name and data displayed on the table.

Also, TypeformSubmit and TypeformQuestionPassed events can be marked as conversions in GA4 by simply navigating to the Event section in your Ga4 admin and ticking the Mark as conversion for the desired event. 

Still Not Working?

We understand that tracking form submissions in Google Analytics 4 can be a complex process, and different methods may work better for different situations. If you have tried the methods outlined in this article and are still facing challenges with form tracking, we encourage you to leave a comment on our blog. Our team is dedicated to providing support and guidance to help you effectively track forms and optimize your website for conversions. Your feedback is valuable to us, and we are here to assist you in finding the best solution for your specific tracking needs. 

Do you need extr​​a help with tracking your form in Google Analytics 4?

Tracking form submissions in GA4 can provide valuable insights to enhance user experience and drive conversions on your website. At Vakulski-Group, we are committed to helping you succeed in effectively tracking form submissions in Google Analytics 4. Contact us today to ensure you optimize your form tracking in GA4 and maximize your analytics data’s potential. Vakulski-Group specializes in providing comprehensive assistance with GA4, enabling you to leverage this powerful analytics tool’s capabilities fully. Our services include GA4 implementation, customization, and detailed data analysis. Reach out now for personalized support to unlock the full potential of your analytics data!

LEVEL UP YOUR ANALYTICS

We will help you set up analytics and find business insights to improve the bottom line.

CONTACT US

Final Words on How Track Form Submissions in Google Analytics 4

In summary, tracking form submissions in Google Analytics 4 is essential for gaining valuable insights into user interactions with forms and their conversion journey. Website owners can use various tracking methods, such as Enhanced Measurement, the GTM4WP plugin for WordPress websites, and different GTM techniques, as well as other methods suitable for various form types like Typeform and HubSpot. Each method offers unique capabilities and advantages, catering to different technical expertise levels and tracking needs.

By leveraging the insights from tracking form submissions, GA4 users can make informed decisions to enhance user experience and drive conversions on your website or app. This data-driven approach empowers website owners to make strategic improvements and boost overall performance effectively.

Frequently Asked Questions