Multistep Form Wizard Features
- Design & Developed to supports any device using latest Bootstrap 3 framework
- Multistep Form Wizard along with multi option
- 100% Responsive and Mobile Friendly
- Easy customization with Plugin Option
- Wizard with Step counter Feature
- Wizard with Step Image feature
- popOver on all Input field
- Jquery Form Validation for all field
- Go to next step with validation or without validation
- Wizard with Clickable Active Step only
- Wizard with Clickable All Step
- Wizard with Disable All Step click
- Wizard with Multi theme Option
How to Use?
Here are described varios ways of using this plugin, you can read and adapt them to your website's requirements. Below are described all options with details.
Simplest Usage - Default HTML Code
CSS Files to Include for Multistep Form Wizard
JS Files to Include
How to initiate Multistep Form Wizard with default option
How to initiate Multistep Form Wizard With Different Option
Options
| S.No. | Option | Discription |
|---|---|---|
| 1 | stepTheme: |
Plugin Provide multi Theme Option. you can adapt them to your website's requeriments. value should be 'defaultTheme' , 'steptheme1' Other Theme option will be added in future. |
| 2 | allstepClickable: |
Plugin Provide all step Clickable feature .you can adapt them to your website's requeriments. value should be 'true' , 'false'.
Note:- If you want Disable all step Click then you need to change following plugin option.
allstepClickable: false,
compeletedStepClickable: false,
|
| 3 | compeletedStepClickable: |
Plugin Provide only Completed step Clickable feature .you can adapt them to your website's requeriments. value should be 'true' , 'false'
Note:- If you want Disable all step Click then you need to change following plugin option.
allstepClickable: false,
compeletedStepClickable: false,
|
| 4 | stepCounter: |
Use this option to Enable Step Counter on Wizard Step. This Option change data-step-counter Attribute value true or false. you can adapt them to your website's requeriments. value should be 'ture', 'false'
Note:- If you use Step counter feature then StepImage: option value automatically will be false .
|
| 5 | StepImage: |
Use this option to Enable Step image on Wizard Step. This Option change data-step-image Attribute value true or false. you can adapt them to your website's requeriments. value should be 'ture', 'false'
Note:- If you want to use the Step Image feature then you need to set Step Counter option value 'false'. Example:- stepCounter:false,
|
| 6 | lastStepIndex: |
This option Store Temporary value to calculate Step Number and Index number. value should be '0' |
| 7 | animation: |
Plugin Provide Animation on Wizard Content section. you can adapt them to your website's requeriments. You can enable and disable animation through change value of this option. value should be 'ture' , 'false'.
|
| 8 | animationClass: |
If you want Animation on wizard and you have set animation:true Then you can place animation Class here. We are using animate.css plugin for animation. So you can place any animation class here but that class will be avialable on animate.css file. for Example animationClass: "fadeIn",
|
| 9 | messageInAnimationClass: |
If you want Animation on error message animation:true Then you can place animation Class here. We are using animate.css plugin for animation. So you can place any animation class here but that class will be avialable on animate.css file. for Example animationClass: "bounceInUp",
|
| 10 | stepValidation: |
If you required form validation on field then you can enable or disable form validation here. value should be 'ture' , 'false'.
|
| 11 | validation: |
This option hold Temporary value to handle next step function with form validation or without form validation.value should be 'ture' .
|
| 12 | field: |
This option Hold all fields for validation. This part will be managed by you according to your form field requirement. This option have may child option, that option are define specific form field.
You can enable and disable validation for specific field. for example if you no need to validate usename field then you can change its child following field: required : false, . default value for all fields are 'true'
you can adapt child option to your website's requeriments. |
| 13 | message: |
This option Store all fields error message for form validation. You can change error message according to your requirement . all field have separte error message. |
Plugin Dependencies
- jQuery
- bootstrap-grid.css
- FontAwesome
- Google Font
- html5shiv and respond
- animate.css