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

Why Track Multi-Step Forms?

Tracking gives you insights such as:

• Where users abandon the form
• Which step has the highest friction
• How many users reach each stage
• Performance of new vs. returning visitors
• Effectiveness of A/B tested layouts

This data helps designers optimize UX and helps marketers scale campaigns with higher efficiency.

Add Data Attributes to Each Form Step in Webflow

To track each step separately, you need a way for GTM to identify when a user reaches a specific step.

The easiest way is to add data-step attributes.

How to do it in Webflow:

1. Select the wrapper (or section) of each form step.
2. Go to the Element Settings panel.
3. Add a custom attribute:
   • Name: data-step
   • Value: step-1, step-2, step-3, etc.

Example:

StepAttributeStep 1data-step="step-1"Step 2data-step="step-2"Step 3data-step="step-3"

Do this for all steps in your multi-step form.

This attribute becomes your GTM “signal.”

Detect Step Changes Using GTM's Built-In Element Visibility Trigger

Google Tag Manager has a powerful feature called Element Visibility Trigger, which fires when an element becomes visible on screen  perfect for tracking step transitions.

How to set it up:

1. Open GTM
2. Go to Triggers → New
3. Choose Element Visibility
4. Configure it:

• Selection Method: CSS Selector
• Element Selector: [data-step="step-1"]
• When to Fire: Once per page
• Minimum Percent Visible: 50%

Create one trigger per step:

• [data-step="step-1"]
• [data-step="step-2"]
• [data-step="step-3"]

This allows GTM to fire a unique event whenever a user reaches a step.

Create Tags for Each Step (GA4 Events)

Now that GTM can detect step changes, you need to send events to Google Analytics.

How to create the tags:

1. Go to Tags → New
2. Select GA4 Event
3. Name it:
   form_step_1_viewed
4. Event name:
   form_step_1
5. Link the tag to the trigger for Step 1.

Repeat this for every step:

• form_step_2
• form_step_3
• form_step_complete

Pro tip:

Use clean naming so you can build GA4 funnels easily.

Track Form Submissions (Final Step)

Webflow already supports GTM form submission tracking, but you can make it more accurate by firing an event on the final step.

Best approach:

Use the Webflow Success Message div.

Assign it a custom attribute:

• data-step="form-complete"

Create a GTM visibility trigger for:

[data-step="form-complete"]


Then fire a GA4 event named:

form_submission


This gives you a clean end-of-funnel metric.

Verify Tracking Using GTM Preview Mode

Before publishing, always validate.

How to test:

1. Click Preview in GTM
2. Open your site
3. Walk through your multi-step form
4. Confirm that:

• each step trigger fires
• each GA4 event tag activates correctly
• final submission event fires

This ensures everything is tracking accurately.

Build Funnels in GA4

Now that GA4 receives step-by-step events, you can create a Funnel Exploration.

Funnel example:

StepEvent NameStep 1 viewedform_step_1Step 2 viewedform_step_2Step 3 viewedform_step_3Submittedform_submission

This funnel will show:

• drop-off rate per step
• user progression
• conversions by source
• mobile vs. desktop completion
• audience segment conversion rates

This is the data marketers need to optimize performance.

Tips for Better Tracking (2026 Best Practices)

• Use short step names (step-1 instead of long IDs)
• Add scroll tracking to forms longer than 1 viewport
• Track clicks on “Next” buttons as a separate event
• Combine with heatmap tools for UX insights
• Use GTM variables to capture form field values (non-PII only)

Tracking multi-step forms in Webflow using Google Tag Manager is one of the most powerful upgrades you can add to any website.
It helps you understand user behavior, optimize each step, and ultimately drive more conversions.