Accueil
code source

Formulaire multi-étapes avec barre de progression des étapes en HTML CSS & JavaScript

Coding Team

 

Bonjour lecteurs, Aujourd'hui, dans ce blog, vous apprendrez à créer un formulaire à plusieurs étapes avec une barre de progression à l'aide de HTML CSS et JavaScript. Plus tôt, j'ai partagé de nombreux blogs sur la création d'un formulaire de connexion en utilisant HTML et CSS. Alors maintenant, il est temps de créer un formulaire multi-étapes en HTML.

Un formulaire en plusieurs étapes est un formulaire long qui s'est divisé en plusieurs morceaux. Ce type de formulaire vous demandait de saisir vos coordonnées étape par étape avant de soumettre votre formulaire. Certains formulaires en plusieurs étapes ont une barre de progression des étapes en haut du formulaire ou sur certains sites Web, elle est placée en bas. Généralement, cette barre de progression indique ou informe un utilisateur du nombre d'étapes qu'il a terminées et du nombre d'étapes restantes.

Comme vous l'avez vu, ce type de formulaires en plusieurs étapes est présent sur de nombreux sites Web. Certains d'entre eux sont créés à l'aide de Bootstrap. Mais aujourd'hui dans ce blog, je vais partager avec vous ce programme (Multi-Step Form with Step Progress) qui est basé sur HTML CSS & JavaScript. Je n'ai utilisé aucune bibliothèque JavaScript pour créer ce formulaire.

Ce formulaire est long et il est divisé en quatre étapes. À chaque étape, il y a des questions que l'utilisateur doit saisir. Et j'ai également ajouté une barre de progression des étapes en haut du formulaire qui indique les étapes. Il y a deux boutons (Suivant et Précédent) sur chaque étape. Lorsque vous cliquez sur le bouton suivant, il vous redirigera vers l'étape suivante et lorsque vous cliquez sur le bouton précédent, il vous redirigera vers l'étape précédente.

Si vous avez des connaissances de base en HTML CSS et JavaScript, vous pouvez également créer ce type de formulaire en plusieurs étapes. De nos jours, ce type de formulaire est tendance et utilisé par de nombreux sites Web populaires.

Si vous aimez ce programme (Formulaire en plusieurs étapes) et que vous souhaitez obtenir les codes sources. Vous pouvez facilement obtenir les codes sources de ce programme. Pour obtenir les codes sources, il vous suffit de faire défiler vers le bas.

Formulaire en plusieurs étapes utilisant HTML CSS et JavaScript [codes sources]

Pour créer ce programme (Formulaire en plusieurs étapes). Tout d'abord, vous devez créer trois fichiers (HTML, CSS et JavaScript). Après avoir créé ces fichiers, collez simplement les codes suivants dans votre fichier. Tout d'abord, créez un fichier HTML avec le nom index.html et collez les codes donnés dans votre fichier HTML. N'oubliez pas que vous devez créer un fichier avec l'extension .html.

<!DOCTYPE html>
<!-- Créer par Coding Team -->
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<title>Multi Step Form | Coding Team</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="container">
<header>Signup Form</header>
<div class="progress-bar">
<div class="step">
<p>
Name
</p>
<div class="bullet">
<span>1</span>
</div>
<div class="check fas fa-check"></div>
</div>
<div class="step">
<p>
Contact
</p>
<div class="bullet">
<span>2</span>
</div>
<div class="check fas fa-check"></div>
</div>
<div class="step">
<p>
Birth
</p>
<div class="bullet">
<span>3</span>
</div>
<div class="check fas fa-check"></div>
</div>
<div class="step">
<p>
Submit
</p>
<div class="bullet">
<span>4</span>
</div>
<div class="check fas fa-check"></div>
</div>
</div>
<div class="form-outer">
<form action="#">
<div class="page slide-page">
<div class="title">
Basic Info:
</div>
<div class="field">
<div class="label">
First Name
</div>
<input type="text">
</div>
<div class="field">
<div class="label">
Last Name
</div>
<input type="text">
</div>
<div class="field">
<button class="firstNext next">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Contact Info:
</div>
<div class="field">
<div class="label">
Email Address
</div>
<input type="text">
</div>
<div class="field">
<div class="label">
Phone Number
</div>
<input type="Number">
</div>
<div class="field btns">
<button class="prev-1 prev">Previous</button>
<button class="next-1 next">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Date of Birth:
</div>
<div class="field">
<div class="label">
Date
</div>
<input type="text">
</div>
<div class="field">
<div class="label">
Gender
</div>
<select>
<option>Male</option>
<option>Female</option>
<option>Other</option>
</select>
</div>
<div class="field btns">
<button class="prev-2 prev">Previous</button>
<button class="next-2 next">Next</button>
</div>
</div>
<div class="page">
<div class="title">
Login Details:
</div>
<div class="field">
<div class="label">
Username
</div>
<input type="text">
</div>
<div class="field">
<div class="label">
Password
</div>
<input type="password">
</div>
<div class="field btns">
<button class="prev-3 prev">Previous</button>
<button class="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>

</html>

Deuxièmement, créez un fichier CSS avec le nom style.css et collez les codes donnés dans votre fichier CSS. N'oubliez pas que vous devez créer un fichier avec l'extension .css.

 
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background: url("bg.png"), -webkit-linear-gradient(bottom, #0250c5, #d43f8d);
}
::selection{
color: #fff;
background: #d43f8d;
}
.container{
width: 330px;
background: #fff;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header{
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
}
.container .form-outer{
width: 100%;
overflow: hidden;
}
.container .form-outer form{
display: flex;
width: 400%;
}
.form-outer form .page{
width: 25%;
transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title{
text-align: left;
font-size: 25px;
font-weight: 500;
}
.form-outer form .page .field{
width: 330px;
height: 45px;
margin: 45px 0;
display: flex;
position: relative;
}
form .page .field .label{
position: absolute;
top: -30px;
font-weight: 500;
}
form .page .field input{
height: 100%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .page .field select{
width: 100%;
padding-left: 10px;
font-size: 17px;
font-weight: 500;
}
form .page .field button{
width: 100%;
height: calc(100% + 5px);
border: none;
background: #d33f8d;
margin-top: -20px;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s ease;
}
form .page .field button:hover{
background: #000;
}
form .page .btns button{
margin-top: -20px!important;
}
form .page .btns button.prev{
margin-right: 3px;
font-size: 17px;
}
form .page .btns button.next{
margin-left: 3px;
}
.container .progress-bar{
display: flex;
margin: 40px 0;
user-select: none;
}
.container .progress-bar .step{
text-align: center;
width: 100%;
position: relative;
}
.container .progress-bar .step p{
font-weight: 500;
font-size: 18px;
color: #000;
margin-bottom: 8px;
}
.progress-bar .step .bullet{
height: 25px;
width: 25px;
border: 2px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
transition: 0.2s;
font-weight: 500;
font-size: 17px;
line-height: 25px;
}
.progress-bar .step .bullet.active{
border-color: #d43f8d;
background: #d43f8d;
}
.progress-bar .step .bullet span{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.progress-bar .step .bullet.active span{
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after{
position: absolute;
content: '';
bottom: 11px;
right: -51px;
height: 3px;
width: 44px;
background: #262626;
}
.progress-bar .step .bullet.active:after{
background: #d43f8d;
transform: scaleX(0);
transform-origin: left;
animation: animate 0.3s linear forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after{
display: none;
}
.progress-bar .step p.active{
color: #d43f8d;
transition: 0.2s linear;
}
.progress-bar .step .check{
position: absolute;
left: 50%;
top: 70%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.progress-bar .step .check.active{
display: block;
color: #fff;
}

Enfin, créez un fichier JavaScript avec le nom de script.js et collez les codes donnés dans votre fichier JavaScript. N'oubliez pas que vous devez créer un fichier avec l'extension .js.

extension.

<!-- Créer par Coding Team -->
const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = document.querySelectorAll(".step p");
const progressCheck = document.querySelectorAll(".step .check");
const bullet = document.querySelectorAll(".step .bullet");
let current = 1;
nextBtnFirst.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnSec.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnThird.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "-75%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
submitBtn.addEventListener("click", function(){
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
setTimeout(function(){
alert("Your Form Successfully Signed up");
location.reload();
},800);
});
prevBtnSec.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "0%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnThird.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "-25%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnFourth.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "-50%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});

C'est tout, maintenant vous avez créé avec succès un formulaire multi-étapes avec barre de progression par étapes en HTML CSS & JavaScript. Si votre code ne fonctionne pas ou si vous avez rencontré une erreur/un problème, veuillez commenter en bas

2 commentaires

  1. Anonyme
    super
  2. Coding Team
    Coding Team
    Commenter sur ce post
N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter