Multi-Page Forms

Status: This is an in-progress, unapproved draft.

Where possible, divide long forms into multiple smaller forms that constitute a series of logical steps or stages. This helps make long forms less daunting and easier to understand, particularly for people who are less experienced using computers or who have various cognitive disabilities. The following basic principles should apply for multi-step forms:

  • Repeat overall instructions on every page.
  • Split the form up according to the topic of the form fields on a page. For example, in an online shop, shipping and payment information are on separate pages.
  • Make is easy to skip optional stages. If a page is optional it makes sense to mention this information in the main heading of the page as well.
  • If possible, don’t set a time limit to fill out the form. If a time limit is required, provide a feature that allows the user to adjust or extend the time limit.

Indicating progress

If possible, the first form page should explain how many pages will follow, and on each page users should be informed about the progress they are making.

Using the page title

The <title> element is the first item read by many people, such as screen reader users. Changing the title of the page to include the progress gives immediate feedback. This information should precede other information provided in the title, such as the name of the step or any error notifications.

Example:
Step 2 of 4: Shipping Address – Complete Purchase – Galactic Teddy Bears Shop
Code snippet: 
<title>Step 2 of 4: Shipping Address – Complete Purchase – Galactic Teddy Bears Shop</title>

Using the main heading

Using the main heading to inform users is a good way to provide the same information for people scanning the page visually, as the main heading usually is prominent in the document.

Example:

Shipping Address (Step 2 of 4)

Code snippet: 
<h1>Shipping Address (Step 2 of 4)</h1>

Using the HTML5 progress element

HTML5 provides a progress element that can be used to inform users about the progress. This can be particularly useful in situations where the number of steps depends on user input, such as in a survey where steps are skipped depending on how questions were answered.

Example:
Survey (Step 2 of circa 7)
Survey (Step 3 of circa 7)
Survey (Step 6 of circa 7)
Survey (Finished)
Code snippet: 
Survey <progress max="7" value="1">(Step 2 of circa 7)</progress><br>

Survey <progress max="7" value="3">(Step 3 of circa 7)</progress><br>

Survey <progress max="7" value="6">(Step 6 of circa 7)</progress><br>

Survey <progress max="7" value="7">(Finished)</progress>

Using step-by-step indicator

If a form has a known number of steps to be completed, a step-by-step indicator can help users orient themselves. In the example below, we use an ordered list with a list item for every step. Visually hidden text is used to indicate the current and completed steps. If possible, provide a link to steps already completed, so the user can review them. In this case, any data already entered in the current step should be saved.

Example:
  1. Completed: Billing Address
  2. Current: Shipping Address
  3. Review Order
  4. Payment
  5. Finish Purchase
Code snippet: HTML
<div class="tlwrapper">
  <ol class="timeline">
    <li class="timeline-past">
        <span class="visuallyhidden">Completed: </span>
        <a href="billing.html">Billing Address</a>
    </li>
    <li class="timeline-current">
      <span class="visuallyhidden">Current: </span>
      <span>Shipping Address</span>
    </li>
    <li><span>Review Order</span></li>
    <li><span>Payment</span></li>
    <li><span>Finish Purchase</span></li>
  </ol>
</div>

Success Criteria:

  • 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

  • 2.2.1 Timing Adjustable: For each time limit that is set by the content, at least one of the following is true:

    • Turn off: The user is allowed to turn off the time limit before encountering it; or
      • Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
    • Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
    • Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
    • Essential Exception: The time limit is essential and extending it would invalidate the activity; or
    • 20 Hour Exception: The time limit is longer than 20 hours.
    (Level A)

  • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

Techniques: