How to Create Responsive MultiStep Form with Bootstrap and Jquery
It’s an excellent technique where you want to break the form fields into multiple categories. Also since the design is also responsive it looks great for mobile devices like tablets and smart phones.
Live Demo
Plugin used to Create Multi Step Responsive Form
To create this responsive multistep form, I have used Bootstrap library to create the layout. I have used Jquery Library to used the jquery functions, and finally Jquery Validation Plugin for validating the form. I hope the reader of this article has a fair bit of knowledge with these plugins, if you are a beginners then I would suggest you to go through these plugins first. You can also look at this article How to make custom Ajax form like contact form 7.
Step 1 – Create three divs inside a form tags.
I am not going to narrate how to make a template you can find that in the downloadable script. I am making a 3 steps multi form for this tutorial. In first step it will ask for user name, in second step it will ask for user email address and in third step it will ask for password and confirm password. All these steps are mandatory and properly validated before proceeding to the next step. Check the code how to start building the multi step form below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<form name="basicform" id="basicform" method="post" action="yourpage.html"> <!-- id will be unique, but class name will be same --> <div id="sf1" class="frm"> <!-- user name field will be here with next button --> </div> <!-- id will be unique, but class name will be same --> <div id="sf2" class="frm"> <!-- user email field will be here with next and previous button --> </div> <!-- id will be unique, but class name will be same --> <div id="sf3" class="frm"> <!-- password and confirm password field will be here with submit and previous button --> </div> </form> |
Step 2 – Add fields inside the containers
After you set up three containers, start adding the first field i.e. user name text field inside the form container. It will also have a Next button that will be binded with click event for proceeding to the next step if the field is validated. Make sure you make give a unique class name to the next button (you can use id too).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<fieldset> <legend>Step 1 of 3</legend> <div class="form-group"> <label class="col-lg-2 control-label" for="uname">Your Name: </label> <div class="col-lg-6"> <input type="text" placeholder="Your Name" id="uname" name="uname" class="form-control" autocomplete="off"> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <!-- open1 is given in the class that is binded with the click event --> <button class="btn btn-primary open1" type="button">Next <span class="fa fa-arrow-right"></span></button> </div> </div> </fieldset> |
Just like you have done in step 1, now add a user email text field in step 2. In this container you will have both Previous and Next button that will be binded with the click events. You have to use unique class name for each buttons.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<fieldset> <legend>Step 2 of 3</legend> <div class="form-group"> <label class="col-lg-2 control-label" for="uemail">Your Email: </label> <div class="col-lg-6"> <input type="text" placeholder="Your Email" id="uemail" name="uemail" class="form-control" autocomplete="off"> </div> </div> <div class="clearfix" style="height: 10px;clear: both;"></div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <!-- back2 unique class name --> <button class="btn btn-warning back2" type="button"><span class="fa fa-arrow-left"></span> Back</button> <!-- open2 unique class name --> <button class="btn btn-primary open2" type="button">Next <span class="fa fa-arrow-right"></span></button> </div> </div> </fieldset> |
In the final step the container will have password and confirm password field with Previous button and Submit button. I have used a normal buton and binded it with submit form event. You will know it when you come across jquery scripts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<fieldset> <legend>Step 3 of 3</legend> <div class="form-group"> <label class="col-lg-2 control-label" for="upass1">Password: </label> <div class="col-lg-6"> <input type="password" placeholder="Your Password" id="upass1" name="upass1" class="form-control" autocomplete="off"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label" for="upass1">Confirm Password: </label> <div class="col-lg-6"> <input type="password" placeholder="Confirm Password" id="upass2" name="upass2" class="form-control" autocomplete="off"> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <!-- Unique class name --> <button class="btn btn-warning back3" type="button"><span class="fa fa-arrow-left"></span> Back</button> <!-- Unique class name --> <button class="btn btn-primary open3" type="button">Submit </button> <img src="spinner.gif" alt="" id="loader" style="display: none"> </div> </div> </fieldset> |
Step 3 – Validate the form
After you are done with the fields inside the form tag, bind the form with the jquery validator plugin to validate the form. Check the code below to validate the form. It will return true or false on the basis of user input.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript"> jQuery().ready(function() { var v = jQuery("#basicform").validate({ rules: { uname: { required: true, minlength: 2, maxlength: 16 }, uemail: { required: true, minlength: 2, email: true, maxlength: 100, }, upass1: { required: true, minlength: 6, maxlength: 15, }, upass2: { required: true, minlength: 6, equalTo: "#upass1", } }, errorElement: "span", errorClass: "help-inline", }); }); </script> |
Step 4 – Binding Previous and Next event and form submission
This is the last step involved in the process. You have added class names for the Previous and Next buttons in each container. You just have to bind them with their respective click events.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script type="text/javascript"> jQuery().ready(function() { // Binding next button on first step $(".open1").click(function() { if (v.form()) { $(".frm").hide("fast"); $("#sf2").show("slow"); } }); // Binding next button on second step $(".open2").click(function() { if (v.form()) { $(".frm").hide("fast"); $("#sf3").show("slow"); } }); // Binding back button on second step $(".back2").click(function() { $(".frm").hide("fast"); $("#sf1").show("slow"); }); // Binding back button on third step $(".back3").click(function() { $(".frm").hide("fast"); $("#sf2").show("slow"); }); $(".open3").click(function() { if (v.form()) { // optional // used delay form submission for a seccond and show a loader image $("#loader").show(); setTimeout(function(){ $("#basicform").html('<h2>Thanks for your time.</h2>'); }, 1000); // Remove this if you are not using ajax method for submitting values return false; } }); }); </script> |
