Multi Step Form with Step Progress Bar in HTML CSS & JavaScript

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 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 a 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 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 to understand what I am saying. You can watch a full video tutorial on this program (Multi-Step Form in HTML).

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.

If you like this program (Multi-Step Form Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Multi-Step Form using HTML CSS & JavaScript [Source Codes]

As always, before sharing the codes of this program (Multi-Step Form Design). Let's a few talk about the main tags and codes of this program. In the HTML File, first I created a <div> and placed all other tags inside it. Then I created <form> and placed <input> and <button> inside this tag. After that, I pasted this same codes four times and change their title.

In the CSS File, first I set a background image and placed all elements at the center. Then I gave specific height, color, padding to form a container. After that, I placed all steps horizontally and did basic styling to input, button, text, etc. Then I have hidden all the other three steps and create a step progress bar on the top of the form. Then I did some styling to this step progress bar.

There are many things I left. I can't say all things in writing. But don't worry you will understand all codes of this program (Multi-Step Form) after getting source codes. You can watch a video tutorial above for a better understanding of codes.

To create this program (Multi-Step Form). First, you need to create three Files (HTML, CSS & JavaScript). After creating these files just paste these following codes in your file. You can also download the source code files through the given link. In the source files, there you also get a background image of this program. Click here to download source code files.

HTML FILE:

<!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>
<!-- Somehow I got an error, so I comment the script tag, just uncomment to use -->
<!-- <script src="script.js"></script> -->

  </body>
</html>

CSS FILE:

@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;
}

JavaScript FILE:

<!-- 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;
});

Thanks for visiting, Keep visiting.

30 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

FunmastiJuly 8, 2020 at 1:40 AM
Hello sir.... Which plugin you are using for copy text.
ReplyDelete
Replies
UnknownJuly 13, 2020 at 7:49 PM
i am facing such problems in style and button text is over released of container can you solve this one issue...
ReplyDelete
Replies
subhabrata royJuly 14, 2020 at 5:07 AM
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 subhabrataroy61@gmail.com
ReplyDelete
Replies
UnknownJuly 17, 2020 at 1:53 PM
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
ReplyDelete
Replies
UnknownJuly 18, 2020 at 12:00 AM
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.
ReplyDelete
Replies
UnknownJuly 18, 2020 at 12:02 AM
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.
ReplyDelete
Replies
halilAugust 31, 2020 at 9:52 PM
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.
ReplyDelete
Replies
LINKOPULSASeptember 6, 2020 at 11:16 AM
Thank You Sir admin Codingnepal about this tutorial,can u make tutorial for panel admin hotspot mikrotik
ReplyDelete
Replies
sujanSeptember 11, 2020 at 3:27 PM
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.
ReplyDelete
Replies
ashu-senpaiSeptember 28, 2020 at 12:01 PM
Could you just provide me with only the functional Step Progress Bar with those buttons and without the form submittion?
ReplyDelete
Replies
UnknownDecember 22, 2020 at 5:22 PM
Thanks you sir its awesome
ReplyDelete
Replies
UnknownFebruary 25, 2021 at 6:40 PM
whe i click next, its not going to next
ReplyDelete
Replies
UnknownMarch 5, 2021 at 8:20 PM
I tried this thanks,,,how do i add a top navbar to this because it's not working for me.
ReplyDelete
Replies
randyApril 10, 2021 at 2:40 AM
i try to use something similar on ASP.NET MVC and all the steps group up on one form.
ReplyDelete
Replies
UnknownApril 20, 2021 at 2:26 AM
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.
ReplyDelete
Replies

Add comment

Video Tutorial of Multi-Step Form in HTML & CSS

You might like this:

Multi-Step Form using HTML CSS & JavaScript [Source Codes]

Thanks for visiting, Keep visiting.

30 Comments

Post a Comment

About Us

Contact Form