Pages Confirmation pages

Let users know they’ve completed a transaction.

HTML
Nunjucks

<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">
          <h2 class="govuk-panel__title">
            Application complete
          </h2>
          <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>

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

        <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>

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

      <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

Open this example in a new window

HTML
Nunjucks

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">
          <h2 class="govuk-panel__title">
            Application complete
          </h2>
          <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>

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

        <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>

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

      <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 can’t, 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.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Confirmation pages’ on GitHub