How to Track Multi-Step Forms in Webflow Using Google Tag Manager

To track a multi-step form in Webflow with Google Tag Manager, push a dataLayer event each time a visitor reaches a new step, catch it with a Custom Event trigger, and send it to GA4 as one event with a step parameter. Track completion from Webflow's form success state, then test in GTM Preview and GA4 DebugView.

Why default form tracking is not enough

A submission event shows who finished. It does not show where everyone else quit. Element Visibility triggers can work, but steps hidden with Interactions or display none often make them fire late, twice or not at all. A dataLayer push fires exactly when the step changes.

Before you start

• GTM installed via Site settings > Custom code
• A Google tag with your GA4 measurement ID in GTM
• GA4 not also added through Webflow's integration
• Each step is its own wrapper inside the Webflow form block

Step 1: Mark the steps in Webflow

In the element settings panel, add custom attributes: data-form-name="quote" on the form, data-form-step with values 1, 2, 3 on each step wrapper, and data-step-next on each next button. Attributes survive class renames.

Step 2: Push step and completion events

Add this before the closing body tag in the page's custom code:

<script>
window.dataLayer = window.dataLayer || [];
document.addEventListener('DOMContentLoaded', function () {
  var form = document.querySelector('[data-form-name]');
  if (!form) return;
  var name = form.getAttribute('data-form-name');
  var started = false;
  function push(n) {
    dataLayer.push({event: 'form_step', form_name: name, step_number: n});
  }
  form.addEventListener('focusin', function () {
    if (!started) { started = true; push(1); }
  });
  form.querySelectorAll('[data-step-next]').forEach(function (b) {
    b.addEventListener('click', function () {
      var cur = b.closest('[data-form-step]');
      push(parseInt(cur.getAttribute('data-form-step'), 10) + 1);
    });
  });
  var w = form.closest('.w-form');
  var done = w && w.querySelector('.w-form-done');
  if (!done) return;
  var sent = false;
  new MutationObserver(function () {
    if (!sent && getComputedStyle(done).display !== 'none') {
      sent = true;
      dataLayer.push({event: 'form_complete', form_name: name});
    }
  }).observe(done, {attributes: true});
});
</script>

Webflow shows the success block (.w-form-done) only after it accepts a submission, so it is a reliable completion signal. Check these classes in your published HTML. If your next buttons validate fields first, call push where the next step is shown, not on click. Never push names, emails or phone numbers; GA4 does not allow personal data.

Step 3: Set up GTM

1. Create Data Layer Variables for form_name and step_number.
2. Create Custom Event triggers for form_step and form_complete.
3. Add a GA4 Event tag named form_step with both parameters, fired by the step trigger.
4. Add a GA4 Event tag such as generate_lead with form_name, fired by the completion trigger.

One event with a step_number parameter keeps reports cleaner than a separate event per step. In GA4, register both parameters as event-scoped custom dimensions under Custom definitions, and mark the completion event as a key event.

Step 4: Test

• Open GTM Preview on the published site, not the Designer
• Click into the form and confirm step 1 fires once
• Move through each step and check the number increases
• Submit with an empty required field; no completion should fire
• Submit properly and confirm form_complete fires once
• Confirm events and parameters in GA4 DebugView

See the GTM dataLayer docs.

Step 5: Read the drop-off

In GA4 Explore, build a Funnel exploration with one step per step_number value and a final completion step.

Example: a four-step quote form where many visitors reach step 3, which asks for budget, but few reach step 4. That question is the first thing to test.

FAQ

Can I use Element Visibility triggers instead?

Yes, with no code, but test carefully when steps are toggled by Interactions.

Why does completion fire on failed submissions?

The trigger probably listens to the submit click. Tie it to the success block instead.

What if the form posts to an external tool?

Step events still work. For completion, use the tool's thank-you page or callback.

Dealing with this on a live Webflow site? It is the kind of work I do in Webflow analytics. Send me your site and I will tell you what I would fix first.