Check answers
Before submitting the form, users should review the details they have entered in order to ensure all information is accurate and complete. In this page, user has the chance to make any necessary changes before finalizing their submission.
Note: In some cases the height of the content is smaller than the height of the viewport especially in desktop screens. As a result, the footer of the page will stick to the middle of the screen which is not ideal for the user experience. To fix that, you can use the
.govgr-layout--full-height CSS utility class combined with .govgr-layout.
When to use this pattern
A form review page is useful when you want users to double-check the information they've entered before final submission. It's particularly beneficial for complex or critical forms where accuracy is paramount. By providing a review page, users can verify their inputs, catch any errors or omissions, and make necessary adjustments before completing the submission. This extra step enhances user confidence, reduces the likelihood of mistakes, and ultimately improves the overall user experience.
How it works
Check answers pages include 3 main elements:
- The service name: Service name is the main title of the start page and it is placed at the top of the page. This should help people understand what your service does and whether they need to use it.
- User Input: A Summary List Component containing all user input submitted in former steps.
- Button: A call-to-action button.
Figma Reference
Find more information regarding this Pattern in Figma Community File
