Multistep Form Using HTML CSS JS Step by Step
In This Article, I’ll Demonstrate How to make multistep forms in an easy way using only HTML, CSS, and JavaScript.
To create this project we need Three files.
- index.html for HTML Code
- style.css for CSS Code
- app.js for JavaScript Code
The name is user-defined, you can use your won name, create the file and connect CSS and javascript files with HTML, you can follow the code given below.
Basic HTML Code:
<!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>CSS Keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HTML code goes here -->
<script src="app.js"></script>
</body>
</html>HTML Code For Multistep Form Structure:
<form action="#" class="multistep_form">
<div class="form_top_steps">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="step_container">
<div class="form_step">
<div class="form_head">This is step one</div>
<div class="form_body">
<div class="form_group">
<input
type="text"
placeholder="Username..."
class="form_control"
/>
</div>
<div class="form_group">
<input type="text" placeholder="Email..." class="form_control" />
</div>
</div>
<div class="form_footer">
<button type="button" class="next">Next</button>
</div>
</div>
<div class="form_step">
<div class="form_head">This is step two</div>
<div class="form_body">
<div class="form_group">
<input
type="text"
placeholder="Twitter..."
class="form_control"
/>
</div>
<div class="form_group">
<input
type="text"
placeholder="Facebook..."
class="form_control"
/>
</div>
<div class="form_group">
<input
type="text"
placeholder="Linkedin..."
class="form_control"
/>
</div>
</div>
<div class="form_footer">
<button type="button" class="prev">Prev</button>
<button type="button" class="next">Next</button>
</div>
</div>
<div class="form_step">
<div class="form_head">This is Final Step</div>
<div class="form_body">
<div class="form_group">
<input
type="text"
placeholder="First Name..."
class="form_control"
/>
</div>
<div class="form_group">
<input
type="text"
placeholder="Last Name..."
class="form_control"
/>
</div>
<div class="form_group">
<input type="text" placeholder="Phone..." class="form_control" />
</div>
<div class="form_group">
<textarea placeholder="Phone..." class="form_control"></textarea>
</div>
</div>
<div class="form_footer">
<button type="button" class="prev">Prev</button>
<button type="submit" class="submit">Submit</button>
</div>
</div>
</div>
</form>CSS Code: Copy the code and paste it into the style.css file.
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Raleway", sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
background-image: linear-gradient(45deg, #2196f3, orange);
}
.multistep_form {
max-width: 600px;
width: 100%;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 1px 5px #0001, 0 1px 15px #0001, 0 1px 25px #0001;
overflow: hidden;
}
.multistep_form .form_top_steps {
padding: 15px;
background-image: linear-gradient(-45deg, orangered, orange);
display: flex;
justify-content: space-between;
position: relative;
font-weight: 600;
}
.multistep_form .form_top_steps::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 4px;
width: calc(100% - 30px);
transform: translate(-50%, -50%);
background-color: #fff8;
}
.multistep_form .form_top_steps > * {
background-color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
line-height: 1;
z-index: 2;
box-shadow: -2px -2px 5px #fff5, 2px 2px 5px #0005;
}
.multistep_form .form_top_steps > *.active {
color: #fff;
background-color: #4a9bda;
}
.multistep_form .step_container {
display: flex;
transition: transform 0.6s cubic-bezier(0.69, 1.21, 0.53, 1.21);
}
.multistep_form .step_container .form_step {
padding: 0 15px;
min-width: 100%;
}
.multistep_form .step_container .form_step .form_head {
padding: 10px 0;
font-weight: 700;
font-size: 18px;
text-align: center;
}
.multistep_form .step_container .form_step .form_body {
border-top: 1px solid #0001;
border-bottom: 1px solid #0001;
padding: 15px 0;
}
.multistep_form .step_container .form_step .form_footer {
padding: 15px 0;
display: flex;
justify-content: center;
gap: 25px;
}
.multistep_form .step_container .form_step .form_footer button {
border: none;
outline: none;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
padding: 10px 25px;
color: #fff;
box-shadow: 0 1px 5px #0001, 0 1px 10px #0001, 0 1px 15px #0001;
text-transform: uppercase;
}
.multistep_form .step_container .form_step .form_footer button.prev {
background-color: #008fff;
}
.multistep_form .step_container .form_step .form_footer button.next {
background-color: #78c742;
}
.multistep_form .step_container .form_step .form_footer button.submit {
background-image: linear-gradient(45deg, orange, orangered);
border-radius: 30px;
}
/* extra for form design start */
.form_group {
margin-bottom: 15px;
}
.form_control {
border: 1px solid #0002;
background-color: transparent;
outline: none;
padding: 8px 12px;
width: 100%;
color: #333;
}
.form_control::placeholder {
color: inherit;
opacity: 0.5;
}
.form_control:is(:hover, :focus) {
box-shadow: inset 0 1px 6px #0002;
border-radius: 5px;
}
/* extra for form design end */JavaScript Code: Copy the javascript and paste it to your app.js file.
class CreateFormGenerator {
constructor(element){
this.container = element;
this.steps = element.childElementCount;
this.stepHeilighter = element.closest('.multistep_form').querySelectorAll('.form_top_steps>*');
this.currentStep = 0;
/* activate next and prev button event */
this.activevateNextPrevButton();
/* activate step heilighter */
this.activateStepHeilighter();
}
goToNext(){
if(this.currentStep<(this.steps-1)){
this.currentStep++;
this.container.style.transform = `translateX(-${this.currentStep * 100}%)`;
}
/* activate step heilighter */
this.activateStepHeilighter();
}
goToBack(){
if(this.currentStep>0){
this.currentStep--;
this.container.style.transform = `translateX(-${this.currentStep * 100}%)`;
}
/* activate step heilighter */
this.activateStepHeilighter();
}
activevateNextPrevButton()
{
let next_buttons = this.container.querySelectorAll('.form_footer button.next');
let prev_buttons = this.container.querySelectorAll('.form_footer button.prev');
/* work with next button start */
if(next_buttons)
{
next_buttons.forEach(next_button=>{
next_button.addEventListener('click', ()=>{
this.goToNext();
});
})
}else{
console.log("Your step change Button not exits!");
}
/* work with next button end */
/* work with prev button start */
if(prev_buttons)
{
prev_buttons.forEach(prev_button=>{
prev_button.addEventListener('click', ()=>{
this.goToBack();
});
})
}else{
console.log("Your step change Button not exits!");
}
/* work with prev button end */
}
activateStepHeilighter(){
this.stepHeilighter.forEach(elem => {
elem.classList.remove('active');
});
this.stepHeilighter[this.currentStep].classList.add('active');
}
}
/* generate form start */
let my_form_step_containers = document.querySelectorAll(".multistep_form .step_container");
if(my_form_step_containers)
{
my_form_step_containers.forEach(container=>{
new CreateFormGenerator(container);
});
}
/* generate form end */Codepen Preview:
Leave a Reply