Pages Confirmation pages

Let users know they’ve completed a transaction.

Open this "Confirmation pages" example in a new window
HTML
<div class="govuk-width-container">

  <div class="govuk-main-wrapper">
    <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>
  </div>

</div>
Nunjucks
{% from "panel/macro.njk" import govukPanel %}

<div class="govuk-width-container">

  <div class="govuk-main-wrapper">
    <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>
  </div>

</div>

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 "Confirmation pages" example in a new window
HTML
<div class="govuk-width-container">

  <div class="govuk-main-wrapper">
    <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>
  </div>

</div>
Nunjucks
{% from "panel/macro.njk" import govukPanel %}

<div class="govuk-width-container">

  <div class="govuk-main-wrapper">
    <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>
  </div>

</div>

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

Discuss ‘Confirmation pages’ on GitHub