Why Google Tag Manager's Native Form Submit Trigger Fails on Webflow

When you install Google Tag Manager on a Webflow site and set up a Form Submit trigger, the natural assumption is that this will be enough to measure form submissions. In practice, this approach creates several concrete problems that compromise the reliability of your tracking.

Webflow Does Not Use Standard HTML Form Submission

GTM's Form Submit trigger works by intercepting the browser's native submit event, which fires when an HTML form is submitted in the traditional way, with a page reload or redirect. Webflow, however, handles form submissions through an asynchronous AJAX request. The form is sent in the background without reloading the page, which means the browser's submit event may never fire, or it may fire before the submission has actually been completed and validated by Webflow's servers.

The Result: Conversions Counted Wrong or Not at All

Depending on the site configuration and browser version, GTM's Form Submit trigger can:

  • Never fire at all, causing all real submissions to go untracked.
  • Fire before the AJAX request completes, counting conversions even when the form returns a server-side error.
  • Fire multiple times on the same page if a user interacts with the form repeatedly, artificially inflating conversion numbers.

The Absence of a Thank-You Page Makes Things Harder

On many Webflow sites, forms display a success message on the same page rather than redirecting to a confirmation URL. This removes the option of triggering a GTM tag on a confirmation page load, which is otherwise the simplest and most reliable method. You must instead detect the form's success state directly within the page code.

The Right Approach: Listening to Webflow's Success Event and Pushing a Data Layer

Webflow exposes a native JavaScript event called formSuccess that fires only when the form submission has been successfully processed by Webflow's servers. This is the event to intercept in order to ensure accurate tracking.

Step 1: Add the Listener Script to Your Webflow Site

Go to your Webflow site settings, then to the Custom Code section. Add the following script in the Before </body> tag area. This script can also be added directly in an HTML embed on specific pages if you want to limit it to certain forms.

<script>
Webflow.push(function() {
  $('form').on('submit', function(e) {
    var formEl = this;
    $(formEl).one('formSuccess', function() {
      var formName = $(formEl).attr('data-name') || $(formEl).find('[name]').closest('form').attr('id') || 'unknown_form';
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'form_submit_success',
        form_name: formName,
        form_location: window.location.pathname
      });
    });
  });
});
</script>

This script waits for Webflow to initialize, then attaches a listener to every form on the page. When a successful submission is detected via the formSuccess event, it pushes an object to the data layer with three pieces of information: the event name (form_submit_success), the form name as defined in Webflow, and the path of the page on which the submission occurred.

How to Retrieve the Form Name in Webflow

In the Webflow designer, each form has a field called Form Name in the form settings panel (right sidebar, Settings tab). This name is exposed in the DOM via the data-name attribute on the <form> tag. The script above reads this attribute automatically, making it possible to distinguish between multiple forms on the same site or page.

Step 2: Create the Trigger in GTM

In Google Tag Manager, create a new trigger of type Custom Event. In the Event Name field, enter exactly form_submit_success. This trigger will fire every time the script pushes this event to the data layer.

If you want to distinguish between different forms, you can add an additional condition on the form_name variable. To do this, create a Data Layer Variable in GTM with the variable name form_name, then add this filter to your trigger.

Step 3: Configure Data Layer Variables in GTM

To make full use of the data pushed to the data layer, create the following variables in GTM:

  • Variable type Data Layer Variable, GTM name: dlv_form_name, data layer variable name: form_name.
  • Variable type Data Layer Variable, GTM name: dlv_form_location, data layer variable name: form_location.

These variables can then be used in your Google Analytics 4, Google Ads, or any other destination tags to enrich conversion events with contextual information about the submitted form.

Step 4: Create the Conversion Tag in GTM

Create a tag of type Google Analytics: GA4 Event. Give it the event name generate_lead (recommended by Google for form conversions) or a custom name according to your naming convention. Associate this tag with the form_submit_success trigger created in step 2. Add the following event parameters to enrich the conversion:

  • Parameter: form_name, value: the GTM variable {{dlv_form_name}}.
  • Parameter: form_location, value: the GTM variable {{dlv_form_location}}.

Special Case: Multi-Step or Conditional Forms

If your Webflow form is divided into multiple steps displayed sequentially via JavaScript, the formSuccess event will only fire on the final submission, which is the desired behavior. You do not need to modify the script for multi-step forms managed through Webflow Interactions or Finsweet Attributes.

However, if you are using a fully custom form that does not go through Webflow's native system (for example, a form embedded via Typeform, HubSpot, or another tool), the Webflow formSuccess event will not fire. You will need to adapt the script to listen for the events specific to those tools instead.

How to Verify That the Tracking Is Working Correctly

Before publishing your changes, test your configuration using GTM's Preview mode. Open your site in Preview mode, submit a test form, then verify in the GTM Preview panel that the form_submit_success event appears in the list of detected events and that your form_name and form_location variables contain the expected values.

You can also verify that the data layer is being populated correctly by opening the browser console after a submission and typing dataLayer to display all objects that have been pushed to it.

Conclusion

GTM's native Form Submit trigger is not designed for the asynchronous AJAX submissions used by Webflow. For reliable and accurate tracking without a thank-you page, the right method is to listen to Webflow's formSuccess event and manually push an event to the data layer. This approach ensures that only genuinely successful submissions are counted, that contextual data is available for segmentation, and that your conversion reporting reflects reality.