Tracking HTML Forms with Google Tag Manager

HTML Forms is not a typical WordPress form plugin. One thing that attracted me, and most likely scares away many, is that it is designed for those who are either developers or at least know their way around HTML. There is no fancy fluff: you just add the HTML markup of your form and it works. No styles, no templates, it just works. Here is how the form creation process looks like, for example:

As a result, some things are a bit more complicated, so I want to share one aspect: how to track form submissions using Google Tag Manager, from where you can send the data to Google Ads, Google Analytics, or elsewhere. At the end of this article, you will also find how to implement Enhanced Conversions, which will help you aggregate more data and better optimize your Google Ads campaigns.

---

Implementation process

Step 1: create a form listener

In your Google Tag Manager container (see my step-by-step guide on how to create and install Google Tag Manager on WordPress), you will need to create a new Custom HTML tag with the following code:

<script>
  html_forms.on('success', function(formElement) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'rg_form_submit'
    });
  });
</script>

You can change the event name from rg_form_submit to whatever you prefer. I use a prefixed with my initials event to make it more distinguishable and unique, which becomes handy during the debugging process. Plus, that eliminates the risk of conflicts.

Have the tag triggered on all pages, or create a specific page trigger based on where your form is placed. Here is how it looks in my configuration:

Step 2: create an event trigger

Now go to Triggers and create a new Custom Event trigger with the event name from the previous step. In my case it’s rg_form_submit. Here’s what you should have:

If you changed the event name in the form listener, be sure to use the same event name in the trigger configuration.

Step 3: create a GA4 event tag

This step is quite straightforward. Add the event name (I prefer generate_lead) and select the trigger we created in the previous step:

Step 4: create a Google Ads conversion tracking tag + enhanced conversions

This step is similar to the previous one. However, I decided to show how you can add the enhanced conversions data in order to track conversions more precisely. In order for EC to work, we will need to send user-provided data. That means that we need to have it at our disposal (in the dataLayer). There are two options to get it:

1. Scrape DOM by creating a DOM element variable.
2. Update our form listener so it sends the input value.

Option 1: scrape DOM

DOM scraping might be tricky, but since the HTML Forms plugin gives full control over the HTML markup we can add any ID to our inputs, which makes the process simple. Find you input using DevTools and grab it’s ID:

Then create a DOM Element variable in Google Tag Manager:

Now do the same for the phone number and other fields, should you have any.

Option 2: update the form listener

Replace the listener code from the Step 1 with the following code:

<script>
  html_forms.on('success', function(formElement) {
    var formData = new FormData(formElement);

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'rg_form_submit',
      'upd_email': Object.fromEntries(formData)['EMAIL']
    });
  });
</script>

It’s the same form listener script but with a new line:

'upd_email': Object.fromEntries(formData)['EMAIL']

The ['EMAIL'] should be replaced with the input name parameter of our field:

The updated code will not only send the rg_form_submit event to the dataLayer, but also will add the value of the corresponding input. To be able to utilize it we will need to create a new Data Layer Variable, which in my case should look as follows:

Now, regardless of the option you were using, we will need to create a User-Provided Data variable, where we, essentially, map our variables to the EC data fields:

Now, we can finalize the results of our work and create a Google Ads conversion tracking tag, where we will need to put Conversion ID, Conversion Label, enable the “Include user-provided data from your website” and select our UPD variable.

Step 5: test and debug

Simply open the GTM preview mode, fill out the form and you should see something like this:

Another way to check is to simply open DevTools → Network, submit the form and search a network request with your conversion label. In the request payload find the em parameter. It should look like this:

And lastly, you need to ensure you have the enhanced conversions feature enabled in your Google Ads conversion settings.