Multi Step Registration Form with Bootstrap, CSS3, jQuery

Published on: May 31 2015 by Anli

Multi Step Registration Form with Bootstrap, CSS3, jQuery

After the 3 registration forms published a few weeks ago, today I took the same design and code, made some small modifications and created a multi step form that you can download for free as usual.

The new registration form template is responsive and made with Bootstrap, CSS3 and jQuery (and also HTML, obviously). These types of forms are often used when you need to collect a large number of data in your websites or applications, resulting in a nice and never boring user experience.

Some other features are: fullscreen background, Font Awesome icons, Retina ready, simple jQuery form validation, etc. Below you’ll find the full list of features, the live preview link and the download link. Enjoy!

You might also like:

BootZard – Bootstrap Form Wizard Template


  • Multi-step Registration Form
  • Responsive Layout (Bootstrap framework)
  • Fullscreen Background
  • Simple jQuery Form Validation (to prevent users from leaving empty fields)
  • Font Awesome icons
  • Retina ready

Preview Images

Step 1

Multi Step Registration Form - Step 1

Step 2

Multi Step Registration Form - Step 2

Step 3

Multi Step Registration Form - Step 3

How To Use The Template

Use the “index.html” file to modify the HTML code. The style can be changed from the CSS files in the “css” folder (assets/css).

In the template I have also used some Javascript (jQuery) for the form validation and the fullscreen background. You can find this code in the “scripts.js” file (assets/js).

The images are located in the “img” folder (assets/img). When you change the images, make sure you create also the “@2x” version (double size images) for Retina devices (iPhone, iPad).

Demo, Download and License


DOWNLOAD: Multi Step Registration Form - Bootstrap, CSS3, jQuery (13256)


You can use this multi-step registration form template in personal and commercial projects, but you can’t sell or distribute it directly, “as is”. If you plan to use it, a link to this page or any form of spreading the word will be much appreciated.

Photos by:

Want More?

If you need a template with more layouts, color schemes and features, along with free support and free updates, you should take a look at the premium template Marco:

Marco: Bootstrap Multi-purpose Landing Page

Marco: Bootstrap Multi-purpose Landing Page

34 Comments So Far

  1. Pepijn says:

    Hi there,

    Just downloaded your creation, wich looks great.

    Is there an easy wayh to add file upload to the form…? and how should i do that?

    Kind regards


    • Anli says:

      Thanks Pepijn, I’m glad you like it!

      An easy way is to Google it, learn how to do it, and then do it.

      Maybe I’ll write a tutorial in the future…

    • balas says:

      have you ever heared about jquery ajax form that will do it for you with this registration.

    • Masivuye says:

      in your form tage add this : enctype=”multipart/form-data”

      to look like

      Your fields here…..

      Then use php to upload and save the file

      2097152) {
      $errors[] = ‘File size must be excately 2 MB’;
      if (empty($errors) == true) {
      move_uploaded_file($file_tmp, $target_dir . “/” . $file_name);
      $success= “Error! File uploaded “;

      } else {
      $dataErrors = “Error!” . $errors . “”;

  2. John says:

    Hi this is really awesome i love what you have done. I know its asking for a lot but would you consider a step by step tutorial for this ?

  3. Cristian says:

    Hi, how can I integrate it with drupal?
    Thanks in advance


  4. Pisyek says:

    Hi Anli.

    Your post really inspiring me. Thanks for the sharing. 🙂

  5. Francisco says:

    This is really awesome!
    Now, how can we go into validating fields before users go to the next step?

    As of now, it only checks if values are empty:

    if( $(this).val() == “” ) {
    next_step = false;

    Thanks and keep up the good work!

    • Anli says:


      It depends what and how you want to validate them.
      You can use only Javascript or you may need to validate them from the server, using PHP for example.

  6. Tina Mishra says:


    It’s really very helpful…. 🙂

  7. Jack says:

    HI Anli, I’m a junior Dev Working with a bunch of different multi-step forms. I really like the style and the transitions on this pluggin. I also like that it is built in with validation. I personally like to use bootstrap fields.

    I was wondering if

    A) Bootstrap fields would be compatible with the JS files included or if I’d need to go in and make edits.

    B) If these forms are capable of sending content through a HTTP POST

    C) How complex it would be to add additional steps.

    Know that’s alot to answer, appreciate your time, and project!

    • Anli says:

      Hi Jack. I’m glad you like the template.

      A) You have to make edits. Anyway, I don’t know what you mean with “Bootstrap fields”.

      B) Yes, I think.

      C) It depends.

  8. Jack says:

    Let me post it in a smaller comment.

    How do I get the validator to check and pass other types of fields like selectors and radio-buttons?

  9. Javier S says:

    Thanks! I am working on some modal registration form and I have already came to your website by chance two times, and both times I was able to solve my problems. Your code is awesome! keep up the good work it is really appreciated. 🙂

  10. Muhamad shodri says:

    Thanks for sharing tutorial. I like it 😀

  11. Steve says:

    I know this is almost a year old but anyway to add or just tell me how to make a dropdown field required.. Ive modified everything and it all works but I just cant get the dropdown to be required.. thx!

  12. Chris says:

    Came across this today. Really sleek implementation, great work!

  13. Julia says:

    Great work, really good stuff.. Only tiny bit of constructive criticism Id make about the form – is if you want to customise, then you really need to rewrite a whole load of the JS file.. The validator is too global and also doesn’t include support for radio buttons, check boxes etc. Furthermore, there is no support for when inputs are not required. Aside from that – great..

    • Anli says:

      I’m glad you like it, Julia.

      Thanks for the comment and the suggestions!

      Yes, I know, the validator is very simple. I’ll add new features in the next version.

  14. Jagadeesh Motamarri says:

    Nice work! Would be nice to have a review step.

  15. Val says:

    Question – how do you make the submit button link someone (when the form is valid)?


  16. Juliano says:

    Good evening, is there a way to use jQuery Validate with its Multi Step? I did some research and still could not make the integration between the two, if that is possible will become much easier and effective way to validate the forms.

    If you have created something can help in research?

Leave a Reply