Ontario.ca homepage
Français

Ontario Design System

Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Form review

Let users review their form answers before submitting information.

Guiding principle: Ensure users succeed the first time.

About this pattern

Form review helps to:

  • increase a user’s confidence by letting them confirm that they have fully filled out a form
  • make sure all the user’s data is captured
  • reduce error rates by giving the user a chance to notice and correct errors before submitting data

When to use this pattern

Consider implementing a form review when:

  • submitting your form will have a significant impact (for example, applying for benefits)
  • the form has many steps

How it works

Form review user flow

Illustration showing the user flow through a form to a review page, then to a change page and back to the review page.

Where you should show the review page depends on the length of a form:

  • For small or medium transactions, show review pages immediately before the confirmation screen.
  • For large transactions with multiple sections, consider using a review page after each section, and a final review page before the confirmation screen.

Use a summary list on the review page to display the user’s answers and allow them to change their responses.

Provide an action link like “Change” next to each item in your summary list, so that users can edit their answer.

If you have multiple rows with “Change” actions that all take the user to the same place, show a single “Change” link in the section heading instead. This helps avoid repeating the same action link on every row.

Selecting the action link should bring the user to a form page with their answers or selections pre-populated. The form page could be a new page to change answers, or the original page where the user entered the answers.

Bring the user back to the review page when they save their changes. Do not force them to go through the rest of the form again.

Example 1: Individual item change

Example of a review page with individual ‘Change’ links. When the user selects an individual link, a change page loads for the response with the form field pre-populated.

Example 2: Entire section change

Example of a review page with section ‘Change’ link. When the user selects the section heading link, a change page loads for the entire section with the form fields pre-populated.

Change page

Depending on how you develop your form, your change page can either be a new page, or it can re-route the user to the original form page with the following modifications.

On the change page, ensure that:

  • The form elements are pre-populated with the user’s answers or selections.
  • There is a “cancel and return” function to give the user a way to return to the review page without making changes.
  • There is a “save changes” button that returns the user to the review page with the summary list updated. The user should not need to go through the rest of the form again.

If a user’s changed responses require them to answer more questions, show the additional questions before returning them to the review page.

Example

Example of change page when the user has updated their answer. The next page informs the user that they need to provide more information. The final page is a new page that asks for more information.

Best practices

Do

  • Make it clear on the review page that the form or section will not be complete until a user confirms their information is correct.
  • Follow the best practices and accessibility guidance for the summary list component.

Don’t

  • Use accordions on review pages.
  • Count review pages as a step if you’re using a step indicator.

If you have any questions or feedback, please get in touch.