I will provide you with a simple jquery and HTML snippet to create a multi-step form with a progress bar using bootstrap with jQuery.
There are many jQuery plugins available on the web which is providing the same functionality but I don’t want spent time on the customization of plugins so I have created mine one which is more customizable and easy to understand and use.
You can change functionality and HTML views as you want for your project.
I have used bootstrap for front-end UI and jQuery for transition on the client side. This is a simple multi-step form example so I haven’t added validation and animation etc functionality.
I am sure you can easily add this functionality with this jQuery and HTML snippet.
Also Checkout other useful jQuery tutorials,
- Simple Example of Pagination Using jQuery and Bootstrap
- Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
- Simple Example of Hide, Show and Toggle Element Using jQuery
- Dynamically Add and Remove rows in a Table Using jquery
Simple Example of Multi-Step Form Using jQuery and Bootstrap
In this article, we will walk you through the steps to create an elegant and functional multi-step form with a progress bar.
I am assuming you have knowledge of jquery and bootstrap or used them in previous web applications.
Step 1: First, create a new index.html file and include jquery and bootstrap library files into the head section of this file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Here, I am using cdn and googleapi path for jquery and bootstrap files, You can also use these library files as a local Path and replace cdn path with your local storage files path.
Step 2: Create the HTML markup for the multi-step form. We will be using Bootstrap CSS classes to create the layout of the form. Here is the basic HTML structure:
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="alert alert-success hide"></div>
<form id="regiration_form" novalidate="">
<fieldset>
<h2>Step 1: Create your account</h2>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<input type="button" name="password" class="next btn btn-info" value="Next">
</fieldset>
<fieldset>
<h2> Step 2: Add Personnel Details</h2>
<div class="form-group">
<label for="fName">First Name</label>
<input type="text" class="form-control" name="fName" id="fName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lName">Last Name</label>
<input type="text" class="form-control" name="lName" id="lName" placeholder="Last Name">
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous">
<input type="button" name="next" class="next btn btn-info" value="Next">
</fieldset>
<fieldset>
<h2>Step 3: Contact Information</h2>
<div class="form-group">
<label for="mob">Mobile Number</label>
<input type="text" class="form-control" id="mob" placeholder="Mobile Number">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous">
<input type="submit" name="submit" class="submit btn btn-success" value="Submit">
</fieldset>
</form>
in the above code, I have created 3 steps and added HTML fieldset control for each step, so whenever the user clicks the next and previous button we will slide the fieldset based on the current step.
Step 3: Added CSS class in head section of index.html file to hide fieldset except first fieldset or Step.
<style type="text/css">
#regiration_form fieldset:not(:first-of-type) {
display: none;
}
</style>
I have used a first-of-type css selector to show the first HTML fieldset and hide the rest of them, so whenever users come on the form field or reload, they will see the first step instead of all steps.
Step 4: Defining the jQuery variable and navigation between steps using the below jQuery code, we will add the below code into the footer of index.html file using jquery $(document).ready() method.
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});
in the above jquery code, I have added a click event on .next and .previous button class and based on the button type click I am showing the HTML fieldset step form and filling progress-bar control.
Step 5: Finally submit the form using the jquery submit method and added into the footer of $(document).ready() method.
$( "#regiration_form" ).submit(function(event) {
jQuery('.alert-success').removeClass('hide').html( "Handler for .submit() called and see console logs for your posted variable" );
console.log($(this).serialize());
event.preventDefault();
});
Once the user filled all the steps data and clicks submit button, The form will submit all data using the jquery submit() method and showing serialized data of the submitted form data. You can see JSON data into console of browser.
You can download the source code and Demo from the below link.
Excellent Tutorial.