A Bootstrap / jQuery checkout / step wizard plug-in: 4 demos

The step wizard plug-in

The SmartWizard is a cool plug-in for creating the step by step process for different purposes like checkout, account creation with validation etc.

The plug-in is based on jQuery with the support of Bootstrap framework. In the following section, you may see the demos and how to setup SmartWizard plug-in in your website.

A demo with default wizard

In this demo, the simple content is displayed in a default view. You may use circles and arrows as well for showing the steps of the process.

Above the content with steps wizard and at the bottom, you may see the buttons for proceeding to next steps, have a look:

bootstrap wizard steps

See online demo and code

An example of using the circles for showing steps

Using the content as in above example except the circles is used for showing the steps. Besides, different Bootstrap buttons are used than above demo. See the demo and code below:

bootstrap wizard circles

See online demo and code

The markup for this example:

 

The script:

 

 

You may get the complete code including the dependent JS/CSS files like jQuery, Bootstrap, and plug-in files from the demo page.

A demo of wizard with arrows

You may also use the arrows option provided in the plug-in. For that, simply change the theme option in JS code and include the CSS file of the circle that comes with the plug-in package (download link below).

Have a look at arrows theme wizard:

bootstrap wizard arrows

See online demo and code

A demo with form fields with validation

You may also create a form in steps as using this nice plug-in. See this demo where a form is divided into four steps and fields are validated in each step. Try by entering the email, name etc. fields and press next button:

bootstrap wizard form

See online demo and code

How to setup this Bootstrap wizard plug-in?

As you can see in the demo pages, you have to include the jQuery, Bootstrap and plug-in JS and CSS files in appropriate places. If you want to use the circles or arrows themes then use the respective CSS file.

You may download the plug-in package from the Github website here.

You may also grab the required files from the demo page by view source the code.