Title here
Summary here
Track Webflow Forms with Google Tag Manager
Lucas RollinUpdated: Tuesday, November 26, 2024
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>
I advise you to trigger this tag only on the page(s) that contain Webflow forms.
Example of a valid form submission
When a valid Webflow form is sent, the generate_lead event is sent in the Data Layer.
If you have several forms on the same page, you’ll need to rely on the name variable to differentiate them in GTM.
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:
