Back to all examples

Public form

<GoabDetails heading="Who are the primary users for the public form pattern?">
        <GoabText size="body-m" mt="none" mb="none">
          <strong>Primary users:</strong> citizens, public, external
          <br />
          <br />
          You are designing a public service for citizens. It should be designed
          to be as simple and intuitive as possible, while ensuring citizens can
          make complete and informed decisions for themselves using the service.
          <br />
          <br />
          There is an emphasis on an accessible experience with a low cognitive
          load for users who use the service infrequently.
        </GoabText>
      </GoabDetails>

      <GoabText tag="h2" size="heading-l" mt="2xl">
        Pages
      </GoabText>

      <GoabGrid gap="2xl" minChildWidth="400px" mt="xl">
        <div>
          <GoabText size="heading-m" mt="none" mb="m">
            1. Start page
          </GoabText>
          <GoabText size="body-m" mt="none" mb="l">
            This is the starting point for a citizen to begin your form from
            within your service or from Alberta.ca.
          </GoabText>

          <GoabText size="heading-m" mt="2xl" mb="m">
            2. Task list page (optional)
          </GoabText>
          <GoabText size="body-m" mt="none" mb="l">
            Outline the entire process for the user and help them through the
            process by breaking down an experience into individual tasks.
          </GoabText>

          <GoabText size="heading-m" mt="2xl" mb="m">
            3. Question pages
          </GoabText>
          <GoabText size="body-m" mt="none" mb="l">
            Ask a user a question or a small set of related questions.
          </GoabText>

          <GoabText size="heading-m" mt="2xl" mb="m">
            4. Review page
          </GoabText>
          <GoabText size="body-m" mt="none" mb="l">
            Let users check answers before submitting information to a service.
          </GoabText>

          <GoabText size="heading-m" mt="2xl" mb="m">
            5. Results page
          </GoabText>
          <GoabText size="body-m" mt="none" mb="l">
            Let users know that they've completed a form, application, or task
            and tell them what to do next.
          </GoabText>
        </div>
      </GoabGrid>
  );
}
<goab-details heading="Who are the primary users for the public form pattern?">
  <goab-text size="body-m" mt="none" mb="none">
    <strong>Primary users:</strong> citizens, public, external
    <br /><br />
    You are designing a public service for citizens. It should be designed to be as simple and intuitive as possible, while ensuring citizens can make complete and informed decisions for themselves using the service.
    <br /><br />
    There is an emphasis on an accessible experience with a low cognitive load for users who use the service infrequently.
  </goab-text>
</goab-details>

<goab-text tag="h2" size="heading-l" mt="2xl">Pages</goab-text>

<goab-grid gap="2xl" minChildWidth="400px" mt="xl">
  <div>
    <goab-text size="heading-m" mt="none" mb="m">1. Start page</goab-text>
    <goab-text size="body-m" mt="none" mb="l">
      This is the starting point for a citizen to begin your form from within your service or from Alberta.ca.
    </goab-text>

    <goab-text size="heading-m" mt="2xl" mb="m">2. Task list page (optional)</goab-text>
    <goab-text size="body-m" mt="none" mb="l">
      Outline the entire process for the user and help them through the process by breaking down an experience into individual tasks.
    </goab-text>

    <goab-text size="heading-m" mt="2xl" mb="m">3. Question pages</goab-text>
    <goab-text size="body-m" mt="none" mb="l">
      Ask a user a question or a small set of related questions.
    </goab-text>

    <goab-text size="heading-m" mt="2xl" mb="m">4. Review page</goab-text>
    <goab-text size="body-m" mt="none" mb="l">
      Let users check answers before submitting information to a service.
    </goab-text>

    <goab-text size="heading-m" mt="2xl" mb="m">5. Results page</goab-text>
    <goab-text size="body-m" mt="none" mb="l">
      Let users know that they've completed a form, application, or task and tell them what to do next.
    </goab-text>
  </div>
</goab-grid>
<goa-details heading="Who are the primary users for the public form pattern?">
  <goa-text size="body-m" mt="none" mb="none">
    <strong>Primary users:</strong> citizens, public, external
    <br /><br />
    You are designing a public service for citizens. It should be designed to be as simple and intuitive as possible, while ensuring citizens can make complete and informed decisions for themselves using the service.
    <br /><br />
    There is an emphasis on an accessible experience with a low cognitive load for users who use the service infrequently.
  </goa-text>
</goa-details>

<goa-text tag="h2" size="heading-l" mt="2xl">Pages</goa-text>

<goa-grid gap="2xl" min-child-width="400px" mt="xl">
  <div>
    <goa-text size="heading-m" mt="none" mb="m">1. Start page</goa-text>
    <goa-text size="body-m" mt="none" mb="l">
      This is the starting point for a citizen to begin your form from within your service or from Alberta.ca.
    </goa-text>

    <goa-text size="heading-m" mt="2xl" mb="m">2. Task list page (optional)</goa-text>
    <goa-text size="body-m" mt="none" mb="l">
      Outline the entire process for the user and help them through the process by breaking down an experience into individual tasks.
    </goa-text>

    <goa-text size="heading-m" mt="2xl" mb="m">3. Question pages</goa-text>
    <goa-text size="body-m" mt="none" mb="l">
      Ask a user a question or a small set of related questions.
    </goa-text>

    <goa-text size="heading-m" mt="2xl" mb="m">4. Review page</goa-text>
    <goa-text size="body-m" mt="none" mb="l">
      Let users check answers before submitting information to a service.
    </goa-text>

    <goa-text size="heading-m" mt="2xl" mb="m">5. Results page</goa-text>
    <goa-text size="body-m" mt="none" mb="l">
      Let users know that they've completed a form, application, or task and tell them what to do next.
    </goa-text>
  </div>
</goa-grid>

The public form pattern provides a structure for citizen-facing form experiences, emphasizing simplicity, accessibility, and low cognitive load.

When to use

Use this pattern when:

  • Designing a public service for citizens
  • Building forms that should be simple and intuitive
  • Users need to make informed decisions while completing the form
  • The service should accommodate users who use it infrequently

Considerations

  • Follow the “one idea per page” principle to reduce cognitive load
  • Break complex forms into multiple pages with single questions
  • Use task list pages for longer processes with multiple sections
  • Consider using simple progress indicators rather than horizontal steppers
  • Ensure all form elements meet WCAG 2.2 AA accessibility standards