Bootstrap Wizard BootZard: A Free Template

Published on: May 30 2016 by Anli

Bootstrap Wizard BootZard: A Free Template

I think you already know that having forms with many input fields in your website makes it very boring for your users, often resulting in them leaving within a few seconds.

Well, this problem can be fixed by using multi-step forms, also known as form “wizards”, improving the user experience when you need to collect a large number of data.

Another problem is that finding a free high-quality wizard form that can be used with Bootstrap can be a long task.

For these reasons, today’s web design resource is a Bootstrap form wizard template which is: free, beautiful (I hope you like it) and comes with fields validation.

Take a look below to learn more!

You might also like:

Multi Step Registration Form with Bootstrap, CSS3, jQuery


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

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 used some Javascript (jQuery) code for the form validation and the fullscreen background. You can find this code in the “scripts.js” file (assets/js). I have added some comments to explain the code.

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

Tutorial: Learn how to add a new step to this form

Demo, Download and License


DOWNLOAD: BootZard - Bootstrap Wizard Template (27766 downloads)


You can use this wizard 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.

Want More Forms?

Try Marco. It comes with 30+ forms:

Marco Template: Login Forms

Marco Template: Registration Forms

9 Comments So Far

  1. Lloyd Charlier says:

    Really like the look/functionality of new BootZard forms wizard but I have a question. I need to increase the number of steps from three to four. Out-of-the-box, the designation/configuration yielding three steps appears to be defined by the the following :

    Is this correct? If so, for four (4) steps, do I need to increase both the steps value and the two percentage values (“16.66%”)? If the percentages do indeed need to be modified, what should they be for four (4) steps? What is the algorithm in play here?

    Thanks in advance for any-and-all assistance!

  2. This is fine says:

    Please I would want to increase the size of the form. the white are. Will that be possible

  3. Efrain says:

    Hello and thank you very much for this template. I’m using it for a basic job application form on my site. I’m using a few dropdown fields and I was wondering how to make those validate as well. Any help will be greatly appreciated. Thanks again.

  4. Rex says:

    This is awesome! Thank you!! Quick question, I would like to make the step icons active links once they have been activated. How can I do this? So, if the step has not been activated yet, the link should not be working, but if the step has been completed, I want the icons to be active links so the user can navigate back to their previous steps using the icons.

    Thanks for your help!

  5. Karina says:

    I would like to increase the width of the white background of the form, which css can I do this?

  6. Marrokings says:

    I have problems with checkboxes, it shows them misaligned with the style

  7. Shegaie says:

    For the “bar_progress” I hade a little problem, In the jquery part when you make the bar advance, instead of addition, it make a concatenation. If you have this problem just add parseFloat in front of NowValue and 100/number_of_step.

Leave a Reply

To learn how we use your data when you comment, read our Privacy Policy here.