Create Multi Step Form Html Css Javascript( Source Code)

Create Multi Step Form Html Css Javascript( Source Code)

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 of HTML css. Hope you enjoy our blog, first, let’s 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.

100+ Front-end Projects for Web developers (Source Code)

Multi Step Form

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

Learn Css In Easy Way

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.

50+ Front-end Projects With Source Code

Now you can see output without css then we write css for our HTML multi steps form.

The 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 for multi step form, 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.

 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

 

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 the bottom.

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

10+ Javascript Project Ideas For Beginners( Project Source Code)

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 

Share on:

0 thoughts on “Create Multi Step Form Html Css Javascript( Source Code)”

Leave a Comment