Hello developers, today in this blog you will learn to create a Multi-Step Form with Step Progress Bar using HTML, CSS & JS.
A Multi-Step Form is a long-form that has more than one step to fill the form. This type of form asked you to enter your details step by step before submitting your form. The multiform consists of some details to fill in like, name, contact details, and some general information like the birth date and location of the user.
In this blog (Multi-Step Form with Step Progress Bar), on the webpage, at the top of the form, there is a progress bar that indicates the steps. The form contains details like names have to be filled by the user in the two formats like First Name and Last Name. There is a button named Next. When you click on the Next button, then another form is visible, and also the previous step will be marked as completed, this is a contact page, there are two input fields called Email Address and Phone Number where the user can fill in their details.
In this form, you have two buttons named Previous and Next Button. Where you can go to the previous page and next page and you can also edit the details of yourself. And on the third page, there are two input fields such as Date of birth and gender. In the gender field, there are options to choose the user's gender. On the last page, Login details there are two input fields named Username, and Password. On this page, there are two buttons as Previous and Submit. The Submit button is used to submit the form.
The source code of this Multi-Step Form with Step Progress Bar is given below, if you want the source code of this program, you can copy it. You can use this Multi-Step Form with Step Progress Bar on your projects.
Multi-Step Form with Step Progress Bar [Source Code]
To make this website (Multi-Step Form with Step Progress Bar), you need to create three files: an HTML file, a CSS file & a JS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
@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-image: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%);
}
::selection{
color: #fff;
background: #00C9A7;
}
.container{
width: 330px;
background: #12192c;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 30px 35px 10px 35px;
}
.container header{
font-size: 35px;
font-weight: 600;
}
.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: 35px;
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: 5px solid #eee;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .field input:focus,
form .field.valid input{
border-color: #00C9A7;
}
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: #00C9A7;
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: #22E4AC;
}
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: 25px 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: #fff;
margin-bottom: 8px;
}
.progress-bar .step .bullet{
height: 25px;
width: 25px;
border: 2px solid #fff;
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: #12192c;
background: #00C9A7;
}
.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: #00C9A7;
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: #00C9A7;
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;
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #00C9A7;
font-weight: bold;
}
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;
});
Thank you for reading our blog. If you face any problem in creating this Multi-Step Form with Step Progress Bar using HTML, CSS & JS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team