- Create your standard web form and divide it into steps by using "span" tags or "div" tags. You can also use any other container tag you prefer, like fieldset, dl, etc.
- Assign the "step" class to your container tags. The container tags should also have an unique ID, you can use something like "step1", "step2", "step3" or any other IDs you want.
- Add a submit & reset buttons outside any of the steps containers, preferably at the end of the form.
- Call the jQuery, FormWizard, jQuery-UI js files on the head of your web page. Make sure to call BBQ, formValidation and the Form plugin if you wish to use those features as well.
The examples below are bundled inside the plugin zip-file. If there are missing examples, please contact me and I'll try to add suitable examples.
The examples will open in a new window.
- Straight wizard
- Defining steps using other element types than span. E.g. fieldset elements
- Branching wizard
- Wizard that branches on several steps
- BBQ integration (browser back and forward button)
- step_shown event triggered after a step has been shown
- Wizard methods
- Remote ajax calls after a clicking next (e.g. for server-side validation)
- Custom transition animation
- Multiple wizards on same page
- Branching using a checkbox or radio button
- Custom validation rules and messages
- Setting options for the wizard after initialization
- Sending data to the server after each step using remoteAjax
- Adding and removing steps dynamically using the update_steps method
- Make the wizard ignore certain input fields using the class wizard-ignore
- Cancelling the submit using the beforeSubmit, beforeSend and beforeSerialize callbacks
- Configure the wizard to not use jQuery UI styles
- Add a summary page where the user can edit the given information
- Submit the form without using AJAX
- Add steps using the update_steps method
- before_step_shown triggered before step transitions