Pourquoi les formulaires multi-étapes sont un choix judicieux pour la collecte de données amicales par les utilisateurs

Les formulaires longue page frustrent souvent les utilisateurs et entraînent des taux d'abandon plus élevés. La rupture d'un formulaire en étapes logiques – un écran à la fois – réduit la charge cognitive et rend le processus plus gérable. Les formulaires multiétapes guident les utilisateurs à travers chaque information sans les surcharger, ce qui améliore les taux d'achèvement et la qualité des données.

D'un point de vue technique, JavaScript vous donne la flexibilité de cacher et afficher les sections, valider les entrées avant d'avancer et fournir des retours immédiats. Une fois combinés à une validation adéquate, les formulaires multi-étapes peuvent garantir que seules des données propres et précises sont soumises à votre serveur.

Dans cet article, vous apprendrez à construire un solide formulaire multi-étapes en utilisant le JavaScript vanillé, y compris la navigation, la validation côté client, les indicateurs de progrès et les meilleures pratiques d'accessibilité.

Structure de base d'un formulaire à plusieurs étapes

Chaque formulaire en plusieurs étapes suit un schéma similaire :

  • Un contenant de forme[ qui enveloppe toutes les étapes
  • – Chaque étape est un qui devient visible ou caché
  • Boutons de navigation[ – - -Suivant et -Précédent pour passer entre les étapes
  • Logique de validation[ – vérifie que les champs de l'étape actuelle sont valides avant de permettre à l'utilisateur de procéder

Vous pouvez également ajouter un indicateur de progrès (p. ex., nombre d'étapes ou barre de progrès) pour montrer aux utilisateurs où ils se trouvent et combien il en reste.

Construire la Shell HTML

Commencez par une structure HTML propre. Chaque étape est une avec une classe de . Seule la première étape est visible par défaut; les autres sont cachés avec .

<form id="multiStepForm">
 <!-- Step 1: Personal Information -->
 <div class="step active" id="step1">
 <h3>Step 1: Personal Information</h3>
 <label for="name">Full Name</label>
 <input type="text" id="name" name="name" required />
 <button type="button" class="next-btn">Next</button>
 </div>

 <!-- Step 2: Contact Details -->
 <div class="step" id="step2" style="display:none">
 <h3>Step 2: Contact Details</h3>
 <label for="email">Email Address</label>
 <input type="email" id="email" name="email" required />
 <label for="phone">Phone Number</label>
 <input type="tel" id="phone" name="phone" />
 <button type="button" class="prev-btn">Previous</button>
 <button type="button" class="next-btn">Next</button>
 </div>

 <!-- Step 3: Confirmation -->
 <div class="step" id="step3" style="display:none">
 <h3>Step 3: Review & Submit</h3>
 <p>Please review your information before submitting.</p>
 <button type="button" class="prev-btn">Previous</button>
 <button type="submit">Submit</button>
 </div>
</form>

Important: Utilisez pour les boutons de navigation pour empêcher la soumission accidentelle de formulaire. Seul le bouton final -Submit=2 devrait avoir .

CSS: Gestion de la visibilité et du style

Au lieu de se fier à en ligne, it=s cleaner pour utiliser des classes CSS. Ajoutez ce qui suit à votre feuille de style :

.step {
 display: none;
}
.step.active {
 display: block;
}

Puis, dans le HTML, supprimer les attributs inline et ajouter seulement à la première étape. JavaScript va basculer la classe pour afficher/cacher les étapes.

Vous pouvez également ajouter des transitions, des barres de progression et un espacement cohérent.

.step {
 opacity: 0;
 transition: opacity 0.3s ease;
}
.step.active {
 opacity: 1;
 display: block;
}

Cela crée un effet de fade-in lisse lors du changement d'étapes.

JavaScript: Navigation et validation

Maintenant, nous allons écrire la logique de base: se déplacer entre les étapes, valider chaque étape des champs, et mettre à jour l'interface utilisateur.

Sélection des éléments DOM

const steps = document.querySelectorAll('.step');
const nextBtns = document.querySelectorAll('.next-btn');
const prevBtns = document.querySelectorAll('.prev-btn');
let currentStep = 0; // index of the currently visible step

Fonctions de navigation

function showStep(stepIndex) {
 steps.forEach((step, index) => {
 step.classList.toggle('active', index === stepIndex);
 });
 currentStep = stepIndex;
}

function nextStep() {
 if (validateStep(currentStep)) {
 showStep(currentStep + 1);
 }
}

function prevStep() {
 showStep(currentStep - 1);
}

Validation par étape

Écrivez une fonction qui vérifie tous les champs requis dans l'étape courante et affiche les messages d'erreur. Pour plus de simplicité, nous utiliserons dans cet exemple, mais un formulaire de production devrait afficher les messages d'erreur en ligne à côté des champs.

function validateStep(stepIndex) {
 const currentStepDiv = steps[stepIndex];
 const inputs = currentStepDiv.querySelectorAll('input[required]');

 for (let input of inputs) {
 if (!input.value.trim()) {
 alert(`Please fill in "${input.placeholder || input.name}".`);
 input.focus();
 return false;
 }
 // Additional validation per type can be added here
 if (input.type === 'email' && !isValidEmail(input.value)) {
 alert('Please enter a valid email address.');
 input.focus();
 return false;
 }
 }
 return true;
}

function isValidEmail(email) {
 const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 return re.test(email.trim());
}

Joignez les auditeurs de l'événement

nextBtns.forEach(btn => btn.addEventListener('click', nextStep));
prevBtns.forEach(btn => btn.addEventListener('click', prevStep));

Note: Cela suppose que chaque étape a exactement un bouton -Suivant et un bouton -Précédent. Pour les formulaires plus complexes, vous pouvez utiliser des attributs de données (par exemple, ) pour cartographier les boutons à des étapes spécifiques.

Techniques de validation avancées

Bien que les vérifications de base requises sur le terrain soient essentielles, les formulaires modernes bénéficient d'une validation plus sophistiquée qui améliore l'expérience utilisateur et la qualité des données.

Validation des contraintes HTML5

Les navigateurs modernes supportent la validation intégrée pour , , , , etc. Vous pouvez utiliser la méthode et la pseudo-classe pour le style.

function validateStepHTML5(stepIndex) {
 const currentStepDiv = steps[stepIndex];
 const inputs = currentStepDiv.querySelectorAll('input, select, textarea');

 for (let input of inputs) {
 if (!input.checkValidity()) {
 input.reportValidity(); // shows the browser's native error tooltip
 return false;
 }
 }
 return true;
}

Validation en temps réel en ligne

Pour donner aux utilisateurs des commentaires immédiats au fur et à mesure qu'ils saisissent, écoutez les événements ou sur des champs individuels.

const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', function() {
 if (this.value && !isValidEmail(this.value)) {
 this.classList.add('invalid');
 // show an error message next to the field
 } else {
 this.classList.remove('invalid');
 }
});

Validation personnalisée du Regex

Pour les champs comme les numéros de téléphone, les codes postaux ou les mots de passe, utilisez attributs ou regex personnalisé. Exemple pour un numéro de téléphone américain (10 chiffres):

<input type="tel" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890" />

Puis, en JavaScript, vous pouvez vérifier ou tester la valeur avec votre propre regex.

Ajouter un indicateur de progrès

Une barre de progression ou un compteur d'étapes aide les utilisateurs à comprendre combien d'étapes restent et réduit l'anxiété.

Structure HTML pour les étapes de progrès

<div id="progress">
 <span class="progress-step active">1</span>
 <span class="progress-step">2</span>
 <span class="progress-step">3</span>
</div>

Style CSS

.progress-step {
 display: inline-block;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 border-radius: 50%;
 background: #ccc;
 color: #fff;
}
.progress-step.active {
 background: #007bff;
}

Mise à jour JavaScript

À l'intérieur de la fonction , mettre à jour les indicateurs de progrès :

function showStep(stepIndex) {
 steps.forEach((step, index) => {
 step.classList.toggle('active', index === stepIndex);
 });
 document.querySelectorAll('.progress-step').forEach((el, index) => {
 el.classList.toggle('active', index === stepIndex);
 });
 currentStep = stepIndex;
}

Vous pouvez également ajouter une barre de progression linéaire en calculant le pourcentage : et en réglant la largeur d'un .

Manipulation des cas de bord et de l'expérience utilisateur

Pour créer un formulaire multiétapes prêt à la production, il faut tenir compte de ces aspects supplémentaires :

Les utilisateurs devraient pouvoir avancer avec la touche Entrer (déclencher le bouton -Suivant) et reculer avec Escape ou un raccourci dédié. Assurez-vous que tous les boutons et champs sont focalisables et que l'ordre des onglets est logique.

document.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && e.target.closest('.step.active')) {
 const nextBtn = document.querySelector('.step.active .next-btn');
 if (nextBtn) nextBtn.click();
 }
});

Prévenir les présentations multiples

Désactiver le bouton soumettre après le premier clic pour éviter les présentations de formulaires en double :

const submitBtn = document.querySelector('button[type="submit"]');
submitBtn.addEventListener('click', function() {
 this.disabled = true;
 this.textContent = 'Submitting…';
 // The form will submit naturally after this
});

Stockage temporaire des données

Si l'utilisateur rafraîchit accidentellement la page, ils perdent toutes les données saisies. Envisagez de stocker les valeurs de champ dans ou au fur et à mesure que l'utilisateur progresse.

Considérations en matière de sécurité

La validation côté client est uniquement pour l'expérience utilisateur ; validez et désinfectez toujours les données sur le serveur. Utilisez HTTPS et envisagez d'ajouter des jetons CSRF pour les formulaires sensibles.

Accessibilité (A11y) Pratiques exemplaires

Les formulaires à plusieurs étapes peuvent être difficiles pour les utilisateurs de lecture d'écran si ce n'est pas correctement codé.

  • Utiliser et pour regrouper logiquement chaque étape.
  • Annoncez des changements d'étape en utilisant Régions en direct d'ARIA (p. ex. ) afin que les lecteurs d'écran sachent que du nouveau contenu est apparu.
  • Ajouter à l'étape actuelle de progrès.
  • Assurez-vous que les messages d'erreur sont associés programmatiquement aux champs d'entrée (utilisez .
  • Assurez-vous que tous les éléments interactifs sont accessibles au clavier et qu'ils ont des indicateurs de mise au point visibles.
<div class="step active" id="step1" aria-live="polite">
 <h3>Step 1 of 3: Personal Information</h3>
 <label for="name">Full Name</label>
 <input type="text" id="name" name="name" required />
 <span id="name-error" class="error" role="alert"></span>
</div>

Lorsque la validation échoue, insérez le message d'erreur dans le et il sera annoncé.

Tout rassembler : un exemple complet

Vous trouverez ci-dessous une version condensée d'un formulaire multi-étapes entièrement fonctionnel avec validation et indicateur de progrès. Vous pouvez adapter cette structure à vos propres projets.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Multi‑Step Form with Validation</title>
 <style>
 .step { display: none; }
 .step.active { display: block; }
 .progress-step { background: #ccc; padding: 5px 10px; margin: 0 2px; }
 .progress-step.active { background: #007bff; color: #fff; }
 .error { color: red; font-size: 0.9em; }
 </style>
</head>
<body>
 <form id="multiStepForm" novalidate>
 <div id="progress">
 <span class="progress-step active">1</span>
 <span class="progress-step">2</span>
 <span class="progress-step">3</span>
 </div>

 <div class="step active" id="step1">
 <h3>Step 1: Personal Information</h3>
 <label for="name">Full Name *</label>
 <input type="text" id="name" name="name" required minlength="2">
 <button type="button" class="next-btn">Next</button>
 </div>

 <div class="step" id="step2">
 <h3>Step 2: Contact Details</h3>
 <label for="email">Email *</label>
 <input type="email" id="email" name="email" required>
 <button type="button" class="prev-btn">Previous</button>
 <button type="button" class="next-btn">Next</button>
 </div>

 <div class="step" id="step3">
 <h3>Step 3: Submit</h3>
 <p>Review your details and submit.</p>
 <button type="button" class="prev-btn">Previous</button>
 <button type="submit">Submit</button>
 </div>
 </form>

 <script>
 const steps = document.querySelectorAll('.step');
 const nextBtns = document.querySelectorAll('.next-btn');
 const prevBtns = document.querySelectorAll('.prev-btn');
 const progressSteps = document.querySelectorAll('.progress-step');
 let currentStep = 0;

 function showStep(index) {
 steps.forEach((step, i) => step.classList.toggle('active', i === index));
 progressSteps.forEach((step, i) => step.classList.toggle('active', i === index));
 currentStep = index;
 }

 function validateCurrentStep() {
 const stepDiv = steps[currentStep];
 const inputs = stepDiv.querySelectorAll('input[required]');
 for (let input of inputs) {
 if (!input.checkValidity()) {
 input.reportValidity();
 return false;
 }
 }
 return true;
 }

 nextBtns.forEach(btn => {
 btn.addEventListener('click', function(e) {
 if (validateCurrentStep()) {
 showStep(currentStep + 1);
 }
 });
 });

 prevBtns.forEach(btn => {
 btn.addEventListener('click', function(e) {
 showStep(currentStep - 1);
 });
 });

 // Optional: handle Enter key
 document.addEventListener('keydown', function(e) {
 if (e.key === 'Enter' && e.target.closest('.step.active')) {
 const nextBtn = document.querySelector('.step.active .next-btn');
 if (nextBtn) nextBtn.click();
 }
 });
 </script>
</body>
</html>

Cet exemple utilise la validation HTML5 () et les messages d'erreur intégrés. Vous pouvez remplacer par un formatage d'erreur personnalisé si nécessaire.

Lecture et ressources supplémentaires

Pour approfondir votre compréhension de la validation de formulaire et de l'accessibilité, consultez ces ressources :

Envelopper

Les formulaires multi-étapes construits avec JavaScript sont un outil puissant pour améliorer l'expérience utilisateur et la précision des données. En cassant un formulaire long en sections gérables, en validant l'entrée à chaque étape et en fournissant des repères de progrès visuels, vous pouvez réduire considérablement l'abandon de formulaire et recueillir des données plus propres.

Commencez par une solide structure HTML, couchez en CSS pour obtenir des commentaires visuels, puis ajoutez JavaScript pour la navigation et la validation. Élargissez votre formulaire avec validation en temps réel, indicateurs de progrès et fonctionnalités d'accessibilité pour le rendre utilisable pour tout le monde. Enfin, rappelez-vous toujours que la validation côté client est une commodité – ne jamais compter sur elle seule. Valider toutes les données sur le serveur aussi bien.

Expérimentez avec différents modèles et techniques de validation pour répondre aux besoins de votre application. Les techniques présentées ici fournissent une base que vous pouvez adapter et étendre pour tout projet de formulaire à plusieurs étapes.