Webflow Form GTM Event Listener

Webflow Form

Overview

Webflow includes a built-in form component. This listener uses jQuery to catch form submissions and push the form's HTML id attribute and a formsubmit_event event to the dataLayer.

Event fired: formsubmit_event Variable: formID (form's HTML id attribute)

Why Use This Listener

Webflow forms submit via Webflow's own AJAX handler. GTM's built-in Form Submit trigger works unreliably with Webflow's AJAX submissions. This listener fires reliably using jQuery's .submit() event.

Common Use Cases

• Track contact form and lead form submissions on Webflow sites
• Fire Google Ads conversion tags on Webflow form completion
• Distinguish between multiple Webflow forms using formID
• Measure landing page form conversion rates

Installation

<!-- GTM Custom HTML Tag: Webflow Form Listener -->
<script>
$('form').submit(function(event) {
  var formID = $(this).attr('id');
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'formsubmit_event',
    'formID': formID
  });
});
</script>

Note: Webflow includes jQuery. Fire on DOM Ready.

Data Layer Output

{
  "event": "formsubmit_event",
  "formID": "contact-form"
}

Trigger Configuration

Per form:

Variables to Capture

GA4 Mapping

Debugging

Webflow Alternative: Webflow dispatches a custom event you can also listen for:

javascriptCopy

document.addEventListener('wf-form-success', function(e) {
  dataLayer.push({ event: 'webflow_form_success', formID: e.target.id });
});

Best Practices

1. Always assign HTML id attributes to Webflow forms for segmentation
2. Test in Webflow's staging environment before going live
3. Combine with UTM parameter capturing for full attribution

Related Listeners

• Tally Forms
• Unbounce Form
• Instapage Form