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
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);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
bon à savoir
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.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
