Back to all examples

Confirm that an application was submitted

<GoabText as="h1" mt="none">You have completed the application</GoabText>

      <GoabxCallout type="success" heading="Your application was successful">
        <GoabText mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</GoabText>
        <GoabText mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></GoabText>
      </GoabxCallout>

      <GoabText as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</GoabText>
      <GoabText>
        Other information about what was just completed, other tertiary information, and/or contact information.
        <br />
        Phone: <a href="tel:7801234567">780 123 4567</a>
        <br />
        Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
      </GoabText>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabxButton type="primary">Go to application</GoabxButton>
        <GoabxButton type="secondary">Back to dashboard</GoabxButton>
      </GoabButtonGroup>
<goab-text as="h1" mt="none">You have completed the application</goab-text>

<goabx-callout type="success" heading="Your application was successful">
  <goab-text mt="none" mb="m">You will receive a copy of the confirmation to the email person&#64;email.com</goab-text>
  <goab-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goab-text>
</goabx-callout>

<goab-text as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</goab-text>
<goab-text>Other information about what was just completed, other tertiary information, and/or contact information.
<br/>
Phone: <a href="tel:7801234567">780 123 4567</a>
<br/>
Email: <a href="mailto:information@gov.ab.ca">information&#64;gov.ab.ca</a>
</goab-text>

<goab-button-group alignment="start" mt="2xl">
  <goabx-button type="primary">Go to application</goabx-button>
  <goabx-button type="secondary">Back to dashboard</goabx-button>
</goab-button-group>
<goa-text as="h1" mt="none">You have completed the application</goa-text>

<goa-callout version="2" type="success" heading="Your application was successful">
  <goa-text mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</goa-text>
  <goa-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goa-text>
</goa-callout>

<goa-text as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</goa-text>
<goa-text>Other information about what was just completed, other tertiary information, and/or contact information.
<br>
Phone: <a href="tel:7801234567">780 123 4567</a>
<br>
Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
</goa-text>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary">Go to application</goa-button>
  <goa-button version="2" type="secondary">Back to dashboard</goa-button>
</goa-button-group>

Display a confirmation screen to indicate successful application submission.

When to use

Use this pattern when:

  • A user has successfully completed an application or form
  • You need to confirm the submission was received
  • Users need a confirmation number for their records
  • You want to provide next steps after submission

Considerations

  • Use a success callout to clearly indicate success
  • Include a confirmation number users can reference later
  • Mention where a confirmation email will be sent
  • Provide clear next steps and navigation options
  • Include contact information for questions