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
Step 2
Step 3
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>
- 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;
}
*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");
});
});
Top comments (0)