A Wizard is a very useful UI component that allows you to present complex or lengthy tasks in a sequence of dialog boxes or well defined steps. The wizard is the ideal choice for presenting registration processes, shopping cart checkout processes or online booking websites. Essentially, wizards are great for any situation where a series of (usually yes/no) questions are used to solve a problem or accept information from the user in a lengthy interactive process.
In this post, you’ll find a list of 8 awesome jQuery wizard plugins which will allow you to add a wizard in your HTML page. These jQuery plugins are simple, lightweight, and come with different options to customize the Wizard. You can easily:
Steps is a simple, lightweight and easy to configure jQuery plugin which allows you to create a step wizard from any grouped elements. This plugin is simple to use and it is only dependent on jQuery library. It comes with various options for customizing the wizard. You can:
https://github.com/artoodetoo/formToWizard
formToWizard is a jQuery plugin which allows you to turn any web form into a multi-step wizard with the help of jQuery library. In order to determine the number of steps involved, this plugin first selects all fieldsets and optains the size of this wrapped set. Next, it iterates through this wrapped set (that returned all fieldsets), wraps each fieldset into a div and appends a paragraph that will hold the “back” and “next” buttons. You can also customize the name of the previous and next buttons.
SmartWizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. There are a lot of features on top of the built-in Bootstrap support, including:
A neat thing about SmartWizard is that the author of this plugin regularly updates the plugin based on the user’s feedback. Based on the user’s feedback, the recent version 4.0 has been completely rewritten from scratch, making it more powerful, robust, scalable, and customizable.
The Material Bootstrap Wizard is a jQuery plugin which is a fully responsive wizard, inspired by the famous Google's Material Design. It is one of the handiest elements that can be used inside a project. Material Bootstrap Wizard breaks the long html form into chunks and lets the user see it one step at a time. This way, the user only has to focus on the current step without being overwhelmed. They will, however, be able to see how many steps they have remaining, so they can assess approximately how long the process will be.
Wizard.js is a jQuery step wizard plugin which uses the bootstrap's modal component to display any type of content in a step-by-step wizard. It takes care of the plumbing for moving back and forth between steps, validation, hooks for key events, etc. The wizard depends on structured HTML to define the wizard and the steps for it. The order of the steps presented is defined by the order of the divs within the wizard. There are lots of customization options available to play around. Each step of a wizard can be validated before moving onto the next step using form validation or custom validation.
https://github.com/masade/stepform
StepForm is a simple and lightweight jQuery plugin that converts any form into a sliding form of step by step wizard. It is an ideal choice for creating sign-up forms. It also performs the validation using a data-validate attribute and so the user can slide to the next step only after any errors on inputs on the current slide have been validated. It also supports keyboard interactions using enter and tab keys to move to the next step or to the next field.
jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. It supports:
It is very lightweight (only 2.9KB minified) and works with all modern browsers.
https://github.com/VinceG/twitter-bootstrap-wizard
Twitter Bootstrap Wizard is a jQuery plugin that uses Bootstrap's tabs component to create step-by-step wizard. It allows users to build a wizard functionality using buttons to go through the different wizard steps and uses events to hook into each step individually. It also allows you to:
Customize next/previous and first/last buttons
Add a progress bar for interactive UI
Supports forms validation
Multiple wizards on the same page
Disable/enable or show/hide steps.
In this post, you’ll find a list of 8 awesome jQuery wizard plugins which will allow you to add a wizard in your HTML page. These jQuery plugins are simple, lightweight, and come with different options to customize the Wizard. You can easily:
- Customize the Wizard buttons
- Control the display for steps
- Add multiple wizards on the same page
- Implement URL navigation
- Add bootstrap support for better UI with no extra effort
- Add Ajax support for async loading the content
- Supports form validations using any validation plugin of your choice
- Choose from various theme options
1. Steps
https://github.com/oguzhanoya/jquery-steps
Steps is a simple, lightweight and easy to configure jQuery plugin which allows you to create a step wizard from any grouped elements. This plugin is simple to use and it is only dependent on jQuery library. It comes with various options for customizing the wizard. You can:
- Set the starting number which starts the wizard at a specific step number
- Implement ‘showBackButton,’ which indicates whether the back button will be visible or not – quite useful if you want to restrict your users from going back to the previous step
- Implement ‘show/hide’ footer buttons – when footer buttons are not visible, then the user can move back and forth on clicking the step number buttons
2. formToWizard
https://github.com/artoodetoo/formToWizard
formToWizard is a jQuery plugin which allows you to turn any web form into a multi-step wizard with the help of jQuery library. In order to determine the number of steps involved, this plugin first selects all fieldsets and optains the size of this wrapped set. Next, it iterates through this wrapped set (that returned all fieldsets), wraps each fieldset into a div and appends a paragraph that will hold the “back” and “next” buttons. You can also customize the name of the previous and next buttons.
3. SmartWizard
http://techlaboratory.net/smartwizard
SmartWizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. There are a lot of features on top of the built-in Bootstrap support, including:
- Responsive themes
- Customizable toolbars
- URL navigation and step selection
- Customizable options,
- Public methods,
- Event support,
- Ajax content loading,
- Keyboard navigation,
- Multiple wizard instances on the same page
A neat thing about SmartWizard is that the author of this plugin regularly updates the plugin based on the user’s feedback. Based on the user’s feedback, the recent version 4.0 has been completely rewritten from scratch, making it more powerful, robust, scalable, and customizable.
4. Material Bootstrap Wizard
https://github.com/creativetimofficial/material-bootstrap-wizard
The Material Bootstrap Wizard is a jQuery plugin which is a fully responsive wizard, inspired by the famous Google's Material Design. It is one of the handiest elements that can be used inside a project. Material Bootstrap Wizard breaks the long html form into chunks and lets the user see it one step at a time. This way, the user only has to focus on the current step without being overwhelmed. They will, however, be able to see how many steps they have remaining, so they can assess approximately how long the process will be.
5. Wizard.js
https://github.com/jeffreypolk/bootstrap-wizard
Wizard.js is a jQuery step wizard plugin which uses the bootstrap's modal component to display any type of content in a step-by-step wizard. It takes care of the plumbing for moving back and forth between steps, validation, hooks for key events, etc. The wizard depends on structured HTML to define the wizard and the steps for it. The order of the steps presented is defined by the order of the divs within the wizard. There are lots of customization options available to play around. Each step of a wizard can be validated before moving onto the next step using form validation or custom validation.
6. Stepform
https://github.com/masade/stepform
StepForm is a simple and lightweight jQuery plugin that converts any form into a sliding form of step by step wizard. It is an ideal choice for creating sign-up forms. It also performs the validation using a data-validate attribute and so the user can slide to the next step only after any errors on inputs on the current slide have been validated. It also supports keyboard interactions using enter and tab keys to move to the next step or to the next field.
7. jQuery Steps
https://github.com/rstaib/jquery-steps
jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. It supports:
- Async content loading
- HTML5 support
- Accessibility support
- State persistence
- Form validation using any validation plugin of your choice
- Cool transition effects
- Easy Navigation
- Keyboard navigation
- Multiple wizards on the same page
It is very lightweight (only 2.9KB minified) and works with all modern browsers.
8. Twitter Bootstrap Wizard
Twitter Bootstrap Wizard is a jQuery plugin that uses Bootstrap's tabs component to create step-by-step wizard. It allows users to build a wizard functionality using buttons to go through the different wizard steps and uses events to hook into each step individually. It also allows you to:
Customize next/previous and first/last buttons
Add a progress bar for interactive UI
Supports forms validation
Multiple wizards on the same page
Disable/enable or show/hide steps.
