Créer un formulaire efficace en plusieurs étapes pour une meilleure expérience utilisateur —

Pour un formulaire à plusieurs étapes, la planification implique de structurer logiquement les questions en plusieurs étapes, de regrouper les questions similaires et de minimiser le nombre d’étapes et la quantité d’informations requises pour chaque étape. Ce qui doit être recherché est ce qui rend chaque étape ciblée et gérable.

Dans ce didacticiel, nous allons créer un formulaire en plusieurs étapes pour une candidature à un emploi. Voici les détails que nous allons demander au demandeur à chaque étape :

• Informations personnelles
  Recueille le nom, l’adresse e-mail et le numéro de téléphone du candidat.
• Expérience professionnelle
  Recueille l’entreprise la plus récente du candidat, son titre de poste et ses années d’expérience.
• Compétences et qualifications
  Le candidat liste ses compétences et sélectionne son diplôme le plus élevé.
• Vérifier et soumettre
  Cette étape ne collectera aucune information. Au lieu de cela, il offre au demandeur la possibilité de revenir en arrière et de revoir les informations saisies aux étapes précédentes du formulaire avant de le soumettre.

Vous pouvez considérer la structuration de ces questions comme un moyen numérique d’apprendre à connaître quelqu’un. Vous ne pouvez pas rencontrer quelqu’un pour la première fois et lui poser des questions sur son expérience professionnelle sans lui demander d’abord son nom.

Sur la base des étapes ci-dessus, voici à quoi devrait ressembler le corps de notre code HTML avec notre formulaire. Premièrement, le principal <form> élément:

<form id="jobApplicationForm">
  <!-- Step 1: Personal Information -->
  <!-- Step 2: Work Experience -->
  <!-- Step 3: Skills & Qualifications -->
  <!-- Step 4: Review & Submit -->
</form>

Étape 1 sert à renseigner des informations personnelles, telles que le nom, l’adresse e-mail et le numéro de téléphone du candidat :

<form id="jobApplicationForm">
  <!-- Step 1: Personal Information -->
  <fieldset class="step" id="step-1">
    <legend id="step1Label">Step 1: Personal Information</legend>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required />
    <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" required />
  </fieldset>

  <!-- Step 2: Work Experience -->
  <!-- Step 3: Skills & Qualifications -->
  <!-- Step 4: Review & Submit -->
</form>

Une fois que le candidat aura terminé la première étape, nous le dirigerons vers Étape 2en nous concentrant sur leur expérience professionnelle afin que nous puissions collecter des informations telles que leur entreprise la plus récente, leur titre de poste et leurs années d’expérience. Nous allons ajouter un nouveau <fieldset> avec ces entrées:

<form id="jobApplicationForm">
  <!-- Step 1: Personal Information -->

  <!-- Step 2: Work Experience -->
  <fieldset class="step" id="step-2" hidden>
    <legend id="step2Label">Step 2: Work Experience</legend>
    <label for="company">Most Recent Company</label>
    <input type="text" id="company" name="company" required />
    <label for="jobTitle">Job Title</label>
    <input type="text" id="jobTitle" name="jobTitle" required />
    <label for="yearsExperience">Years of Experience</label>
    <input
      type="number"
      id="yearsExperience"
      name="yearsExperience"
      min="0"
      required
    />
  </fieldset>

  <!-- Step 3: Skills & Qualifications -->
  <!-- Step 4: Review & Submit -->
</form>

Étape 3 il s’agit pour le candidat d’énumérer ses compétences et ses qualifications pour l’emploi pour lequel il postule :

<form id="jobApplicationForm">
  <!-- Step 1: Personal Information -->
  <!-- Step 2: Work Experience -->

  <!-- Step 3: Skills & Qualifications -->
  <fieldset class="step" id="step-3" hidden>
    <legend id="step3Label">Step 3: Skills & Qualifications</legend>
    <label for="skills">Skill(s)</label>
    <textarea id="skills" name="skills" rows="4" required></textarea>
    <label for="highestDegree">Degree Obtained (Highest)</label>
    <select id="highestDegree" name="highestDegree" required>
      <option value="">Select Degree</option>
      <option value="highschool">High School Diploma</option>
      <option value="bachelor">Bachelor's Degree</option>
      <option value="master">Master's Degree</option>
      <option value="phd">Ph.D.</option>
    </select>
  </fieldset>
  <!-- Step 4: Review & Submit -->
  <fieldset class="step" id="step-4" hidden>
    <legend id="step4Label">Step 4: Review & Submit</legend>
    <p>Review your information before submitting the application.</p>
    <button type="submit">Submit Application</button>
  </fieldset>
</form>

Et enfin, nous autoriserons le candidat à examiner ses informations avant de les soumettre :

<form id="jobApplicationForm">
  <!-- Step 1: Personal Information -->
  <!-- Step 2: Work Experience -->
  <!-- Step 3: Skills & Qualifications -->

  <!-- Step 4: Review & Submit -->
  <fieldset class="step" id="step-4" hidden>
    <legend id="step4Label">Step 4: Review & Submit</legend>
    <p>Review your information before submitting the application.</p>
    <button type="submit">Submit Application</button>
  </fieldset>
</form>

Avis: Nous avons ajouté un hidden attribuer à chaque fieldset élément mais le premier. Cela garantit que l’utilisateur ne voit que la première étape. Une fois qu’ils ont terminé la première étape, ils peuvent compléter leur expérience professionnelle lors de la deuxième étape en cliquant sur un bouton de navigation. Nous ajouterons ce bouton plus tard.

Ajout de styles

Pour rester concentré, nous n’allons pas mettre l’accent sur les styles dans ce didacticiel. Ce que nous ferons pour garder les choses simples, c’est tirer parti de Cadre de style simple.css pour que le formulaire soit en bon état pour le reste du tutoriel.

Si vous suivez, nous pouvons inclure les styles de Simple dans le document <head>:

<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />

Et à partir de là, allez-y et créez un style.css fichier avec les styles suivants que j’ai pliés.

<details>
  <summary>View CSS</summary>
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main {
    padding: 0 30px;
  }
  h1 {
    font-size: 1.8rem;
    text-align: center;
  }
  .stepper {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
  }
  form {
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
    padding: 12px;
  }
  input,
  textarea,
  select {
    outline: none;
  }
  input:valid,
  textarea:valid,
  select:valid,
  input:focus:valid,
  textarea:focus:valid,
  select:focus:valid {
    border-color: green;
  }
  input:focus:invalid,
  textarea:focus:invalid,
  select:focus:invalid {
    border: 1px solid red;
  }
</details>

Navigation et validation des formulaires

Un moyen simple de gâcher l’expérience utilisateur pour un formulaire en plusieurs étapes consiste à attendre que l’utilisateur arrive à la dernière étape du formulaire avant de l’informer de toute erreur qu’il a commise en cours de route. Chaque étape du formulaire doit être validée pour détecter les erreurs avant de passer à l’étape suivante, et des messages d’erreur descriptifs doivent être affichés pour permettre aux utilisateurs de comprendre ce qui ne va pas et comment y remédier.

Désormais, la seule partie visible de notre formulaire est la première étape. Pour remplir le formulaire, les utilisateurs doivent pouvoir accéder aux autres étapes. Nous allons utiliser plusieurs boutons pour y parvenir. La première étape va avoir un Suivant bouton. Les deuxième et troisième étapes auront à la fois un Précédent et un Suivant bouton, et la quatrième étape va avoir un Précédent et un Soumettre bouton.

<form id="jobApplicationForm">
  <!-- Step 1: Personal Information -->
  <fieldset>
    <!-- ... -->
    <button type="button" class="next" onclick="nextStep()">Next</button>
  </fieldset>

  <!-- Step 2: Work Experience -->
  <fieldset>
    <!-- ... -->
    <button type="button" class="previous" onclick="previousStep()">Previous</button>
    <button type="button" class="next" onclick="nextStep()">Next</button>
  </fieldset>

  <!-- Step 3: Skills & Qualifications -->
  <fieldset>
    <!-- ... -->
    <button type="button" class="previous" onclick="previousStep()">Previous</button>
    <button type="button" class="next" onclick="nextStep()">Next</button>
  </fieldset>

  <!-- Step 4: Review & Submit -->
  <fieldset>
    <!-- ... -->
    <button type="button" class="previous" onclick="previousStep()">Previous</button>
    <button type="submit">Submit Application</button>
  </fieldset>
</form>

Avis: Nous avons ajouté onclick attributs au Précédent et Suivant des boutons pour les lier à leurs fonctions JavaScript respectives : previousStep() et nextStep().

Le bouton « Suivant »

Le nextStep() La fonction est liée au bouton Suivant. Chaque fois que l’utilisateur clique sur le bouton Suivant, le nextStep() La fonction vérifiera d’abord que tous les champs de l’étape à laquelle se trouve l’utilisateur ont été correctement remplis avant de passer à l’étape suivante. Si les champs n’ont pas été remplis correctement, il affiche des messages d’erreur, informant l’utilisateur qu’il a fait quelque chose de mal et lui indiquant quoi faire pour faire disparaître les erreurs.

Avant de passer à la mise en œuvre du nextStep fonction, nous devons définir certaines variables car elles seront nécessaires dans la fonction. Tout d’abord, nous avons besoin des champs de saisie du DOM afin de pouvoir les vérifier pour nous assurer qu’ils sont valides.

// Step 1 fields
const name = document.getElementById("name");
const email = document.getElementById("email");
const phone = document.getElementById("phone");

// Step 2 fields
const company = document.getElementById("company");
const jobTitle = document.getElementById("jobTitle");
const yearsExperience = document.getElementById("yearsExperience");

// Step 3 fields
const skills = document.getElementById("skills");
const highestDegree = document.getElementById("highestDegree");

Ensuite, nous aurons besoin d’un tableau pour stocker nos messages d’erreur.

let errorMsgs = [];

De plus, nous aurions besoin d’un élément dans le DOM où nous pourrions insérer ces messages d’erreur après leur génération. Cet élément doit être placé dans le HTML juste en dessous du dernier fieldset balise de fermeture :

<div id="errorMessages" style="color: rgb(253, 67, 67)"></div>

Ajoutez ce qui précède div au code JavaScript en utilisant la ligne suivante :

const errorMessagesDiv = document.getElementById("errorMessages");

Et enfin, nous avons besoin d’une variable pour suivre l’étape en cours.

let currentStep = 1;

Maintenant que nous avons toutes nos variables en place, voici l’implémentation du nextstep() fonction:

function nextStep() {
  errorMsgs = [];
  errorMessagesDiv.innerText = "";

  switch (currentStep) {
    case 1:
      addValidationErrors(name, email, phone);
      validateStep(errorMsgs);
      break;

    case 2:
      addValidationErrors(company, jobTitle, yearsExperience);
      validateStep(errorMsgs);
      break;

    case 3:
      addValidationErrors(skills, highestDegree);
      validateStep(errorMsgs);
      break;
  }
}

Au moment où Suivant est enfoncé, notre code vérifie d’abord à quelle étape se trouve actuellement l’utilisateur et, sur la base de ces informations, il valide les données pour cette étape spécifique en appelant le addValidationErrors() fonction. S’il y a des erreurs, nous les affichons. Ensuite, le formulaire appelle le validateStep() fonction pour vérifier qu’il n’y a pas d’erreurs avant de passer à l’étape suivante. S’il y a des erreurs, cela empêche l’utilisateur de passer à l’étape suivante.

Chaque fois que le nextStep() fonction s’exécute, les messages d’erreur sont effacés en premier pour éviter d’ajouter des erreurs d’une étape différente aux erreurs existantes ou de ré-ajouter des messages d’erreur existants lorsque la fonction addValidationErrors la fonction s’exécute. Le addValidationErrors La fonction est appelée pour chaque étape en utilisant les champs de cette étape comme arguments.

Voici comment le addValidationErrors la fonction est implémentée :

function addValidationErrors(fieldOne, fieldTwo, fieldThree = undefined) {
  if (!fieldOne.checkValidity()) {
    const label = document.querySelector(`label[for="${fieldOne.id}"]`);
    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);
  }

  if (!fieldTwo.checkValidity()) {
    const label = document.querySelector(`label[for="${fieldTwo.id}"]`);
    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);
  }

  if (fieldThree && !fieldThree.checkValidity()) {
    const label = document.querySelector(`label[for="${fieldThree.id}"]`);
    errorMsgs.push(`Please Enter A Valid ${label.textContent}`);
  }

  if (errorMsgs.length > 0) {
    errorMessagesDiv.innerText = errorMsgs.join("\n");
  }
}

C’est ainsi que le validateStep() la fonction est définie :

function validateStep(errorMsgs) {
  if (errorMsgs.length === 0) {
    showStep(currentStep + 1);
  }
}

Le validateStep() la fonction vérifie les erreurs. S’il n’y en a pas, on passe à l’étape suivante à l’aide du showStep() fonction.

function showStep(step) {
  steps.forEach((el, index) => {
    el.hidden = index + 1 !== step;
  });
  currentStep = step;
}

Le showStep() La fonction nécessite les quatre jeux de champs du DOM. Ajoutez la ligne suivante en haut du code JavaScript pour rendre les jeux de champs disponibles :

const steps = document.querySelectorAll(".step");

Qu’est-ce que showStep() la fonction fait est de parcourir tous les fieldsets dans notre formulaire et cacher quoi que ce soit fieldset n’est pas égal à celui vers lequel nous naviguons. Ensuite, il met à jour le currentStep variable pour être égale à l’étape vers laquelle nous naviguons.

Le bouton « Précédent »

Le previousStep() la fonction est liée à la Précédent bouton. Chaque fois que vous cliquez sur le bouton précédent, de la même manière que pour le nextStep fonction, les messages d’erreur sont également effacés de la page et la navigation est également gérée par le showStep fonction.

function previousStep() {
  errorMessagesDiv.innerText = "";
  showStep(currentStep - 1);
}

Chaque fois que le showStep() la fonction est appelée avec « currentStep - 1 » comme argument (comme dans ce cas), on revient à l’étape précédente, tandis que le passage à l’étape suivante se fait en appelant le showStep() fonction avec « currentStep + 1» comme argument (comme dans le cas du validateStep() fonction).

Améliorer l’expérience utilisateur avec des repères visuels

Une autre façon d’améliorer l’expérience utilisateur pour un formulaire en plusieurs étapes consiste à intégrer des repères visuels, des éléments qui donneront aux utilisateurs des commentaires sur le processus dans lequel ils se trouvent. Ces éléments peuvent inclure un indicateur de progression ou un stepper pour aider l’utilisateur à connaître l’étape exacte à laquelle il se trouve.

Intégrer un stepper

Pour intégrer un stepper dans notre formulaire (un peu comme celui-ci de Material Design), la première chose à faire est de l’ajouter au code HTML juste en dessous de l’ouverture <form> étiqueter.

<form id="jobApplicationForm">
  <div class="stepper">
    <span><span class="currentStep">1</span>/4</span>
  </div>
  <!-- ... -->
</form>

Ensuite, nous devons interroger la partie du stepper qui représentera l’étape en cours. Il s’agit de la balise span avec le nom de classe de currentStep.

const currentStepDiv = document.querySelector(".currentStep");

Maintenant, nous devons mettre à jour la valeur du pas à pas chaque fois que vous cliquez sur les boutons précédent ou suivant. Pour ce faire, nous devons mettre à jour le showStep() fonction en y ajoutant la ligne suivante :

currentStepDiv.innerText = currentStep;

Cette ligne est ajoutée au showStep() fonctionner parce que le showStep() La fonction est responsable de la navigation entre les étapes et de la mise à jour du currentStep variable. Ainsi, chaque fois que le currentStep variable est mise à jour, le currentStepDiv doit également être mis à jour pour refléter ce changement.

Stockage et récupération des données utilisateur

L’un des principaux moyens d’améliorer l’expérience utilisateur du formulaire consiste à stocker les données utilisateur dans le navigateur. Les formulaires en plusieurs étapes sont généralement longs et nécessitent que les utilisateurs saisissent de nombreuses informations les concernant. Imaginez un utilisateur remplissant 95 % d’un formulaire, puis appuyant accidentellement sur le F5 bouton de leur clavier et perdant toute leur progression. Ce serait une très mauvaise expérience pour l’utilisateur.

En utilisant localStoragenous pouvons stocker les informations utilisateur dès leur saisie et les récupérer dès que le contenu DOM est chargé, afin que les utilisateurs puissent toujours continuer à remplir leurs formulaires là où ils l’ont laissé. Pour ajouter cette fonctionnalité à nos formulaires, nous pouvons commencer par enregistrer les informations de l’utilisateur dès leur saisie. Ceci peut être réalisé en utilisant le input événement.

Avant d’ajouter le input écouteur d’événement, récupérez l’élément de formulaire du DOM :

const form = document.getElementById("jobApplicationForm");

Nous pouvons maintenant ajouter le input écouteur d’événement :

// Save data on each input event
form.addEventListener("input", () => {
  const formData = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
    phone: document.getElementById("phone").value,
    company: document.getElementById("company").value,
    jobTitle: document.getElementById("jobTitle").value,
    yearsExperience: document.getElementById("yearsExperience").value,
    skills: document.getElementById("skills").value,
    highestDegree: document.getElementById("highestDegree").value,
  };
  localStorage.setItem("formData", JSON.stringify(formData));
});

Ensuite, nous devons ajouter du code pour nous aider à récupérer les données utilisateur une fois le contenu DOM chargé.

window.addEventListener("DOMContentLoaded", () => {
  const savedData = JSON.parse(localStorage.getItem("formData"));
  if (savedData) {
    document.getElementById("name").value = savedData.name || "";
    document.getElementById("email").value = savedData.email || "";
    document.getElementById("phone").value = savedData.phone || "";
    document.getElementById("company").value = savedData.company || "";
    document.getElementById("jobTitle").value = savedData.jobTitle || "";
    document.getElementById("yearsExperience").value = savedData.yearsExperience || "";
    document.getElementById("skills").value = savedData.skills || "";
    document.getElementById("highestDegree").value = savedData.highestDegree || "";
  }
});

Enfin, il est recommandé de supprimer les données de localStorage dès qu’il n’est plus nécessaire :

// Clear data on form submit
form.addEventListener('submit', () => {
  // Clear localStorage once the form is submitted
  localStorage.removeItem('formData');
}); 

Ajout de la valeur de l’étape actuelle à localStorage

Si l’utilisateur ferme accidentellement son navigateur, il devrait pouvoir revenir là où il s’était arrêté. Cela signifie que la valeur actuelle du pas doit également être enregistrée dans localStorage.

Pour enregistrer cette valeur, ajoutez la ligne suivante au showStep() fonction:

localStorage.setItem("storedStep", currentStep);

Nous pouvons désormais récupérer la valeur de pas actuelle et ramener les utilisateurs là où ils s’étaient arrêtés chaque fois que le contenu DOM se charge. Ajoutez le code suivant au DOMContentLoaded gestionnaire pour le faire :

const storedStep = localStorage.getItem("storedStep");

if (storedStep) {
    const storedStepInt = parseInt(storedStep);
    steps.forEach((el, index) => {
      el.hidden = index + 1 !== storedStepInt;
    });
    currentStep = storedStepInt;
    currentStepDiv.innerText = currentStep;
  }

N’oubliez pas non plus d’effacer la valeur de pas actuelle de localStorage lorsque le formulaire est soumis.

localStorage.removeItem("storedStep");

La ligne ci-dessus doit être ajoutée au gestionnaire de soumission.

Conclusion

La création de formulaires en plusieurs étapes peut contribuer à améliorer l’expérience utilisateur pour la saisie de données complexes. En planifiant soigneusement les étapes, en mettant en œuvre la validation des formulaires à chaque étape et en stockant temporairement les données utilisateur dans le navigateur, vous permettez aux utilisateurs de remplir plus facilement de longs formulaires.

Pour la mise en œuvre complète de ce formulaire en plusieurs étapes, vous pouvez accéder au code complet sur GitHub.

(gg, ouais)