Real-World Hypothetical Scenario

Consider a SaaS company’s signup process with a four-step registration form:

Step 1: Basic user information
Step 2: Company details
Step 3: Subscription plan selection
Step 4: Payment method submission

The company notices significant drop-offs at various steps but cannot identify precisely where and why users abandon. Using the approach below, they can precisely track progression and drop-off points, optimizing the form for increased completion rates.

Step 1/8: Review Your Multi-Step Form HTML Structure

Ensure your multi-step form includes clear identifiers for each step or section.

Example HTML structure:

<div id="form-step-1" class="form-step">
<input type="text" name="user_name" required>
<button class="next-step">Next</button>
</div>

<div id="form-step-2" class="form-step" style="display:none;">
<input type="text" name="company_name" required>
<button class="next-step">Next</button>
</div>

<div id="form-step-3" class="form-step" style="display:none;">
<select name="subscription_plan" required>
  <option>Plan A</option>
  <option>Plan B</option>
</select>
<button class="next-step">Next</button>
</div>

<div id="form-step-4" class="form-step" style="display:none;">
<input type="text" name="card_number" required>
<button id="submit-btn">Submit</button>
</div>

Step 2/8: Create the Custom JavaScript Listener for Form Step Progression

We'll use custom JavaScript to detect clicks on the "next-step" buttons, track progression, and send events to GTM via the dataLayer.

Custom HTML Tag in GTM:

In GTM, go to Tags → New → Custom HTML.
Paste the following JavaScript code:

<script>
document.addEventListener('DOMContentLoaded', function () {
function trackFormStep(stepNumber, stepId) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'formStepProgress',
    'formStepNumber': stepNumber,
    'formStepId': stepId
  });
}

var nextStepButtons = document.querySelectorAll('.next-step');
nextStepButtons.forEach(function(button, index) {
  button.addEventListener('click', function() {
    var currentStep = index + 1; // steps numbered starting from 1
    var stepElement = button.closest('.form-step');
    var stepId = stepElement ? stepElement.id : 'unknown-step';

    trackFormStep(currentStep, stepId);
  });
});

// Submit button tracking (final step)
var submitBtn = document.getElementById('submit-btn');
if (submitBtn) {
  submitBtn.addEventListener('click', function() {
    trackFormStep(nextStepButtons.length + 1, 'form-step-submit');
  });
}
});
</script>

How This Listener Works:

Adds click event listeners to all "next-step" buttons.
Each click event sends a custom event formStepProgress to GTM with the step number and step ID.
Captures the final submit button as the last step.

Step 3/8: Create Data Layer Variables in GTM

We’ll capture step details as variables in GTM.

In GTM, go to Variables → New → Data Layer Variable and create the following variables:

GTM Variable Name	Data Layer Variable Name
DLV - formStepNumber	formStepNumber
DLV - formStepId	formStepId

Step 4/8: Create GTM Custom Event Trigger

Set up a trigger to detect the form-step progression event:

Go to GTM → Triggers → New → Custom Event.
Event Name: formStepProgress (exact match to your dataLayer event).
Trigger fires on: All Custom Events.
Name the trigger: Trigger - Form Step Progress.
Save this trigger.

Step 5/8: Create GA4 Event Tag to Track Form Steps

Next, configure a GA4 event tag to capture each form step event:

Go to GTM → Tags → New → Google Analytics: GA4 Event.
Configuration Tag: select your existing GA4 Configuration Tag.
Event Name: use a descriptive name, such as multi_step_form_progress.
Event Parameters (recommended):

Parameter Name	Value (DLV Variable)
step_number	{{DLV - formStepNumber}}
step_id	{{DLV - formStepId}}

Under Triggering, select your trigger: Trigger - Form Step Progress.
Name the tag: GA4 Event - Multi-Step Form Progress.
Save your tag.

Step 6/8: Test, Preview, and Debug the Setup in GTM

Always verify before publishing:

Enter GTM’s Preview mode.
Go to your form’s page and navigate through the form steps.
Confirm that the formStepProgress event appears in GTM’s preview and fires the GA4 tag correctly.

Step 7/8: Verifying Events in Google Analytics (GA4)

Check your GA4 data:

Navigate to GA4 → Reports → Engagement → Events.
Look for the new event: multi_step_form_progress. (Events typically appear in real-time in DebugView or within 24 hours in standard reports.)

Create Custom Dimensions for Enhanced GA4 Reporting:

For improved analysis, set up custom dimensions based on parameters:

Go to GA4 → Admin → Custom Definitions → Create Custom Dimensions:

Dimension Name	Event Parameter	Scope
Form Step Number	step_number	Event
Form Step ID	step_id	Event

Step 8/8: Example of Analyzing Multi-Step Form Data

In GA4 reports, you’ll clearly see the progression through each step (example):

Event Name	Form Step Number	Form Step ID	Event Count
multi_step_form_progress	1	form-step-1	250
multi_step_form_progress	2	form-step-2	190
multi_step_form_progress	3	form-step-3	145
multi_step_form_progress	4	form-step-submit	100

You can clearly identify drop-off points—like significant abandonment between steps 1 and 2—providing actionable insights to optimize each step.

Why Is Custom JavaScript Required Here?

GTM alone doesn't inherently track multi-step form interactions.
JavaScript enables granular tracking, capturing user progression without reliance on page reloads or default GTM events.

How to track multi-step form progress with GTM and GA4

Related Articles

Average conversion rates for various business types using Google Search

How to use Google Ads scripts to automate your PPC Campaigns

How to track custom scroll depth in GA4 using GTM (step-by-step)