Bootstrap Wizard BootZard: A Free Template

Updated on: Jan 19 2021 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

Features

  • Responsive Layout (Bootstrap framework, v3 at the moment)
  • 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

VIEW DEMO

DOWNLOAD: BootZard - Bootstrap Wizard Template (62523 downloads )

LICENSE:

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

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

  8. Bruno Montenegro says:

    Hi there

    I just made a little modification in the script.js:

    ..(document).ready(function(){
    var number_of_steps = $(‘.f1-progress’).find(‘.f1-progress-line’).data(‘number-of-steps’);
    var newStepWidth = (100 / number_of_steps);
    $(‘.f1-step’).css(‘width’, newStepWidth + ‘%’);
    }

    and for the progressbar, just adjust the “data-now-value” to reach the first icon, the next steps will works just fine 🙂

    Hope it helps someone 🙂

    PS:
    If you think the icon steps is too big(my case), replace in style.css:

    .f1-progress { position: absolute; top: 12px; left: 0; width: 100%; height: 1px; background: #ddd; }

    .f1-step-icon {
    display: inline-block; width: 20px; height: 20px; margin-top: 2px; background: #ddd;
    font-size: 16px; color: #fff; line-height: 20px;
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    }

    .f1-step.active .f1-step-icon {
    width: 24px; height: 24px; margin-top: 0; background: #f35b3f; font-size: 22px; line-height: 24px;
    }

  9. Yellow jello says:

    I love your work, but can u please help me to solve this:
    I have a special input that stays empty and sends it’s value to a JavaScript var, this prevented the me from clicking on the submit button, is there a way to avoid the validation test for that input?

  10. Christian says:

    Hello very nice plugin. My questioun is , can we program this to choose one number in specific? Jump to number 4 to number 2, but dont let you jump from number 1 to number 2 , 3 or so if you are not inserted data. thankyou

Leave a Reply

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