How to Track Webflow Form Submissions with Google Tag Manager

What we’re going to build

When someone submits a form on your Webflow website, we’ll push an event into the GTM data layer that looks like this:

{
  event: "formSubmission",
  formId: "contact-form",
  formData: {
    name: "John",
    email: "john@example.com"
  }
}

The most important property is event: "formSubmission". Google Tag Manager can listen for that custom event and use it as a trigger.

From there, you can fire the tracking tag you need:

• Google Ads conversion tags
• GA4 events
• Meta Pixel events
• LinkedIn Insight Tag conversions
• TikTok Pixel events
• Other marketing or analytics pixels

You can also use formId to tell multiple forms on the same website apart.

Create the Webflow form submission listener

Add this JavaScript listener. It detects a browser form submission, collects information about the form, and pushes the custom event to the data layer.

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  /* Listen for any form submission on the page */
  $('form').submit(function() {
    var $form = $(this);
    var formData = $form.serializeArray();

    // Initialize the dataLayer if it doesn't already exist
    window.dataLayer = window.dataLayer || [];

    // Push the form submission event
    window.dataLayer.push({
      event: 'formSubmission',
      formId: $form.attr('id'),
      formData: formData.reduce(function(obj, item) {
        obj[item.name] = item.value;
        return obj;
      }, {})
    });

    // Optional debugging
    console.log('Form Data:', formData);
  });
});
</script>

Add the script to Google Tag Manager

Open your GTM container and go to Tags → New. Choose Tag Configuration → Custom HTML, then paste the listener into the HTML field.

This makes the listener available anywhere your website has a Webflow form. Save the tag, but test it before publishing your container.

Test the Webflow form submission

In Google Tag Manager, click Preview to open Tag Assistant. Enter your Webflow website URL, connect, and navigate to a page containing a form.

Fill out the form and submit it, then return to the GTM debugger. You should see a new formSubmission event in the timeline. Select it and inspect the Data Layer tab.

{
  event: "formSubmission",
  formId: "contact-form",
  formData: {
    name: "Test User",
    email: "test@example.com"
  }
}

If the event appears, the listener is working. Do not use real customer information during testing.

Create a custom event trigger in GTM

Go to Triggers → New → Trigger Configuration and select Custom Event. Enter formSubmission as the event name, choose All Custom Events, and save the trigger.

You now have a reusable trigger that fires whenever the listener detects a Webflow form submission.

Connect the trigger to your conversion tag

Attach the formSubmission trigger to the marketing or analytics tag you want to fire. For example, create a GA4 event named generate_lead and fire it when formSubmission occurs.

This gives you one reusable tracking architecture instead of separate JavaScript for every advertising platform.

Track specific Webflow forms

If your site has multiple forms, use the form ID pushed by the listener. For example: contact-form, newsletter-form, and demo-request-form.

In GTM, go to Variables → New → Variable Configuration → Data Layer Variable. Enter formId and name the variable DLV - Form ID.

Then change your Custom Event trigger to Some Custom Events and add this condition:

Understand the script

Waiting for Webflow

var Webflow = Webflow || [];
Webflow.push(function() {

This waits for Webflow’s JavaScript environment before initializing the listener.

Detecting submissions

$('form').submit(function() {

This attaches a submit listener to every form on the page. When a form is submitted, the rest of the code runs.

Getting the submitted form

var $form = $(this);

this represents the form that triggered the event, which matters when a page contains more than one form.

Collecting form fields

var formData = $form.serializeArray();

formData.reduce(function(obj, item) {
  obj[item.name] = item.value;
  return obj;
}, {})

This collects the form fields and converts them into an object. Remove this part if you do not have a valid, documented reason to process submitted values.

Pushing to the data layer

window.dataLayer.push({
  event: 'formSubmission',
  formId: $form.attr('id'),
  formData: formData.reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
  }, {})
});

This makes the event and form ID available inside Google Tag Manager.

Troubleshooting

Make sure the Custom HTML tag fired

Open the initial page event in Tag Assistant and confirm that the listener appears under the tags that fired.

Check the browser console

An unrelated JavaScript error—or a problem with the listener—can prevent it from executing.

Confirm that the form has an ID

The event can still occur without one, but formId will be empty. Give important forms unique IDs so you can create reliable form-specific rules.

Make sure it is a native Webflow form

HubSpot, Typeform, Calendly, and other forms embedded through an iframe usually require a different tracking approach.

Always test before publishing

Use GTM Preview Mode to verify the event, form ID, trigger, and final conversion tag. Test successful submissions, validation errors, and server failures separately.