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.


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