Creating multi-step forms can be a daunting task, but with the right tools and guidance, it can be a breeze. This comprehensive guide will walk you through the process of building a multi-step form using HTML, CSS, and JavaScript. To create a Multi-step Form using HTML, CSS and JavaScript., follow these step-by-step instructions:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
HTML File
<div class="form">
<div class="header">
<h2>Create an account</h2>
<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
</div>
<div class="body">
<div class="pagination">
<div class="number active">1</div>
<div class="bar"></div>
<div class="number">2</div>
<div class="bar"></div>
<div class="number">3</div>
<div class="bar"></div>
<div class="number">4</div>
</div>
<div class="steps">
<div class="step">
<h4>Contact details</h4>
<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits..</p>
<div class="grid">
<div class="col">
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div class="col">
<label for="email">Email</label>
<input type="email" id="email">
</div>
<div class="col">
<label for="phone">Phone number</label>
<input type="tel" id="phone">
</div>
<div class="col">
<label for="company">Company</label>
<input type="text" id="company">
</div>
</div>
</div>
<div class="step">
<h4>Areas of intrest</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elitCreating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
<div class="grid">
<div class="col">
<div class="checkbox">
<input type="checkbox" id="intrest-finance">
<label for="intrest-finance">Finance</label>
</div>
</div>
<div class="col">
<div class="checkbox">
<input type="checkbox" id="intrest-maths">
<label for="intrest-maths">Maths</label>
</div>
</div>
<div class="col">
<div class="checkbox">
<input type="checkbox" id="intrest-programming">
<label for="intrest-programming">Programming</label>
</div>
</div>
<div class="col">
<div class="checkbox">
<input type="checkbox" id="intrest-music">
<label for="intrest-music">Music</label>
</div>
</div>
</div>
</div>
<div class="step">
<h4>Secure your account</h4>
<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
<div class="grid">
<div class="col">
<label for="password">Password</label>
<input type="password" id="password">
</div>
<div class="col">
<label for="retype-password">Retype Password</label>
<input type="password" id="retype-password">
</div>
</div>
</div>
<div class="step">
<div class="confirmation">
<h2>Create my account</h2>
<p>Creating an account is the process of registering with a website or online service in order to access its features and benefits.</p>
<div>
<button>Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<button class="prev" disabled>Previous</button>
<button class="next">Next</button>
</div>
</div>
CSS File:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
body {
background:#fff;
font-family:"Roboto",sans-serif;
height:100vh;
display:grid;
place-items:center;
}
.form {
width:98%;
max-width:400px;
}
.form .header {
text-align:center;
padding:20px;
display:grid;
gap:5px;
}
.form .header p {
color:#555;
}
.form .body {
box-shadow:0px 5px 5px 2px rgba(0,0,0,0.2);
border-radius:20px;
height:320px;
overflow:hidden;
}
.form .body .pagination {
display:flex;
justify-content:center;
align-items:center;
gap:15px;
padding:15px 20px;
}
.form .body .pagination .number {
width:28px;
height:28px;
text-align:center;
line-height:28px;
border-radius:50%;
background:#00aaee;
color:#fff;
font-size:15px;
}
.form .body .pagination .bar {
width:50px;
height:4px;
background:#00acee;
border-radius:5px;
}
.form .body .pagination .active ~ div {
background:#ddd;
color:#111;
}
.form .steps {
width:400%;
display:flex;
transition:all 300ms ease-in-out;
}
.form .steps .step {
width:98vw;
max-width:400px;
padding:5px 15px 15px;
overflow:hidden;
}
.form .steps .step h4 {
margin-bottom:5px;
}
.form .steps .step p {
color:#555;
max-width:90%;
font-size:15px;
}
.form .steps .step .grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:20px;
}
.form .steps .step .grid .col label {
display:block;
margin-bottom:5px;
font-weight:500;
font-size:15px;
}
.form .steps .step .grid .col input {
width:100%;
padding:8px;
border:1px solid #bbb;
font-size:15px;
border-radius:8px;
}
.form .steps .step .grid .col .checkbox input {
display:none;
}
.form .steps .step .grid .col .checkbox label {
width:100%;
padding:15px;
border:1px solid #bbb;
border-radius:5px;
margin:0;
cursor:pointer;
}
.form .steps .step .grid .col .checkbox input:checked + label {
background:#00aaee;
color:#fff;
}
.form .steps .step .confirmation {
display:grid;
text-align:center;
place-items:center;
gap:15px;
}
.form .steps .step .confirmation button {
background:#00aaee;
color:#fff;
padding:10px 20px;
border:none;
outline:none;
font-size:15px;
border-radius:20px;
cursor:pointer;
}
.form .footer {
padding:15px 0px;
display:flex;
justify-content:space-between;
}
.form .footer button {
padding:5px 10px;
font-size:15px;
border:1px solid #bbb;
background:#fff;
border-radius:5px;
cursor:pointer;
outline:none;
}
JavaScript File:
(function(){
let currentPage = 1;
const prevBtn = document.querySelector(".form .footer .prev");
const nextBtn = document.querySelector(".form .footer .next");
function movePage(){
prevBtn.disabled = false;
nextBtn.disabled = false;
if(currentPage === 1){
prevBtn.disabled = true;
} else if(currentPage === 4){
nextBtn.disabled = true;
}
document.querySelector(".form .pagination .active").classList.remove("active");
document.querySelectorAll(".form .pagination .number")[currentPage-1].classList.add("active");
const stepNode = document.querySelector(".form .steps .step");
const width = ((currentPage-1)*stepNode.offsetWidth*-1)+"px";
stepNode.parentNode.style.marginLeft = width;
}
prevBtn.addEventListener("click",function(){
currentPage -= 1;
movePage();
});
nextBtn.addEventListener("click",function(){
currentPage += 1;
movePage();
});
})();
This guide provides simple steps and code to help you create multi-step forms using HTML, CSS, and JavaScript
Happy Coding !!!