Examples

General guidelines

1. 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.
2. 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.
3. Add a submit & reset buttons outside any of the steps containers, preferably at the end of the form.
4. 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.

Examples

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.

1. Straight wizard
2. Defining steps using other element types than span. E.g. fieldset elements
3. Branching wizard
4. Wizard that branches on several steps
5. BBQ integration (browser back and forward button)
6. step_shown event triggered after a step has been shown
7. Wizard methods
8. Remote ajax calls after a clicking next (e.g. for server-side validation)
9. Custom transition animation
10. Multiple wizards on same page
11. Branching using a checkbox or radio button
12. Custom validation rules and messages
13. Setting options for the wizard after initialization
14. Sending data to the server after each step using remoteAjax
15. Adding and removing steps dynamically using the update_steps method
16. Make the wizard ignore certain input fields using the class wizard-ignore
17. Cancelling the submit using the beforeSubmit, beforeSend and beforeSerialize callbacks
18. Configure the wizard to not use jQuery UI styles
19. Add a summary page where the user can edit the given information
20. Submit the form without using AJAX
21. Add steps using the update_steps method
22. before_step_shown triggered before step transitions