We have previously written about how useful GTM (Google Tag Manager) is and how complex it can get. However, today we are going to get back to basics to learn one of the most convenient uses: tracking forms.

Form tracking has been a challenge at times, with the progressive disappearance of the so-called “thank-you” pages. Because, let’s be honest, redirections can be very confusing, especially on mobile devices. That is why some web designers go for a notification message instead.

Here we will explore different techniques to learn how we can track a form without having to contact your web developers. There are different form engines and plugins available, but we think the “element visibility” triggers are the easiest and most consistent to use.

1. Make sure GTM is properly implemented

We covered this in another article, but it’s always best-practice to double-check. You can easily download Google’s tag assistant and have a look before starting your task:

As a result, we rely a lot less on the web development team and we have more flexibility when deciding which events or actions we track. This is useful when there are lots of changes on the website or there are lots of elements to track (PDF downloads, bookings etc).

2. Send a test form

We will use Chrome to get the information we need. There are several ways to do this, but we consider this to be the easiest.

Once sent, the interesting part begins. Right-click the notification and click on “Inspect element”. An additional window will appear containing the source code, and this will be everything we will need.

Our task now will be to discover the unique identifiers that tell us that it is indeed a successful form submission, rather than an error. Let’s have a closer look.

We can see the classes underlined in red are indications of how the form has been submitted correctly. On the other hand, some might think that the class highlighted in orange is a good indicator, but check out what happens when we submit a form incorrectly.

Light your pipe, put on your hat, and let’s dive in.

• The first highlighted class also has the classes “success fusion-success” regardless of whether the form has been sent correctly or not.

• However, the class “wpcf7-mail-sent-ok” we saw on the successful form is not seen in the incorrect one. Therefore, we can assume that using that class name will be safe for us to identify sent forms.

• When the form is submitted correctly, “fa-check-circle” class appears, in contrast to the “fa-exclamation-triangle” when a form is submitted incorrectly. So we can use the former to identify successful forms.

• Finally, the “fusion-alert-content” highlighted in orange is the same in both cases, although the message is different. We will have to discard this identifier.

3. Create the tags and triggers

Now the classes have been identified, we can proceed to create the tag and the trigger in GTM. First of all, we will create a tag. A simple one will do.

The important thing here will be the trigger. Let’s create a new “element visibility” trigger:

Inside, there are a few things to take into account. Remember our class (not id) name is wpcf7-mail-sent-ok.

We do not need everything else. However, if you only wanted to track forms from the “contact” page, it is recommended to add some conditions below:

4. Test!

Now it has triggered the event, we can head over to Google Analytics and see how the event is doing, or create an event conversion to import it to Google Ads. Furthermore, this trigger can be used with your Facebook Pixel to optimize towards an action.

In the coming months, we will explore all of the possibilities GTM can offer, so stay tuned for the next blog!