Multi step form | Multi step form html css | Javascript Multi Step Form 

Welcome🎉 to codewithrandom in this blog we learn about how we can create multi-step form | multi-step form HTML css  . We will be using pure HTML & css and javascript for this multi-step form HTML css . Hope you enjoy our blog, first lets take a look at what a multi step form is and when should we use the multistep form.

What is multi step form and when should we use it?

Usually when a site wants some data from its user they ask them to fill out a form with the data required. Sometimes data tends to be more than usual which in return makes the form look huge, but the problem arises when the user get intimidated by the length of form to tackle with this situation we use Multi-Step form.

Multi-step form is nothing but a single lengthy form broken into multiple pieces. 

Now that we have a basic idea of what and when to use multi step form let's start with a basic HTML structure for multi step form HTML css .

HTML for  multi step form

 <section>  
  <div class="container">  
   <form>  
    <div class="step step-1 active">  
     <div class="form-group">  
      <label for="firstName">First Name</label>  
      <input type="text" id="firstName" name="first-name">  
     </div>  
     <div class="form-group">  
      <label for="lastName">Last Name</label>  
      <input type="text" id="lastName" name="last-name">  
     </div>  
     <div class="form-group">  
      <label for="nickName">Nick Name</label>  
      <input type="text" id="nickName" name="nick-name">  
     </div>  
     <button type="button" class="next-btn">Next</button>  
    </div>  
    <div class="step step-2">  
     <div class="form-group">  
      <label for="email">Email</label>  
      <input type="text" id="email" name="email">  
     </div>  
     <div class="form-group">  
      <label for="phone">Phone</label>  
      <input type="number" id="phone" name="phone-number">  
     </div>  
     <button type="button" class="previous-btn">Prev</button>  
     <button type="button" class="next-btn">Next</button>  
    </div>  
    <div class="step step-3">  
     <div class="form-group">  
      <label for="country">country</label>  
      <input type="text" id="country" name="country">  
     </div>  
     <div class="form-group">  
      <label for="city">City</label>  
      <input type="text" id="city" name="city">  
     </div>  
     <div class="form-group">  
      <label for="postCode">Post Code</label>  
      <input type="text" id="postCode" name="post-code">  
     </div>  
     <button type="button" class="previous-btn">Prev</button>  
     <button type="submit" class="submit-btn">Submit</button>  
    </div>  
   </form>  
  </div>  
 </section>  

There is all HTML code for multi steps form, we have div with their steps class, so we target easily. Now you can see output without css then we write css for our HTML multi steps form.

Output of HTML  Multi step form 

CSS for  multi step form 

 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
 }  
 body {  
  font-family: "Montserrat";  
 }  
 section {  
  min-height: 100vh;  
  width: 100%;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background-color: aliceblue;  
 }  
 .container {  
  max-width: 400px;  
  width: 90%;  
  padding: 20px;  
  box-shadow: 0px 0px 20px #00000020;  
  border-radius: 8px;  
  background-color: white;  
 }  
 .step {  
  display: none;  
 }  
 .step.active {  
  display: block;  
 }  
 .form-group {  
  width: 100%;  
  margin-top: 20px;  
 }  
 .form-group input {  
  width: 100%;  
  border: 1.5px solid rgba(128, 128, 128, 0.418);  
  padding: 5px;  
  font-size: 18px;  
  margin-top: 5px;  
  border-radius: 4px;  
 }  
 button.next-btn,  
 button.previous-btn,  
 button.submit-btn {  
  float: right;  
  margin-top: 20px;  
  padding: 10px 30px;  
  border: none;  
  outline: none;  
  background-color: rgb(180, 220, 255);  
  font-family: "Montserrat";  
  font-size: 18px;  
  cursor: pointer;  
  /* text-align: right; */  
 }  
 button.previous-btn {  
  float: left;  
 }  
 button.submit-btn {  
  background-color: aquamarine;  
 }  

Now we complete our css section, now we need only JavaScript functionality for multi steps to form for click ok step and form content change to second steps. Here is our updated output with css.

HTML - CSS project ideas by Code With Random

Javascript for  multi step form 

 const steps = Array.from(document.querySelectorAll("form .step"));  
 const nextBtn = document.querySelectorAll("form .next-btn");  
 const prevBtn = document.querySelectorAll("form .previous-btn");  
 const form = document.querySelector("form");  
 nextBtn.forEach((button) => {  
  button.addEventListener("click", () => {  
   changeStep("next");  
  });  
 });  
 prevBtn.forEach((button) => {  
  button.addEventListener("click", () => {  
   changeStep("prev");  
  });  
 });  
 form.addEventListener("submit", (e) => {  
  e.preventDefault();  
  const inputs = [];  
  form.querySelectorAll("input").forEach((input) => {  
   const { name, value } = input;  
   inputs.push({ name, value });  
  });  
  console.log(inputs);  
  form.reset();  
 });  
 function changeStep(btn) {  
  let index = 0;  
  const active = document.querySelector(".active");  
  index = steps.indexOf(active);  
  steps[index].classList.remove("active");  
  if (btn === "next") {  
   index++;  
  } else if (btn === "prev") {  
   index--;  
  }  
  steps[index].classList.add("active");  
 }  

Now we completed all our HTML css JavaScript coding for multi steps form. You can an output video at bottom.

You can visit our other useful blog for collecting fronted development knowledge.thank you for visit our website ☺!

In this post, we learn how to create  multi step form | multi step form HTML css  with simple coding of HTML css and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

written by - codewithrandom/Anki