How to Add a Progress Bar to a Webflow Form

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

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);

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