Feature Coming Soon!
The newsletter functionality is under development.
This project demonstrates a clean and functional Multi-step Form built with HTML, CSS, and JavaScript. It's designed to break down complex forms into smaller, manageable steps, improving user experience by reducing cognitive load and making the form completion process less daunting. The form includes navigation buttons to move between steps and basic input fields for collecting user data.
Key features include a simple, intuitive user interface with clear step progression. Users can navigate forward and backward through the form steps, with only one step visible at a time. The form collects various types of information, such as personal details, contact information, and address details, across different steps. The JavaScript handles the display logic for each step and collects all form inputs upon submission. The design is minimal and user-friendly, ensuring a smooth and efficient data entry process.
The HTML structure for the Multi-step Form is organized into a main `form` element containing multiple `div` elements, each representing a distinct step of the form. Each `step` `div` includes various `form-group` containers for input fields and their corresponding labels. Navigation buttons (`next-btn`, `previous-btn`, `submit-btn`) are placed within each step to control progression. The `active` class is dynamically added or removed by JavaScript to control the visibility of each step. This modular HTML setup allows for clear separation of form sections and easy manipulation via JavaScript.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-step form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section>
<div class="container">
<form>
<div class="step step-1 active">
<div class="form-group">
<label for="firstName">First Name</label>
<input autocomplete="off" type="text" id="firstName" name="first-name" />
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input autocomplete="off" type="text" id="lastName" name="last-name" />
</div>
<div class="form-group">
<label for="nickName">Nick Name</label>
<input autocomplete="off" 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 autocomplete="off" 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 autocomplete="off" 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>
<!-- partial -->
<script src="app.js"></script>
</body>
</html>
The CSS for the Multi-step Form focuses on creating a clean, modern, and responsive layout. It centers the form within the viewport and applies basic styling to the container, including padding, shadows, and rounded corners. Each form step is initially hidden (`display: none`) and only made visible when the `active` class is applied by JavaScript. Input fields and labels are styled for readability and a consistent appearance. Navigation buttons (`next-btn`, `previous-btn`, `submit-btn`) are positioned using `float` for easy left/right alignment and are styled with distinct background colors and padding. The overall design emphasizes simplicity and user-friendliness, ensuring a smooth transition between form steps.
* {
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;
}
The JavaScript for the Multi-step Form manages the visibility and progression of the form steps. It retrieves all step elements, next/previous buttons, and the form itself. Event listeners are attached to the "Next" and "Prev" buttons to trigger the `changeStep` function. This function determines the current active step, removes the `active` class from it, and adds the `active` class to the next or previous step based on the button clicked. Additionally, a submit event listener on the form prevents default submission, collects all input values, logs them to the console, and resets the form. This script provides the core interactive functionality for the multi-step form, ensuring a smooth user flow.
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");
}
Watch a live demonstration of the Multi-step Form below.
This Multi-step Form project provides a practical and user-friendly solution for collecting extensive user data without overwhelming the user. By breaking down the form into logical steps, it enhances the overall user experience and can lead to higher completion rates. The clean design and intuitive navigation make it a versatile component for various applications, from registration forms to complex surveys.
You can easily customize this component by:
For enhanced accessibility, ensure that keyboard navigation is fully supported and that screen readers can correctly interpret the form's structure and current step. Consider adding ARIA attributes to improve the semantic meaning of the form elements.
Click the button below to download the full source code. Download will be ready in 10 seconds.
Receive coding tips and resources updates. No spam.
We respect your privacy. Unsubscribe at any time.