Back to all examples

Confirm that an application was submitted

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

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

      <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">
        <GoabButton type="primary">Go to application</GoabButton>
        <GoabButton type="secondary">Back to dashboard</GoabButton>
      </GoabButtonGroup>

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