Track Webflow Forms with Google Tag Manager

Webflow forms #

If you use Webflow, it’s very likely that you use the Form Block element to create your forms.

Forms created with Webflow are difficult to track with Google Tag Manager’s native triggers.

I’m going to show you how to track only valid submissions of a Webflow form and also how to retrieve user data (such as email address) for transmission to advertising platforms.

Install the Webflow Form listener #

To listen for valid Webflow form submissions, you need to add this code to Google Tag Manager with a custom HTML tag.

<script>
  window.dataLayer = window.dataLayer || [];
  var origin_open = XMLHttpRequest.prototype.open;
  var origin_send = XMLHttpRequest.prototype.send;
  var form_data = "";

  XMLHttpRequest.prototype.send = function(body) {
    form_data = Object.fromEntries(new URLSearchParams(body));
    origin_send.apply(this, arguments);
  };

  XMLHttpRequest.prototype.open = function(method, url) {
    if(url.includes("/api") && url.includes("/form")) {
        this.addEventListener('loadend', function(event) {
            if(JSON.parse(event.currentTarget.response).msg == "ok") {
                var parameter_filter = ['name', 'fields'];
                for (key in form_data) {
                    if(!parameter_filter.some(function(prefix) { return key.startsWith(prefix) })) delete form_data[key];
                    if(!form_data[key]) delete form_data[key];
                    if(key.startsWith("fields")) {
                        var new_key = transformField(key);
                        form_data[new_key] = form_data[key];
                        delete form_data[key];
                    };
                }
                delete form_data['cf-turnstile-response'];
                dataLayer.push({
                    event: "generate_lead",
                    form_data: form_data
                });
            }
        });
        origin_open.apply(this, arguments);
    }
  };

  function transformField(fieldString) {
    return fieldString.replace(/^fields\[(.+)]$/, '$1');
  }
  /*
  * v0.1.0
  * Created by Data Marketing School at http://www.data-marketing-school.com
  * Written by https://www.linkedin.com/in/lucasrollin/
  */
</script>

Example of a valid form submission #

When a valid Webflow form is sent, the generate_lead event is sent in the Data Layer.

Create the corresponding Data Layer variables #

Form name #

Form fields #

Here you need to create a variable for each field in your form.

If you wish to change the field names, you can do so in Webflow.

Going further #

You can transmit the user data collected via your Webflow form to advertising platforms to improve your performance:

• Google Ads Conversion Tracking with Google Tag Manager