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

Features

  • 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

VIEW DEMO

DOWNLOAD: BootZard - Bootstrap Wizard Template (4835)

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

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

Leave a Reply