Introduction
When designing web forms that require users to input a significant amount of information, it’s essential to ensure a seamless user experience. Multi-step forms, also known as wizards, are an effective way to break down complex forms into smaller, more manageable sections, keeping users engaged and increasing form completion rates. In this tutorial, we’ll guide you through the process of building a dynamic multi-step form in Bootstrap 5 using jQuery. By the end, you’ll have a functional and visually appealing multi-step form that you can easily integrate into your web projects.
Setup
To get started, create a new HTML file and include the necessary CSS and JavaScript libraries. For this tutorial, we’ll use Bootstrap 5 and jQuery. You can include the following CDN links in your HTML file:
<!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 using Bootstrap 5 and jQuery</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- Your form content will go here -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.min.js"></script>
</body>
</html>
HTML Structure
Next, let’s define the HTML structure for our multi-step form. We’ll create a simple four-step form to track the progress:
<section class="mt-4">
<div class="container">
<form class="card">
<div class="card-header">
<nav class="nav nav-pills nav-fill">
<a class="nav-link tab-pills" href="#">Personal Details</a>
<a class="nav-link tab-pills" href="#">Address Details</a>
<a class="nav-link tab-pills" href="#">Company Details</a>
<a class="nav-link tab-pills" href="#">Finish</a>
</nav>
</div>
<div class="card-body">
<div class="tab d-none">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Please enter name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Please enter email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" name="password" id="password" placeholder="Please enter password">
</div>
</div>
<div class="tab d-none">
<div class="mb-3">
<label for="name" class="form-label">Address 1</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Please enter address 1">
</div>
<div class="mb-3">
<label for="email" class="form-label">Address 2</label>
<input type="email" class="form-control" name="email" id="email" placeholder="Please enter address 2">
</div>
<div class="row">
<div class="mb-3 col-md-6">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" name="city" id="city" placeholder="Please enter city">
</div>
<div class="mb-3 col-md-6">
<label for="state" class="form-label">State</label>
<input type="state" class="form-control" name="state" id="state" placeholder="Please enter state">
</div>
</div>
</div>
<div class="tab d-none">
<div class="mb-3">
<label for="company_name" class="form-label">Company Name</label>
<input type="text" class="form-control" name="company_name" id="company_name" placeholder="Please enter company name">
</div>
<div class="mb-3">
<label for="company_address" class="form-label">Company Address</label>
<textarea class="form-control" name="company_address" id="company_address" placeholder="Please enter company address"></textarea>
</div>
</div>
<div class="tab d-none">
<p>All Set! Please submit to continue. Thank you</p>
</div>
</div>
<div class="card-footer text-end">
<div class="d-flex">
<button type="button" id="back_button" class="btn btn-link" onclick="back()">Back</button>
<button type="button" id="next_button" class="btn btn-primary ms-auto" onclick="next()">Next</button>
</div>
</div>
</form>
</div>
</section>JavaScript Functionality
Lastly, let’s add the JavaScript functionality to make our multi-step form work.
var current = 0;
var tabs = $('.tab');
var tabs_pill = $('.tab-pills');
loadFormData(current);
function loadFormData(n) {
$(tabs_pill[n]).addClass('active');
$(tabs[n]).removeClass('d-none');
$('#back_button').attr('disabled', n == 0 ? true : false);
n == (tabs.length - 1) ? $('#next_button').text('Submit').removeAttr('onclick') : $('#next_button').attr('type', 'button').text('Next').attr('onclick', 'next()');
}
function next() {
$(tabs[current]).addClass('d-none');
$(tabs_pill[current]).removeClass('active');
current++;
loadFormData(current);
}
function back() {
$(tabs[current]).addClass('d-none');
$(tabs_pill[current]).removeClass('active');
current--;
loadFormData(current);
}Conclusion
In this tutorial, we successfully built a multi-step form or wizard using Bootstrap 5 and jQuery. Multi-step forms improve user experience and increase form completion rates by breaking down complex forms into manageable sections. You can now integrate this dynamic multi-step form into your web projects to collect user information more effectively. Remember to continuously optimize the design and user experience to ensure a seamless journey for your users when interacting with multi-step forms. Happy coding!
Example
Below is an example of a Multi Step Form HTML or Wizard in Bootstrap 5 using jQuery. This multi step form HTML example demonstrates how to create a simple multi-step form with HTML, CSS, and JavaScript, and it can be viewed on CodePen.
See the Pen Multi Step Form or Wizard in Bootstrap 5 | Empty Code by Empty Code (@emptycodeIN) on CodePen.
