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.

<div class="app-example app-example--tabs">
  <div class="app-example__toolbar">
    <a href="/patterns/confirmation-pages/default/index.html" class="app-example__new-window" target="_blank">
      Open this
      <span class="govuk-visually-hidden">confirmation pages</span>
      example in a new tab
    </a>
  </div>
  <iframe title="Confirmation pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/confirmation-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>

<span id="options-confirmation-pages-example"></span>
<ul class="app-tabs" role="tablist">
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirmation-pages-example-html" role="tab" aria-controls="confirmation-pages-example-html" data-track="tab-html">HTML</a></li>
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirmation-pages-example-nunjucks" role="tab" aria-controls="confirmation-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>

  <div class="app-tabs__heading js-tabs__heading"><a href="#confirmation-pages-example-html" aria-controls="confirmation-pages-example-html" data-track="tab-html">HTML</a></div>

<div class="app-tabs__container js-tabs__container" id="confirmation-pages-example-html" role="tabpanel">
  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>

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

  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#confirmation-pages-example-nunjucks" aria-controls="confirmation-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="confirmation-pages-example-nunjucks" role="tabpanel"><div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% set mainClasses = <span class="hljs-string">&quot;govuk-main-wrapper--l&quot;</span> %}

{% 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 %}