Multi step form | multi step form HTML css 

Welcome🎉 to codewithrandom blog in this blog we learn that how we create multi-step form | multi-step form HTML css  . We use pure HTML & css and javascript for this multi-step form HTML css . Hope you enjoy our blog so 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

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