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.

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);
};
// Fill in the form below to get full code

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