How to Create a Multi-Step Form with Bootstrap
Multi-step forms are a great way to improve user experience, especially when dealing with longer forms. By breaking the form into smaller, digestible steps, you make it easier for users to fill out without overwhelming them. In this blog post, we'll guide you through creating a multi-step form using Bootstrap to make it fully responsive and user-friendly.
Why Use Multi-Step Forms?
Multi-step forms enhance usability by splitting lengthy forms into multiple sections. They help reduce user drop-off rates by making forms feel less daunting and improving engagement, as users focus on smaller, more manageable chunks of information.
Here’s a step-by-step guide to building a multi-step form in Bootstrap.
Step 1: Set Up Bootstrap
To get started, we need Bootstrap integrated into our project. You can include it using a CDN (Content Delivery Network) or by downloading Bootstrap and adding it to your project.
Add Bootstrap via CDN
Include the following Bootstrap CSS and JS files in the <head> section of your HTML file:
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS (Optional for interactivity, like tooltips or modals) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
Step 2: Structure Your Multi-Step Form
Next, we’ll create the HTML structure for the multi-step form. Each step of the form will be enclosed in a div, and we'll use buttons to navigate between the steps.
Here’s the basic HTML structure:
<div class="container mt-5">
<form id="multiStepForm">
<!-- Step 1 -->
<div class="form-step">
<h4>Step 1: Personal Information</h4>
<div class="mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" required>
</div>
<button type="button" class="btn btn-primary next-step">Next</button>
</div>
<!-- Step 2 -->
<div class="form-step d-none">
<h4>Step 2: Contact Information</h4>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="text" class="form-control" id="phone" required>
</div>
<button type="button" class="btn btn-secondary previous-step">Previous</button>
<button type="button" class="btn btn-primary next-step">Next</button>
</div>
<!-- Step 3 -->
<div class="form-step d-none">
<h4>Step 3: Confirmation</h4>
<p>Please review your information before submitting.</p>
<button type="button" class="btn btn-secondary previous-step">Previous</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
Step 3: Style and Organize Form Steps
Each step in the form is wrapped inside a div with the class form-step. Initially, only the first step will be visible. The other steps will be hidden using the d-none class from Bootstrap, which hides elements using CSS (display: none).
We'll control the visibility of the steps through JavaScript, enabling users to move forward or backward between the steps.
Step 4: Add JavaScript to Handle Navigation
Now we need JavaScript to handle the logic of moving between the steps. We'll add functionality to show the next step when the "Next" button is clicked, and to go back when the "Previous" button is clicked. The form will only submit after all steps are completed.
Add the following JavaScript at the end of your HTML, right before the closing </body> tag:
<script>
document.addEventListener('DOMContentLoaded', function () {
const formSteps = document.querySelectorAll('.form-step');
const nextButtons = document.querySelectorAll('.next-step');
const prevButtons = document.querySelectorAll('.previous-step');
let currentStep = 0;
// Function to show the current step and hide others
function showStep(step) {
formSteps.forEach((formStep, index) => {
formStep.classList.toggle('d-none', index !== step);
});
}
// Event listeners for "Next" buttons
nextButtons.forEach((button) => {
button.addEventListener('click', () => {
currentStep++;
showStep(currentStep);
});
});
// Event listeners for "Previous" buttons
prevButtons.forEach((button) => {
button.addEventListener('click', () => {
currentStep--;
showStep(currentStep);
});
});
// Show the first step by default
showStep(currentStep);
});
</script>
Explanation:
formSteps: We grab all the.form-stepelements, which represent each form section.nextButtons: These buttons advance the user to the next step when clicked.prevButtons: These buttons allow users to go back to the previous step.currentStep: A variable to track which form step is currently active.
Step 5: Test and Submit the Form
The final step will submit the form after the user completes all steps. The form can now be submitted using a regular form submission or AJAX for a more dynamic experience. You can handle the form submission in the backend as needed.
Full HTML Code for Multi-Step Form
Here’s the complete code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Step Form with Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<form id="multiStepForm">
<!-- Step 1 -->
<div class="form-step">
<h4>Step 1: Personal Information</h4>
<div class="mb-3">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="mb-3">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName" required>
</div>
<button type="button" class="btn btn-primary next-step">Next</button>
</div>
<!-- Step 2 -->
<div class="form-step d-none">
<h4>Step 2: Contact Information</h4>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone Number</label>
<input type="text" class="form-control" id="phone" required>
</div>
<button type="button" class="btn btn-secondary previous-step">Previous</button>
<button type="button" class="btn btn-primary next-step">Next</button>
</div>
<!-- Step 3 -->
<div class="form-step d-none">
<h4>Step 3: Confirmation</h4>
<p>Please review your information before submitting.</p>
<button type="button" class="btn btn-secondary previous-step">Previous</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const formSteps = document.querySelectorAll('.form-step');
const nextButtons = document.querySelectorAll('.next-step');
const prevButtons = document.querySelectorAll('.previous-step');
let currentStep = 0;
function showStep(step) {
formSteps.forEach((formStep, index) => {
formStep.classList.toggle('d-none', index !== step);
});
}
nextButtons.forEach((button) => {
button.addEventListener('click', () => {
currentStep++;
showStep(currentStep);
});
});
prevButtons.forEach((button) => {
button.addEventListener('click', () => {
currentStep--;
showStep(currentStep);
});
});
showStep(currentStep);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Conclusion
With this tutorial, you’ve successfully created a multi-step form using Bootstrap. The steps are easily customizable and can be modified according to your form’s complexity. Multi-step forms enhance the user experience, especially for complex forms, and make the process more streamlined and user-friendly.
Feel free to build on this structure and integrate it into your projects!