Multi step form | Multi step form html css | Javascript Multi Step Form
What is multi step form and when should we use it?
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
* {
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.
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
Awesome content �� very helpful for beginners like me
ReplyDeletePost a Comment