Splitting a complex form into multiple steps accomplishes a few things:
Reduces cognitive overhead by organizing and presenting related input fields
Facilitates a potentially linear or evolving process
Can provide improved contextual or evolving help
Basic functionality
A wizard is usually composed of:
A list of steps, either horizontally or vertically
A collection of form controls and help text organized into steps
Buttons for navigation
Validation
Steps
In many cases it’s beneficial to show the list of steps a wizard will have. Depending on the number of steps and space available, steps can be listed vertically or horizontally.
Validation
Indicate a step’s validity
Show a check icon when valid (only if the user has left/submitted the form with valid input)
Show a warning icon when invalid (only if the user has left/submitted the form with errors)
Navigation
Allow for navigating to previous steps when possible
In some cases, skipping ahead is applicable
Navigation may evolve depending on previous steps
Vertical steps
Use vertical steps when there are 5 or more steps, when there are nested steps, or when steps are categorized.