Creating responsive multi step form with bootstrap and Jquery

by  
Share:
Creating responsive multi step form with bootstrap and Jquery

I had received a tutorial request from my blog follower to send him step by step tutorial for creating responsive multi step 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.

View Demo

Plugin used to create multi step responsive form

To create this responsive multi step 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.

<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).

<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.
<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.
<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.

<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.

<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>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Giovan on

Tnks, you saved me a bit of time

Reply
Gregory on

Thank you for making this step by step form responsive, had to ditch another plugin I was using because it was not responsive and made my site ugly on mobile. Thanks a lot.

Reply
Suvojit on

May I know what is v.form() ??

Reply
Shahrukh Khan on

v is the object variable of the jquery validate method.

Reply
Aazam on

All of the three layouts display at a time.I think css is missing in this code.

Reply
Shahrukh Khan on

no it has all the css code in that. its made in bootstrap. make sure the query library path is correct. or check if there is no JavaScript error

Reply
Aazam on

I am using this code for adminLTE bootstrap admin template but it’s not running.

Reply
Shahrukh Khan on

it must be your javascript problem or some jquery conflict.

Reply
Aazam on

v.form() not working I remove it now its running…Thanks.

shivasurya S on

awesome bro 🙂

Reply
vinit on

form is not working in my site

Reply
v@ on

Next button and previous button works very well but my all containers part show default. plz help me

Reply
Fabian on

Great work, thank you for sharing this

Reply
Shahrukh Khan on

Thanks a lot.

Reply
vaibhav on

Hi very helpful code but how to email form details on send button not able to do it

Reply
Shahrukh Khan on

Thanks for your appreciation. But what email do you want to send? I dont get it.

Reply
vaibhav on

Its when a user fill form and selects submit the form entries should be emailed to my email id

rohit on

hi i have the same problem

vaibhav on

Its like when user fills form and clicks on submit button the form entries should be send to the admin email

ishan on

Hi shahrukh, the actual problem that vaibhav is talking about is :

When the user fills his details in the form and submits it. The submitted data must reach us, however we are not getting that.

Shahrukh Khan on

I got it. There can be two solutions to this problem

  1. After every successfull step, store the value in a hidden field (outside the div container but inside form)
  2. Or just when the last button is clicked in the step there, find this code and add this single line under this code

    $(“.open3”).click(function() {
    if (v.form()) {
    // add this line below, to show all form value before submitting the final value
    $(“.frm”).show(“fast”);

vaibhav on

Its like when a client fills up form and click sent it should email the form data to admin email account

Reply
Dinesh on

bro my update code not following below form action path what should i do

plz. give me solution

Reply
mosk on

how can i send the values gotten from the form to mysql database using php

Reply
Ravin on

The download link is not working. I am in much need of code. Please make the download link available.

thanks

Reply
Shahrukh Khan on

its working properly.

Reply
Devin Smith on

if you’re stuck in code then you can use WP Multi Press easy too use plugin which is originally developed by WitoniLabs. You can check there official website for more information.

Reply
Dan Kantimirov on

HI. Thank you for post.
But it has a bug.
Please, update “Step 3 – Validate the form” in line 12 you forgot put “,” in the end of line.

Reply
Shahrukh Khan on

Ok i will. thanks

Reply
ADIZA on

thanks you it’s work.

Reply
asfaquz on

Your site is fantastic.i want to lean more.
Learn more about technology from the link.CSE SOLVE

Reply
سهیل on

hi
thanks for this

but this file not downloadable
please correct this file for download
good luck (;

Reply
Shahrukh Khan on

The download is working fine. please try again.

Reply
swap on

I need to add drop down menu of select in form for step number 2. I able to add menu but how can we test drop down is selected. All values needed to be sent by mail.

Reply
Simon Hans on

Hello

I used your Multistep, and it worked, its lovely, but when i comment “return false;” out, it sends my submitted data to my php page, and then stays there… it does not return the “thank you for your time” on same page

please what am i doing wrong

Reply
Shahrukh Khan on

In your php page, after data submission you need to redirect the page back to your form page. After that you can show the message in either of two ways.

  • Set session in php page and show in form page
  • When redirecting to form page, in your query string set message / set variable and based on variable show message.
Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.