DEV Community

loading...
Cover image for Create a multi step registration from.

Create a multi step registration from.

sankarbala profile image Sankar Bala ・3 min read

Probably you have create a registration or any other form. But sometimes your form may be larger than device viewport in this case it is show very bad. So you should divide your form multi part that is called multi step form.

Step 1
Alt Text

Step 2
Alt Text

Step 3
Alt Text

A multi step form is always user friendly.

This is very easy. Just follow the code bellow. (form.html, style.css and script.js)

italics Here I also use bootstrap 3.

  • form.html
 <div class="wrapper">
        <form action="" method="POST" role="form">
            <div class="step step-1 active">
                <legend>Your personal details</legend>
                <div class="form-group">
                    <label for="fname">First Name</label>
                    <input type="text" name="fname" for="fname" />
                </div>
                <div class="form-group">
                    <label for="lname">Last Name</label>
                    <input type="text" name="lname" for="lname" />
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" name="email" for="email" />
                </div>
                <div class="form-group">
                    <label for="phone">Phone</label>
                    <input type="phone" name="phone" for="phone" />
                </div>

                <button type="button" value="next" class="nxt-btn btn-warning">Next</button>

            </div>
            <div class="step step-2 ">
                <legend>Your address</legend>
                <div class="form-group">
                    <label for="vname">Vilage</label>
                    <input type="text" name="vname" for="vname" />
                </div>
                <div class="form-group">
                    <label for="post">Post office</label>
                    <input type="text" name="post" for="post" />
                </div>
                <div class="form-group">
                    <label for="thana">Thana</label>
                    <input type="text" name="thana" for="thana" />
                </div>
                <div class="form-group">
                    <label for="district">District</label>
                    <input type="text" name="district" for="district" />
                </div>

                <button type="button" value="prew" class="pre-btn btn-danger">Previous</button>
                <button type="button" value="next" class="nxt-btn btn-warning">Next</button>
            </div>
            <div class="step step-3">
                <legend>Your Identity</legend>
                <div class="form-group">
                    <label for="image">Photo</label>
                    <input type="file" name="image" for="image" />
                </div>
                <div class="form-group">
                    <label for="nid">NID</label>
                    <input type="text" name="nid" for="nid" />
                </div>

                <button type="button" value="prew" class="pre-btn btn-danger">Previous</button>
                <button type="button" value="submit" class="submit-btn btn-success">Submit</button>
            </div>

        </form>
    </div>
Enter fullscreen mode Exit fullscreen mode
  • style.css
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: powderblue;
}

.step { 
    display: none; 
}

.step.active {
  display: block;
  height: 500px;
}
.step {
  clear: both;
}

.form-group {
  width: 100%;
  margin-top: 10px;
}

.form-group input {
  width: 100%;
  border: 1.5px solid rgba(5, 2, 2, 0.4);
  padding: 0px;
  font-size: 18px;
  margin-bottom: 8px;
  border-radius: 4px;
}

button.nxt-btn,
button.pre-btn,
button.submit-btn {
  margin-top: 20px;
  padding: 3px 15px;
  border: none;
  outline: none;
  font-size: 18px;
  cursor: pointer;
}
button.pre-btn {
  float: left;
}
button.nxt-btn,
button.submit-btn {
  float: right;
}
Enter fullscreen mode Exit fullscreen mode

*script.js

const steps = [...document.querySelectorAll(".step")];
const btnList = document.querySelectorAll("button");
const form = document.querySelector("form");


btnList.forEach((button) => {
    button.addEventListener("click", (e) => {
        let btnValue = e.target.value;
        let index = 0;
        let active = document.querySelector("form .step.active");
        index = steps.indexOf(active);
        steps[index].classList.remove("active");
        btnValue === "next"
            ? index++
            : btnValue === "prew"
                ? index--
                : alert("Form submited");
        steps[index].classList.add("active");

    });
});
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide