From researching your audience to generating leads and keeping customers engaged, forms can be a valuable tool for capturing information.
In fact, studies show that 84% of marketers use forms as a conversion tool, and ultimately, the information submitted through web forms can be used to create targeted and relevant follow-up activities for customers, however, 36% struggle to track them.
Yes, we admit, there are various types of forms, and to make our lives more difficult, many of those display a message after a form is successfully submitted. And this message is not easy to track – example below.
Unfortunately, in many cases, form tracking becomes complicated especially if you have no clue what CSS or HTML is.
This is where goal-tracking (using Google Tag Manager) comes in, and one particular method is easy and simple to set up.
What is Google Tag Manager?
Google Tag Manager is a free platform that allows you to implement and manage tags (also known as code snippets) without affecting the website’s code.
Traditionally, adding separate tracking codes required a web developer. This approach wasn’t very efficient because having multiple pieces of code on the site made maintenance and updates challenging.
Google Tag Manager simplifies this by allowing you to manage and store all your tracking codes in one place.
You can track:
- Conversions such as form submissions, brochure downloads and more
- Advertising activity to determine your campaigns’ effectiveness including Google Ads, Meta, X & more
- Google Analytics events, which refer to actions on your site such as scrolls, purchases, clicks, button interactions etc
The great news is that the platform offers a wide range of Google and third-party tags that you can use with minimal setup.
How does Google Tag Manager work?
It’s all about tags and triggers.
Tags are snippets of code that can be used to track website performance and other marketing activities, for example:
- Google Analytics
- Google Ads
- Hotjar
- Pinterest Tag
- LinkedIn Insight
- Facebook/Meta Pixel
- HubSpot
- Salesforce
Triggers are events which determine when tags should be activated, such as:
- Page views
- Form submissions
- Link clicks
- Purchases
- Page views
- Element visibility (keep reading to learn more about this!)
The options aren’t limited to the above but they should give you an idea.
For now, in line with the topic of this article, we will focus on form submissions, using element visibility and CSS selectors.
How do I use CSS selectors in Google Tag Manager for form tracking?
CSS selectors allow you to track visual elements from your website.
As an example, you can track elements such as a success message after form submissions.
To do that, you will need to identify the CSS Selector associated with the success message.
This can be achieved using Google Tag Manager’s ‘Element Visibility’ view which allows you to track HTML elements when they become visible in the web browser’s viewport.
The ‘Element Visibility’ trigger type is great because it’ll enable you to retrieve simple data like the total number of form submissions (to name just one data type), without having to set complicated triggers and variables to do so.
What’s even better is that this method is suitable for not only WordPress plugins like WP Broadbean, Gravity Forms, WP Forms, and Formidable Forms, but also any other form from any other website builder like Wix, Squarespace, and Webflow, as long as it meets the following criteria:
- There is an HTML element (a span, a div, or any other inline- or block-level element) that displays after the form submit button is clicked.
If your form has this, you can now begin the easy steps to achieving simple goal-tracking!
How to set up form submission tracking with CSS Selectors?
Your first step will be to create a trigger (a condition which causes Google Tag Manager to track any given event and subsequently record data) that’ll help you select which HTML element you’d like to target – in our case this is a successful form submission.
From the HTML point of view, it’s a paragraph (‘<p>’) element with the text ‘Success! Your form has been submitted’, which contains the unique class of ‘form-success-message’.
Here is what this can look like on your site:
<div style=”border-left: 4px solid #8BC34A; background-color: #F0F4C3; padding: 10px; margin-top: 10px; border-radius: 4px;”>
<p class=”form-success-message” style=”color: #4CAF50; font-weight: bold;”>Success! Your form has been submitted</p>
<p>A representative will get in touch with you.</p>
</div>
A quick tip: To view the HTML elements of your site, right-click on any webpage, click Inspect, and you’ll see the site’s source code, the images, links and CSS that form its design.
It’s important to set the trigger up first because we’ll be calling it when we set our tag up (a tag is a vessel in which we place all of our variables and triggers, to receive a specified piece of data like form submissions and transport it to Google Analytics).
This trigger is what will tell your tag (which you’ll set up in a second) to run once a form is submitted. To begin, follow the instructions below:
- Head over to the ‘Triggers’ tab on the left-hand side of Google Tag Manager and click ‘New’.
- The first option you’ll see is ‘Trigger Type’, which you’ll want to open up and click ‘Element Visibility’, which can be found under the ‘User Engagement’ section.
- Once this is done, we need to change our next ‘Selection Method’ field to either ‘ID’ or ‘CSS Selector’
Select ‘ID’ if the element contains a unique ID, but if not, a unique class attribute will also do the trick, in which case: select ‘CSS Selector’.
To find out whether your success message has a unique class or ID (or both), right-click on the form submission page (make sure you do this after submitting a form) and select ‘Inspect’.
Then, click this icon 
In our example, WordPress outputs a class of ‘wpbb-message wpbb-message-success’ for the success message, which we’ll pop into our trigger field of ‘Element Selector’.
In CSS, classes are specified with a dot in front, but in our class, you’ll see that there are actually two classes separated by a space: ‘wpbb-message’ and ‘wpbb-message-success’.
To be safe, we’re going to unite them into one global class that prints as the following: ‘.wpbb-message.wpbb-message-success’.
- The remaining options are straightforward to configure: simply copy the screenshot.
The main setting here is ‘Observe DOM changes’, which will catch our success message when it appears since the DOM contains all visual elements of a webpage like buttons, paragraphs, and layouts.
It doesn’t matter if the page redirects to another, or stays on the same URL, as long as you select ‘Observe DOM changes’, Google Tag Manager will be able to track any new additions to the DOM.
One detraction when using ‘Observe DOM changes’ is that it’ll result in a greater network load since Tag Manager will have to track real-time changes to the DOM (in our situation, it’s the dynamically generated appearance of the success message after the page has initially loaded), but as long as our CSS selector is unique, then it will only need to record changes when that specific success message shows.
We’re now ready to set our tag up so we can push our data to Google Analytics.
We’ll need to do this so we can easily access the form submission data in one place, along with all of your stats about traffic and session durations (Google Tag Manager won’t display this data in a user-friendly way).
How to track form submissions with Google Analytics 4?
This is the easy bit.
All we need to do is click on ‘Tags’ in the left-hand panel and click ‘New’ on the right to get started.
Upon doing so, this is the screen you will see.
Name the tag and ensure this is descriptive.
Click the ‘pencil’ icon under Tag Configuration and select Google Analytics: GA4 Event.
Add the Measurement ID, which is a unique identifier for a web data stream of your Google Analytics account.
Here is how to find your measurement ID > https://support.google.com/analytics/answer/12270356
As a next step, add your event name. Make sure it’s descriptive so when it’s shown in GA4 you can easily identify which form this relates to.
Finally, select the trigger you set up in the previous step by clicking on the pencil icon.
Lastly, save your tag.
How to test your newly set-up tag?
We need to make sure that the tag we’ve set up is actually working.
To do so, click ‘Preview’.
You’ll then be prompted to enter the URL of the page your form is in; once you’ve entered it, you’ll be taken to said URL and you should see a little Tag Manager widget in the bottom right-hand corner:
If you see this, then the Google Tag Manager debugger is successfully running, and now you simply need to fill your form out and click the submit button.
Once you’ve completed this step, go to your ‘Tag Assistant’ browser tab (it will open in a new tab automatically), and in the ‘Summary’ section, you should see that your tag has fired.
It should be under the name you used when creating your tag.
Your form is now set up for goal tracking and you can now easily view how many people are submitting your forms.
When you are testing your form using Google’s Tag Manager debugger, you will be able to see a successfully triggered event in a real-time mode in GA4.
If your event appears under the Event count by Event name column, this means all is working as expected.
After 24 hours, you will be able to start reporting on the number of successful submissions.
Go to Reports – Engagement – Events and select the relevant period.
Final thoughts
In this article, we only covered contact us form submissions, but this ‘Element Visibility’ method can be applied to ANY form that has a dynamically generated element displaying AFTER a form is submitted.
This method is especially beneficial for website owners who may not have much time to set up something more advanced, and just want to track a simple metric that’ll inform them of the effectiveness of each webpage with a form (for example, by measuring how many people visit a page and then fill the form out).
If time is limited, and this is something you would like help with please get in touch with us today.
We offer a free website audit to identify and track issues on your site, or can simply assist with setting everything up from scratch.