Subscribe to get the weekly post

Or

Follow me

Formulaire à plusieurs étapes avec HTML/CSS/JavaScript

Publié 5 months ago 8 min de lecture

Le formulaire pas à pas est une fonctionnalité intéressante et utile concernant l'expérience utilisateur, surtout si vous avez un formulaire long. Dans cet article, je vais créer un formulaire pas à pas sympa avec HTML, CSS et JavaScript. Vous pouvez le voir en direct sur : Codepen : Formulaire pas à pas

1. HTML

Comme vous pouvez le voir, le fichier HTML est relativement simple avec plusieurs classes devrais-je dire.

<main>
  <div class="stepper">
    <div class="step--1 step-active">Step 1</div>
    <div class="step--2">Step 2</div>
    <div class="step--3">Step 3</div>
    <div class="step--4">Finish</div>
  </div>
  <form class="form form-active">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Personal Info
      </h1>

      <p class="form--header-text">
        Tell us more about you.
      </p>
    </div>
    <input type="text" placeholder="Name" />
    <input type="text" placeholder="Email" />
    <input type="text" placeholder="Password" />
    <button class="form__btn" id="btn-1">Next</button>
  </form>
  <form class="form">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Company Info
      </h1>

      <p class="form--header-text">
        Tell us more about your company.
      </p>
    </div>

    <input type="text" placeholder="Company Name" />
    <input type="text" placeholder="Job title" />
    <input type="text" placeholder="Location" />
    <button class="form__btn" id="btn-2-prev">Previous</button>
    <button class="form__btn" id="btn-2-next">Next</button>
  </form>
  <form class="form">
    <div class="form--header-container">
      <h1 class="form--header-title">
        Social account
      </h1>

      <p class="form--header-text">
        Tell us more about your social account.
      </p>
    </div>
    <input type="text" placeholder="Linkedin" />
    <input type="text" placeholder="Twitter" />
    <input type="text" placeholder="Github" />
    <button class="form__btn" id="btn-3">Submit</button>
  </form>
  <div class="form--message"></div>
</main>

À côté de la balise main, je définis d'abord undiv qui contient l'élément stepper. Ensuite, nous avons trois formulaires avec différents id de bouton qui feront bientôt l'effet pas à pas avec JavaScript.

2. CSS

Ici, nous commençons par quelques réinitialisation et définissons font-family etbackground-color pour la balise body.

@import url("https://fonts.googleapis.com/css?family=Nunito&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f5f6f7;
  font-family: "Nunito", sans-serif;
}

main {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

Ensuite, pour la balise main, nous utilisonsflex pour centrer l'élément relativement à la balise body à l'aide des propriétésjustify-content et align-items.

.stepper {
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5%;
}

.step--1,
.step--2,
.step--3,
.step--4 {
  width: 5rem;
  padding: 0.5rem 0;
  background: #fff;
  color: #666;
  text-align: center;
}
.step--1,
.step--2,
.step--3 {
  border-right: 1px solid #666;
}

Pour l'élément Stepper, nous utilisons à nouveau flex pour aligner horizontalement les quatre étapes. Ensuite, nous utilisons la classe de chaque étape pour ajouter un joli style. Pour l'élément Stepper, nous utilisons à nouveau flex pour aligner horizontalement les quatre étapes. Ensuite, nous utilisons chaque classe d'étape pour ajouter un joli style.

.form {
  background: #fff;
  text-align: center;
  position: absolute;
  width: 25rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  display: none;
  border-radius: 1rem;
  overflow: hidden;
}
.form--header-container {
  background: linear-gradient(to right, rgb(51, 51, 51), #919191);
  color: #fff;
  height: 6rem;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.form--header-title {
  font-size: 1.4rem;
}

.form--header-text {
  padding: 0.5rem 0;
}

input[type="text"] {
  padding: 0.8rem;
  margin: auto;
  margin-top: 0.5rem;
  width: 20rem;
  display: block;
  border-radius: 0.5rem;
  outline: none;
  border: 1px solid #bdbdbb;
}

.form__btn {
  background: #333;
  color: #fff;
  outline: none;
  border: none;
  padding: 0.5rem 0.7rem;
  width: 7rem;
  margin: 1rem auto;
  border-radius: 0.9rem;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.form--message-text {
  width: 25rem;
  background: #fff;
  color: #444;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 1.4rem;
  box-shadow: 0.2rem 0.2rem 0.5rem rgba(51, 51, 51, 0.2);
  animation: fadeIn 0.8s;
  border-radius: 1rem;
}

Nous avons trois éléments de formulaires dans le fichier HTML, c'est pourquoi nous utilisons position: absolute pour les superposer. Au début, nous cacherons les trois formulaires et seul le formulaire avec la active class sera affiché.

Dans la classe form--header-container, nous utilisons linear-gradient pour ajouter un joli style à l'en-tête du formulaire. Ensuite, dans la classe form-message-text, nous ajoutons la propriété animation pour avoir un effet de fondu cool lorsque le message de réussite sera affiché.

.form-active {
  z-index: 1000;
  display: block;
}
.form-active-animate {
  animation: moveRight 1s;
}
.form-inactive {
  display: block;
  animation: moveLeft 1s;
}

.step-active {
  background: #666;
  color: #fff;
  border: 1px solid #666;
}

Les trois formulaires seront masqués au début. Par conséquent, nous utilisons la classe form-active pour afficher le formulaire actuel et également la propriétéz-index pour être sûr que le formulaire choisi sera toujours au dessus.

Ensuite, la classe form-active-animate fera une entrée animée et sympa de gauche à droite. Nous avons également une classe form-inactive qui nous aidera à masquer le formulaire précédent. Et le step-active ne fera que changer le style de l'élément step actuel.

@keyframes moveRight {
  0% {
    transform: translateX(-27rem) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0rem) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(27rem) scale(0.9);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Comme vous pouvez le voir ici, nous utilisons des images clés pour faire trois animations. La première animation moveRight déplace littéralement l'élément de gauche à droite avec la propriététransform. Pour la deuxième animation moveLeft, c'est le même processus sauf que l'élément se déplacera plus du côté droit. Et pour la dernière animation fadeIn, il commencera le fondu en vigueur lorsque l'élément sera affiché.

3. JavaScript

Comme vous pouvez le voir ici, nous écoutons, cliquons sur l'événement et appliquons la fonction gotoNextForm.

const formBtn1 = document.querySelector("#btn-1")
const formBtnPrev2 = document.querySelector("#btn-2-prev")
const formBtnNext2 = document.querySelector("#btn-2-next")
const formBtn3 = document.querySelector("#btn-3")

Pour interagir avec le DOM, nous devons sélectionner tous les boutons du formulaire à l'aide de querySelector.

// Button listener of form 1
formBtn1.addEventListener("click", function(e) {
  gotoNextForm(formBtn1, formBtnNext2, 1, 2)
  e.preventDefault()
})

// Next button listener of form 2
formBtnNext2.addEventListener("click", function(e) {
  gotoNextForm(formBtnNext2, formBtn3, 2, 3)
  e.preventDefault()
})

// Previous button listener of form 2
formBtnPrev2.addEventListener("click", function(e) {
  gotoNextForm(formBtnNext2, formBtn1, 2, 1)
  e.preventDefault()
})

// Button listener of form 3
formBtn3.addEventListener("click", function(e) {
  document.querySelector(`.step--3`).classList.remove("step-active")
  document.querySelector(`.step--4`).classList.add("step-active")
  formBtn3.parentElement.style.display = "none"
  document.querySelector(".form--message").innerHTML = `
   <h1 class="form--message-text">Your account is successfully created </h1>
   `
  e.preventDefault()
})

En passant le formulaire précédent, le formulaire suivant, l'étape précédente et l'étape suivante en tant que paramètres et au passage, nous utilisons preventDefault () sur l'événement pour empêcher le rechargement de la page. Pour l'écouteur formBtn3,

c'est un peu différent car nous montrons un message de réussite à l'utilisateur en utilisant innerHTML pour ajouter le message sur le div vide avec la classe form-message

const gotoNextForm = (prev, next, stepPrev, stepNext) => {
  // Get form through the button
  const prevForm = prev.parentElement
  const nextForm = next.parentElement
  const nextStep = document.querySelector(`.step--${stepNext}`)
  const prevStep = document.querySelector(`.step--${stepPrev}`)
  // Add active/inactive classes to both previous and next form
  nextForm.classList.add("form-active")
  nextForm.classList.add("form-active-animate")
  prevForm.classList.add("form-inactive")
  // Change the active step element
  prevStep.classList.remove("step-active")
  nextStep.classList.add("step-active")
  // Remove active/inactive classes to both previous an next form
  setTimeout(() => {
    prevForm.classList.remove("form-active")
    prevForm.classList.remove("form-inactive")
    nextForm.classList.remove("form-active-animate")
  }, 1000)
}

La fonction gotoNextForm recevra quatre paramètres. Ensuite, nous parcourons le DOM avec parentElement sur les variables prevForm et nextForm pour atteindre l'élément form.

Ensuite, nous utilisons les variables nextStep et prevStep pour sélectionner les étapes précédentes et suivantes sur l'élément stepper. Après avoir sélectionné les éléments, nous ajoutons la classe form-active au prochain élément de formulaire et la classeform-active-animate pour avoir une belle animation. Ensuite, nous ajoutons la classe form-inactive au formulaire précédent.

Après cela, nous utilisons le même processus pour l'élément stepper. En ajoutant la classe step-active à l'étape suivante et on le supprime de l'étape précédente.

Et enfin, on supprime les classes form-active,form-inactive et form-active-animate aux formulaires précédent et suivant après 1 seconde avec setTimeout().

stepper-form

Et nous obtenons enfin notre formulaire génial pas à pas avec HTML, CSS et JavaScript. Vous pouvez également consulter mes autres pens ici ou me suivre sur Twitter.

#html#css#javascript

Posted by Ibrahima Ndaw

Full-stack developer and blogger
Follow me

Get the next in your inbox