Creating responsive multi step form with bootstrap and Jquery

30

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.

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

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.

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.

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.

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.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

30 Comments

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

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

        • 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”);

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

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.