CRO / Conversion

6 min

Comment ajouter une barre de progression dans un formulaire Webflow ?

Apprenez à ajouter une barre de progression par étapes dans un formulaire multi-steps Webflow avec JavaScript.

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une barre de progression par étapes dans un formulaire Webflow multi-steps.

Exemple

Étape 1 / 3

Vos coordonnées

Votre projet

Vos besoins

🎉

Demande envoyée !

Nous vous répondons sous 24h.

Classe CSS	Élément	Rôle
form-step	Div	Conteneur d'une étape du formulaire
progress-bar	Div	Barre de progression visuelle
step-indicator	Text Block	Affiche 'Étape X / Y'

1. Créez vos étapes de formulaire

Divisez votre formulaire en plusieurs Divs avec la classe form-step. Mettez toutes les étapes en display: none sauf la première. Créez un Div progress-bar avec width: 0% et une hauteur de 4px. Ajoutez un Text Block step-indicator.

2. Ajoutez les boutons Suivant et Précédent

Dans chaque étape, ajoutez un bouton "Suivant" avec la classe btn-next et un bouton "Précédent" avec la classe btn-prev (masqué sur la première étape).

3. Ajoutez ce script dans le <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 = 'Étape ' + (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);

bon à savoir

Ce script ne valide pas les champs avant de passer à l'étape suivante. Pour ajouter une validation, insérez une vérification dans le listener btn-next : parcourez les inputs de l'étape courante avec checkValidity() et bloquez la progression si un champ est invalide.

Conclusion

Un formulaire multi-steps avec progress bar augmente le taux de complétion. Cas d'usage :

Formulaires de qualification longs (onboarding, devis)
Enquêtes et sondages
Processus d'inscription en plusieurs étapes

Comment ajouter une barre de progression dans un formulaire Webflow ?

Exemple

1. Créez vos étapes de formulaire

2. Ajoutez les boutons Suivant et Précédent

3. Ajoutez ce script dans le <body>

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires