Multi-part forms

Overview

Where a form is split across multiple screens, use the multi-part styling to present a clear flow to the user.

Steps

Steps are created from a list given the class stepped-process:

Example

The current, active step is given the class current.

The final item in the list has a presentation span element with class stop.

  • Step 1
  • Step 2
  • Step 3
  • Step 4
WCMS use
MVC.net use
Code
  1. <ul class="stepped-process">
  2. <li class="current">Step 1</li>
  3. <li>Step 2</li>
  4. <li>Step 3</li>
  5. <li>Step 4<span class="stop"></span></li>
  6. </ul>
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  1. <ul class="stepped-process">
  2. <li class="complete">Step 1</li>
  3. <li class="current">Step 2</li>
  4. <li>Step 3</li>
  5. <li>Step 4<span class="stop"></span></li>
  6. </ul>

As stages are completed, assign the class complete to the list items. Move the current step accordingly.

  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4
  • Step 1
  • Step 2
  • Step 3
  • Step 4

Buttons

At each stage (excluding the final stage), a next step button must be made available.

This should occupy half the width of the form, and be aligned to the right edge.

The wording of the button can be tailored to the form needs or details of the next step.

A "Back" button may be supplied, but only if it can genuinely take users back to the previous stage.

  1. <ul class="row remove-sides">
  2. <li class="one-half column alpha">
  3. <button class="black" value="step1" name="next" type="Step 3"><i class="icon angle-left"></i> Back</button>
  4. </li>
  5. <li class="one-half column omega">
  6. <button class="green full-width" value="step3" name="next" type="Step 3">Next <i class="icon angle-right"></i></button>
  7. </li>
  8. </ul>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release