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

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss