Hello readers, Today in this blog you’ll learn how to create a Multi Step Form with Step Progress Bar using HTML CSS & JavaScript. Earlier I have shared many blogs on how to create a Login Form using HTML & CSS. So now it’s time to create a Multi-Step Form in HTML.
A Multi-Step Form is a long-form that has broken into multiple pieces. This type of form asked you to enter your details step by step before submitting your form. Some Multi-Step Form has Step Progress Bar on the top of Form or on some website it’s placed on the bottom. Generally, This progress bar indicates or informs a user how many steps they have completed and how many steps are remaining.
As you have seen, this type of Multi-Step Forms in many websites. Some of them are created using Bootstrap. But today in this blog, I’ll share with you this program (Multi-Step Form with Step Progress) which is based on HTML CSS & JavaScript. I didn’t use any JavaScript library to create this form.
This form is long-form and it has broken into four steps. In each step, there are questions which user needs to enter. And I’ve also added a step progress bar on the top of the Form which indicates steps. There are two buttons (Next and Previous) on each step. When you click on the next button it’ll redirect you to the next step and when you click on the previous button it’ll redirect you to the previous step.
If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Multi Step Form).
Video Tutorial of Multi Step Form in HTML & CSS
I hope you like this Multi-Step Form and understood the basic codes of this program. As you have seen in the video, I didn’t use any JavaScript library and CSS Framework to create this Multi-Step form. You can use this form on your websites and projects.
If you have basic knowledge of HTML CSS & JavaScript then you can also create this type of Multi-Step Form. Nowadays, this type of form is trending and used by many popular websites.
You might like this:
Multi-Step Form Using HTML CSS & JavaScript [Source Codes]
To create this program (Multi-Step Form). First, you need to create three Files (HTML, CSS & JavaScript). After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Multi Step Form | CodingNepal</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>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css 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: 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;
}
Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
<!-- Created By CodingNepal -->
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;
});
That’s all, now you’ve successfully created a Multi-Step Form with Step Progress Bar in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
I have found a bug. When you click next for the first time, it’s okay but if I click enter again just progressbar moves but form doesn’t.
Thanks for solution:)
Nice basic script.
But where is the validation code before going to the next step?
Can you make the entire form into javascript with no table and div fields?
I’ve seen the entire form imported from jotforms to a webpage
sir change the design (css and html) of Multi-Step Form to neumorphism or glassmorphism.
please………
Seen this on YouTube, thank you so much for the source files! It’s really helpful and clear so I was able to expand and make it responsive easily. Thanks again 🙂
You’re most welcome
Found you on YouTube. Fantasic Videos.. Thanks so much 🙂
You are most welcome
Hey,
I am trying to create the wizard dynamically by using a for loop but I am stuck since days. Do you think you can help me please?
i try to use something similar on ASP.NET MVC and all the steps group up on one form.
Hi buddy(CodingNepal)i saw your video and it was amazing … but i have a problem . i have 9 form and in this tutorial you have made 4 forms out of 100% width with 25% each… what i have to do to make it for 9 form. please tell me asap.
I tried this thanks,,,how do i add a top navbar to this because it's not working for me.
Did you download the codes or copy?
whe i click next, its not going to next
You Man, you are the best coder I've ever met.
You're welcome
Thanks you sir its awesome
Just download the files and copy the required codes only.
Could you just provide me with only the functional Step Progress Bar with those buttons and without the form submittion?
I'll make responsive in my upcoming videos. Stay tuned.
thank you for this code. i have learn many thing form your video in youtube. hope there is more to see from you. it will be nice if it was perfect for responsive also.
Please contact me on Instagram with your problems.
Hello, first of all, good day. Thanks for sharing this user form. I added a photo to the second page and an ID number on the third page. But I have a question that I guessed by javascript.If I add a photo on the second page, it will continue if I don't. I would love it if you could help me how to handle this problem. Good work, everyone.
Unfortunately, I get the exact same issue on the desktop version too. Guess its related to the animations. If you comment the animation and transition style attributes in the css everything works great. As I do not need the animations for my use-case, this workaround is working fine for me. @CodingNepal: Great template and great work by the way! I like it!
Well.. My first try was misleading. The actual issue is related to the form which is triggered with each button click inside the form because non of the buttons is preventing the event defaults. So if you change click event listener by adding the event parameter 'e' and then call e.preventDefault(), you have fixed the issue.
For example:
nextBtnThird.addEventListener("click", function(e){
e.preventDefault();
slidePage.style.marginLeft = "-75%";
…
}
Do so for all buttons except the submit button itself, which indeed should trigger the form action!
Sure stay tuned with me 🙂
Thank You Sir admin Codingnepal about this tutorial,can u make tutorial for panel admin hotspot mikrotik
Thanks for your reply!!
The only problem I am getting if I am trying to create this with ASP.net that the form tag getting nested with another form tag.
So is there any substitute of code to change following:-
form action="#"
Would like to hear from you soon.
Sorry I don't know about it.
I would like to try this kind of form in asp.net. Can i get any idea how i can implement this using ASP.net
This form is not responsive for mobile devices and I don't know what mistakes you did. If possible send me your codes on my Instagram account.
Hey when I am using it on my phone devices it's not working properly. When I click on the next button it reloads to its
First page. In laptop it's working. And When I tried to make a 5th page of this form the previous buttons are not working. I even did some changes according to the way the 5th part.
Okk…you can merge if you know JavaScript perfectly.
And listen what I am trying to do is to merge this form and in its 5th page I want that 'strength password meter' that you have created.
Sure send me your codes on my Instagram Account.
i am facing such problems in style and button text is over released of container can you solve this one issue…
Sorry I do not deal with backend.
can you please help me to insert data in MySQL database. I am using this form.. but i can't to insert the data in database. please help me as soon as possible.its very urgent.
one more thing..when i clicking the next button for first time.. it automatically reloading. after that when i clicking the next button..its work properly. please check…
please please help me to insert the data in database. please reply me as soon as possible. you can ping me on my ph.number- 8670433547 this is my also whats app number. my email id is [email protected]
I didn't use plugin. I used JavaScript. Here is a video – https://youtu.be/6XG9Z1oQ6jI
Hello sir…. Which plugin you are using for copy text.