Form wizard

Examples

FormWizard: Advanced (?) CSS styling.

While the user proceed to the end of the wizard some inner working are performed form the plugin beside the simple page change and business rule enforcing.

When a page is displayed, the container (form) is decorated with a class called after the currentPageClassPrefix property. Given the property default value ("wizard-current") you will have the container decorated with a class called wizard-current-<index of the current page>.

The pages are indexed starting from zero. There are two extra marks, wizard-current-last and wizard-current-first used when the user is on the last and first page respectively.

In this example you will see the control buttons appear on appropriate pages (eg. the previous button is hidden in the first page). The labels on the left leverage on the same mechanism to show the current page.

Press this button to see it at work:

And peruse the css used to style the wizard to better comprehend what I mean.

The Form

  • First page
  • Second page
  • Third page
  • Fourth page
Contact Data

Insert your email and let me send you a ton of spam. You can change idea later in the submission process. Sure, I swear.

Beware - Hic sunt leones

Maybe in this page there is something annoying to people not used to think to an animal being as a source of food or fabric, and we don't want to harm them.

Time to input a complicate message

Insert your message below

Summary

Your mail is and the message you filed is

You can go back and change the previously inputed datas or press the submit button to send your data to the nearest black hole.

Obviously, the widget contained in the several pages of the wizard can be scripted as usual as you will see to the forth example