Hello Reader, in this blog we will read how to make multi step form with the help of html css and javascript. This multi step form is designed in fully responsive which you can use in your website. It is designed with Step Progress Bar with multi step form which you can see in the photo above.
This Multi Step Form has been custom made so that you will easily learn how to make this type of form. You can use this form on your website.
Step Progress Bar Design
We understand about the code of Step Progress Bar
HTML structure of Step Progress Bar:
We know about how the html code of Step Progress Bar is written.
First of all, a <ul> tag is taken whose class name is class="progress-bar". Inside this <ul> tag three <li> tags are taken whose id name is 1) id="step1" 2) id="step1 ", 3) id="step3" . Inside the first <li> tag, we have given a class name named class="active" From this class we will keep changing the class with the help of JavaScript.
As you can see in the HTML below.
<ul class="progress-bar">
<li id="step1" class="active">User Info</li>
<li id="step2">Address</li>
<li id="step3">Comments</li>
</ul>
CSS Structure Of Step Progress Bar:
And how we have done the desing of this Step Progress Bar in css and how the css code has been written, you can understand by looking at the css code below.
.progress-bar {
margin: 25px 0;
padding: 0;
overflow: hidden;
counter-reset: step;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.progress-bar li{
list-style-type: none;
width: 100%;
font-size: 20px;
font-weight: 500;
text-align: center;
position: relative;
color: #fff;
}
.progress-bar li::before{
position: relative;
z-index: 2;
content: counter(step);
counter-increment: step;
width: 40px;
height: 40px;
line-height: 40px;
display: block;
font-size: 1.2rem;
font-weight: 600;
text-align: center;
border-radius: 100px;
margin: 0 auto 10px auto;
background-color: #191919;
color: #f5f5f5;
}
.progress-bar li::after{
content: '';
width: 100%;
height: 6px;
position: absolute;
left: -50%;
top: 17px;
z-index: 1;
background-color: #191919;
}
.progress-bar li.active::before,.progress-bar li.active::after{
background: linear-gradient(to right, #FF1046 20%, #E01660 40%, #E01660 60%, #FF1046 80%);
background-size: 200% auto;
-webkit-animation: effect 1s linear infinite;
animation: effect 1s linear infinite;
color: #111111;
}
@keyframes effect {
to {
background-position: -200% center;
}
}
1) First step of form
As you are looking at this image, this image appears on the first screen of the form and you are looking at the input field in this image, which is designed with the help of HTML and CSS, when after filling this form field, you can click next If you click on the button, then the second step of the form is done by you.
When you are on the first step of the form, you can see the progress bar image above which is active on a number.
The HTML code of the first step of this form is given below, you can see how the code is written.
HTML Structure First Step:
<div class="step-group" id="step-group-1">
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" class="form-field" placeholder="Last Name">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="email" class="form-field" placeholder="Email">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="Phone">
</div>
</div>
<div class="form-box">
<div class="btn-step">
<button id="step-next-1">Next ￫</button>
</div>
</div>
</div>
2) Second steps of form
Input field has also been taken in the second step. And the desing has been done with the help of css as you can see in the image above, in this image we have taken two buttons. Whose name is Prev and Next buttons. When you click on the Prev button, the Fisrt Step form will open. And if you click on the Next button, you will get the third step form.
The HTML code of the second step is given below, which you can understand by looking at it.
HTML Structure Second Step:
<div class="step-group" id="step-group-2">
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="Address 1">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="Address 2">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="City">
</div>
<div class="form-group">
<input type="text" class="form-field" placeholder="Zip">
</div>
</div>
<div class="form-box">
<div class="btn-step">
<button id="step-prev-1">￩ Prev</button>
<button id="step-next-2">Next ￫</button>
</div>
</div>
</div>
3) Third steps of form
A textarea tag has been taken in the third step form and in this step we have taken the button prev and send button. On clicking send, the successful message box opens.
Below you can see its html code
HTML Structure Third Step:
<div class="step-group" id="step-group-3">
<div class="form-box">
<div class="form-group">
<textarea class="form-field" placeholder="Message" cols="30" rows="10"></textarea>
</div>
</div>
<div class="form-box">
<div class="btn-step">
<button id="step-prev-2">￩ Prev</button>
<button type="submit" id="step-next-3">Send ￫</button>
</div>
</div>
</div>
4) Four steps of form
In the Four Steps form, when you click on the send button in the third step, it opens. Which you can open this success message when you submit the form.
HTML Structure Fourth Step:
<div id="sucess-box">
<span class="done">✔</span>
<p class="sucess-text">Your message was sent successful. Thanks.</p>
<button id="reset-btn" type="reset">Refress</button>
</div>
CSS Structure Fourth Step:
#sucess-box{
background-color: #fff;
height: 350px;
display: none;
flex-direction: column;
gap: 40px;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#sucess-box span{
display: block;
width: 100px;
height: 100px;
border: 6px solid green;
font-size: 60px;
color: green;
font-weight: 800;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#sucess-box .sucess-text{
font-size: 30px;
color: green;
}
#sucess-box #reset-btn{
background-color: #ff1046;
border: none;
color: #fff;
padding: 10px 25px;
font-size: 20px;
font-weight: 600;
cursor: pointer;
}
You want to understand by watching the video of this Multi Step Form. By clicking on the video given below, you can easily understand how the code was written.
Video Tutorial of Multi Step Form With Step Progress Bar
By watching the video tutorial given above, you must have understood how the code of this form has been written.
If you want to get the complete code of this form, then copy the code given below and paste it in the code editor of your system.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Step-form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="form-wrap">
<div class="form-container">
<form action="" id="multi-step-form">
<div id="form-container-box">
<h1 class="form-title">Multi Step Form</h1>
<ul class="progress-bar">
<li id="step1" class="active">User Info</li>
<li id="step2">Address</li>
<li id="step3">Comments</li>
</ul>
<!-- ======================Step Group 1============== -->
<div class="step-group" id="step-group-1">
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="First Name">
</div>
<div class="form-group">
<input type="text" class="form-field" placeholder="Last Name">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="email" class="form-field" placeholder="Email">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="Phone">
</div>
</div>
<div class="form-box">
<div class="btn-step">
<button id="step-next-1">Next ￫</button>
</div>
</div>
</div>
<!-- ======================Step Group 2============== -->
<div class="step-group" id="step-group-2">
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="Address 1">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="Address 2">
</div>
</div>
<div class="form-box">
<div class="form-group">
<input type="text" class="form-field" placeholder="City">
</div>
<div class="form-group">
<input type="text" class="form-field" placeholder="Zip">
</div>
</div>
<div class="form-box">
<div class="btn-step">
<button id="step-prev-1">￩ Prev</button>
<button id="step-next-2">Next ￫</button>
</div>
</div>
</div>
<!-- ======================Step Group 3============== -->
<div class="step-group" id="step-group-3">
<div class="form-box">
<div class="form-group">
<textarea class="form-field" placeholder="Message" cols="30" rows="10"></textarea>
</div>
</div>
<div class="form-box">
<div class="btn-step">
<button id="step-prev-2">￩ Prev</button>
<button type="submit" id="step-next-3">Send ￫</button>
</div>
</div>
</div>
</div>
<div id="sucess-box">
<span class="done">✔</span>
<p class="sucess-text">Your message was sent successful. Thanks.</p>
<button id="reset-btn" type="reset">Refress</button>
</div>
</form>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.form-wrap{
background-color: #111111;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5%;
}
.form-container{
max-width: 600px;
width: 100%;
padding: 20px;
background-color: #262726;
}
.form-title{
background-color: #ff1046;
padding: 10px;
color: #fff;
text-align: center;
font-size: 25px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0;
}
.progress-bar {
margin: 25px 0;
padding: 0;
overflow: hidden;
counter-reset: step;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.progress-bar li{
list-style-type: none;
width: 100%;
font-size: 20px;
font-weight: 500;
text-align: center;
position: relative;
color: #fff;
}
.progress-bar li::before{
position: relative;
z-index: 2;
content: counter(step);
counter-increment: step;
width: 40px;
height: 40px;
line-height: 40px;
display: block;
font-size: 1.2rem;
font-weight: 600;
text-align: center;
border-radius: 100px;
margin: 0 auto 10px auto;
background-color: #191919;
color: #f5f5f5;
}
.progress-bar li::after{
content: '';
width: 100%;
height: 6px;
position: absolute;
left: -50%;
top: 17px;
z-index: 1;
background-color: #191919;
}
.progress-bar li.active::before,.progress-bar li.active::after{
background: linear-gradient(to right, #FF1046 20%, #E01660 40%, #E01660 60%, #FF1046 80%);
background-size: 200% auto;
-webkit-animation: effect 1s linear infinite;
animation: effect 1s linear infinite;
color: #111111;
}
@keyframes effect {
to {
background-position: -200% center;
}
}
.step-group{
margin-top: 50px;
}
.form-box{
display: flex;
flex-direction: row;
gap: 20px;
}
.form-box .form-group{
width: 100%;
margin-bottom: 15px;
}
.form-box .form-group .form-field{
width: 100%;
height: 50px;
padding: 10px 15px;
font-size: 18px;
color: #f5f5f5;
background-color: transparent;
border: 1px solid #ced4da;
outline: none;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
}
.btn-step{
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 20px;
}
.btn-step button{
background-color: #ff1046;
border: none;
color: #fff;
padding: 10px 25px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
.form-box .form-group textarea.form-field{
min-height: 190px;
}
#step-group-2,#step-group-3{
display: none;
}
#sucess-box{
background-color: #fff;
height: 350px;
display: none;
flex-direction: column;
gap: 40px;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#sucess-box span{
display: block;
width: 100px;
height: 100px;
border: 6px solid green;
font-size: 60px;
color: green;
font-weight: 800;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#sucess-box .sucess-text{
font-size: 30px;
color: green;
}
#sucess-box #reset-btn{
background-color: #ff1046;
border: none;
color: #fff;
padding: 10px 25px;
font-size: 20px;
font-weight: 600;
cursor: pointer;
}
JAVASCRIPT CODE FILE :
window.addEventListener("load", () => {
const form = document.getElementById("multi-step-form");
const formContainerBox = document.getElementById("form-container-box");
const step2 = document.getElementById("step2");
const step3 = document.getElementById("step3");
const stepGroup1 = document.getElementById("step-group-1");
const stepGroup2 = document.getElementById("step-group-2");
const stepGroup3 = document.getElementById("step-group-3");
const stepNext1 = document.getElementById("step-next-1");
const stepNext2 = document.getElementById("step-next-2");
const stepNext3 = document.getElementById("step-next-3");
const stepPrev1 = document.getElementById("step-prev-1");
const stepPrev2 = document.getElementById("step-prev-2");
const sucessBox = document.getElementById("sucess-box");
const ResetBtn = document.getElementById("reset-btn")
form.addEventListener("submit", (e) => {
e.preventDefault();
})
stepNext1.addEventListener("click", (e) => {
stepGroup1.style.display = "none";
stepGroup2.style.display = "block";
step2.classList.add("active");
});
stepNext2.addEventListener("click", () => {
stepGroup2.style.display = "none";
stepGroup3.style.display = "block";
step3.classList.add("active");
});
stepPrev1.addEventListener("click", () => {
stepGroup1.style.display = "block";
stepGroup2.style.display = "none";
step2.classList.remove("active");
});
stepPrev2.addEventListener("click", () => {
stepGroup3.style.display = "none";
stepGroup2.style.display = "block";
step3.classList.remove("active");
})
stepNext3.addEventListener("click", () => {
formContainerBox.style.display = "none";
sucessBox.style.display = "flex";
});
ResetBtn.addEventListener("click", () => {
sucessBox.style.display = "none";
formContainerBox.style.display = "none";
window.location.reload();
})
})
Post a Comment