CRO / Conversion

1 views

6 min

How to Add a Progress Bar to a Webflow Form

Learn how to add a step-by-step progress bar to a multi-step Webflow form with JavaScript.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to add a step-based progress bar to a multi-step Webflow form.

Example

Step 1 / 3

Your contact details

Your project

Your needs

🎉

Request sent!

We’ll get back to you within 24 hours.

CSS class	Element	Role
form-step	Div	Container for one form step
progress-bar	Div	Visual progress bar
step-indicator	Text Block	Displays “Step X / Y”

1. Create your form steps

Split your form into several Divs with the form-step class. Set every step to display: none except the first one. Create a progress-bar Div with width: 0% and a height of 4px. Add a step-indicator Text Block.

2. Add the Next and Previous buttons

In each step, add a "Next" button with the btn-next class and a "Previous" button with the btn-prev class (hidden on the first step).

3. Add this script in the <body>

const steps = document.querySelectorAll('.form-step');
let current = 0;
function showStep(n) {
  steps.forEach(function(s) { s.style.display = 'none'; });
  steps[n].style.display = 'block';
  document.querySelector('.progress-bar').style.width = ((n + 1) / steps.length * 100) + '%';
  document.querySelector('.step-indicator').textContent = 'Step ' + (n + 1) + ' / ' + steps.length;
}
document.querySelectorAll('.btn-next').forEach(function(btn) {
  btn.addEventListener('click', function() { if (current < steps.length - 1) showStep(++current); });
});
document.querySelectorAll('.btn-prev').forEach(function(btn) {
  btn.addEventListener('click', function() { if (current > 0) showStep(--current); });
});
showStep(0);

good to know

This script doesn’t validate fields before moving to the next step. To add validation, insert a check in the btn-next listener: loop through the current step’s inputs with checkValidity() and block progression if a field is invalid.

Conclusion

A multi-step form with a progress bar increases completion rates. Use cases:

Long qualification forms (onboarding, quotes)
Surveys and polls
Multi-step signup flows

How to Add a Progress Bar to a Webflow Form

Example

1. Create your form steps

2. Add the Next and Previous buttons

3. Add this script in the <body>

This script doesn’t validate fields before moving to the next step. To add validation, insert a check in the btn-next listener: loop through the current step’s inputs with checkValidity() and block progression if a field is invalid.

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials