Pages

Confirmation pages

Use this pattern to let users know they’ve completed a transaction.

Include a link to the GOV.UK feedback page to allow users to tell you what they think of your transaction.

Open this example in a new tab: confirmation pages
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-panel govuk-panel--confirmation">
          <h1 class="govuk-panel__title">
            Application complete
          </h1>
          <div class="govuk-panel__body">
            Your reference number<br><strong>HDJ2123F</strong>
          </div>
        </div>
        <p class="govuk-body">We have sent you a confirmation email.</p>
        <h2 class="govuk-heading-m">What happens next</h2>
        <p class="govuk-body">
          We’ve sent your application to Hackney Electoral Register Office.
        </p>
        <p class="govuk-body">
          They will contact you either to confirm your registration, or to ask for more information.
        </p>
        <p class="govuk-body">
          <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      {{ govukPanel({
        titleText: "Application complete",
        html: "Your reference number<br><strong>HDJ2123F</strong>"
      }) }}

      <p class="govuk-body">We have sent you a confirmation email.</p>

      <h2 class="govuk-heading-m">What happens next</h2>

      <p class="govuk-body">
        We’ve sent your application to Hackney Electoral Register Office.
      </p>
      <p class="govuk-body">
        They will contact you either to confirm your registration, or to ask for more information.
      </p>

      <p class="govuk-body">
        <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
      </p>
    </div>
  </div>
{% endblock %}

When to use this pattern

You should use a confirmation page at the end of a transaction.

How it works

Confirmation pages reassure users that they have completed a transaction and helps them understand what to expect next.

Your confirmation page must include:

  • a reference number, if there is one
  • details of what happens next and when
  • contact details for the service
  • links to information or services that users are likely to need next
  • a link to your feedback page
  • a way for users to save a record of the transaction, for example, as a PDF

WCAG 2.2 Do not include links, buttons or other interactive elements in the green confirmation panel, as the focus state will not have a minimum contrast ratio of 3:1 with the panel’s background colour.

Open this example in a new tab: confirmation pages second
HTML
<div class="govuk-width-container">
  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <div class="govuk-panel govuk-panel--confirmation">
          <h1 class="govuk-panel__title">
            Application complete
          </h1>
          <div class="govuk-panel__body">
            Your reference number<br><strong>HDJ2123F</strong>
          </div>
        </div>
        <p class="govuk-body">We have sent you a confirmation email.</p>
        <h2 class="govuk-heading-m">What happens next</h2>
        <p class="govuk-body">
          We’ve sent your application to Hackney Electoral Register Office.
        </p>
        <p class="govuk-body">
          They will contact you either to confirm your registration, or to ask for more information.
        </p>
        <p class="govuk-body">
          <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
        </p>
      </div>
    </div>
  </main>
</div>
Nunjucks
{% set mainClasses = "govuk-main-wrapper--l" %}

{% from "govuk/components/panel/macro.njk" import govukPanel %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      {{ govukPanel({
        titleText: "Application complete",
        html: "Your reference number<br><strong>HDJ2123F</strong>"
      }) }}

      <p class="govuk-body">We have sent you a confirmation email.</p>

      <h2 class="govuk-heading-m">What happens next</h2>

      <p class="govuk-body">
        We’ve sent your application to Hackney Electoral Register Office.
      </p>
      <p class="govuk-body">
        They will contact you either to confirm your registration, or to ask for more information.
      </p>

      <p class="govuk-body">
        <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
      </p>
    </div>
  </div>
{% endblock %}

Help users who bookmark the page

Some users will bookmark the confirmation page as a form of receipt. You should allow them to return to the page, whenever possible.

If you cannot, make sure your service responds in a helpful way when users return using a bookmarked link. For example, if people use your service to make an application you could provide links to information on:

  • tracking an application
  • starting a new application
  • what to do or who to contact if they have a problem with their application

WCAG 2.2 Allow users to select and copy text within a confirmation page’s panel component. For example, users should be able to select and copy a booking number. This relates to WCAG 2.2 success criterion 3.3.7 Redundant Entry.

Consider offering an option for the user to copy information in the panel component area into their device’s clipboard if there’s information that the user is expected to:

  • save
  • remember
  • copy

Research on this pattern

Read a blog post about users who bookmark confirmation pages.

Known gaps

Research is needed on the best way to confirm transactions that are part of a wider user task. For example, where you might need to emphasise next steps more than completion of that particular transaction.

Help improve this pattern

To help make sure that this page is useful, relevant and up to date, you can:

Tell us if your service uses this pattern

Take part in our usage survey (opens in a new tab) to help us improve this pattern to better meet the needs of the services that use it.

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.