Pages

Confirmation pages

Let users know they’ve completed a transaction.

Open this "Confirmation pages example" example in a new window
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 "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

If you add extra content to the panel, to meet colour contrast ratio requirements use a font size of govuk-body-l for normal weight and govuk-body for bold.

Open this "Confirmation pages second example" example in a new window
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 "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

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 page

To help make sure the Confirmation pages page is useful, relevant and up to date, you can:

Need help?

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