Question pages

This is the starting point for a citizen to begin your form from within your service or from Alberta.ca.

One question

Save and continue

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

<a href="#" className="back-link">
  Back
</a>
<GoAFormItem mt="2xl" label="Are you currently in school?" labelSize="large" helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
  <GoARadioGroup name="school" ariaLabel="are you currently in school?" onChange={onChange}>
    <GoARadioItem value="yes" label="Yes"></GoARadioItem>
    <GoARadioItem value="no" label="No">
      No
    </GoARadioItem>
  </GoARadioGroup>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Additional background information

View in Figma

Back

Current school status

School can encompass foundational programs that help individuals gain basic skills for further learning and living, such as literacy and numeracy courses. It also includes skills and employment training programs, designed to equip you with specific skills for the job market.

Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and continuing education courses for professional or personal development, are also categorized under 'school'.

Contact your provider if you’re concerned about your school status.

Save and continue

h2.section-title {
  margin-bottom: var(--goa-space-l);
}

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

a.back-link + h2 {
  margin-top: var(--goa-space-2xl);
}

<a href="#" className="back-link">
  Back
</a>
<h2 className="section-title">
  Current school status
</h2>
<p>
  School can encompass foundational programs that help individuals gain basic skills for further learning and living, such as literacy and numeracy courses. It also includes skills and employment training programs, designed to equip you with specific skills for the job market.
</p>
<p>
  Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and continuing education courses for professional or personal development, are also categorized under 'school'.
</p>
<p>
  Contact your provider if you’re concerned about your school status.
</p>
<GoAFormItem label="Are you currently in school?" mt="xl">
  <GoARadioGroup name="school" ariaLabel="are you currently in school?" onChange={onChange}>
    <GoARadioItem value="yes" label="Yes"></GoARadioItem>
    <GoARadioItem value="no" label="No"></GoARadioItem>
  </GoARadioGroup>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Progressive disclosure

View in Figma

Back

We ask this question to determine if you are eligible for child care benefits.

Save and continue

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

<a href="#" className="back-link">
  Back
</a>
<GoAFormItem mt="2xl" label="Do you pay for child care?" labelSize="large" helpText="Examples of child care are daycares, day homes and baby-sisters.">
  <GoARadioGroup name="child-care" ariaLabel="Do you pay for child care?" onChange={onChange}>
    <GoARadioItem value="yes" label="Yes"></GoARadioItem>
    <GoARadioItem value="no" label="No"></GoARadioItem>
  </GoARadioGroup>
</GoAFormItem>
<GoADetails heading="Why are we asking this question?" mt="xl">
  <p>
    We ask this question to determine if you are eligible for child care benefits.
  </p>
</GoADetails>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Section title

View in Figma

Back

Personal information

Save and continue

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

h3.section-title {
  margin-bottom: 0;
  color: var(--goa-color-text-secondary);
}

a.back-link + h3 {
  margin-top: var(--goa-space-2xl);
}

<a href="#" className="back-link">
  Back
</a>
<h3 className="section-title">
  Personal information
</h3>
<GoAFormItem mt="xs" label="Do you currently live in Canada?" labelSize="large">
  <GoARadioGroup name="canada" ariaLabel="Do you currently live in Canada?" onChange={onChange}>
    <GoARadioItem value="yes" label="Yes"></GoARadioItem>
    <GoARadioItem value="no" label="No"></GoARadioItem>
  </GoARadioGroup>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Simple progress indicator

View in Figma

Back

Question 3 of 9

Save and continue

h3.section-title {
  margin-bottom: 0;
  color: var(--goa-color-text-secondary);
}

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

a.back-link + h3 {
  margin-top: var(--goa-space-2xl);
}

<a href="#" className="back-link">
  Back
</a>
<h3 className="section-title">
  Question 3 of 9
</h3>
<GoAFormItem mt="xs" label="Do you currently live in Canada?" labelSize="large">
  <GoARadioGroup name="canada" ariaLabel="Do you currently live in Canada?" onChange={onChange}>
    <GoARadioItem value="yes" label="Yes"></GoARadioItem>
    <GoARadioItem value="no" label="No"></GoARadioItem>
  </GoARadioGroup>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Multiple questions

View in Figma

Back

Your address

This is the home address of the person applying

Save and continue

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

a.back-link + h2 {
  margin-top: var(--goa-space-2xl);
}

h2.section-title {
  margin-bottom: 0;
}

h2.section-title + h3 {
  margin-top: var(--goa-space-xs);
}

<a href="#" className="back-link">
  Back
</a>
<h2 className="section-title">
  Your address
</h2>
<h3>
  This is the home address of the person applying
</h3>
<GoAFormItem label="Address line 1" mt="l">
  <GoAInput onChange={onChange} name="address-line-1" ariaLabel="Address line 1" width="100%"></GoAInput>
</GoAFormItem>
<GoAFormItem label="Address line 2" mt="xl">
  <GoAInput onChange={onChange} name="address-line-2" ariaLabel="Address line 2" width="100%"></GoAInput>
</GoAFormItem>
<GoAFormItem label="Town or city" mt="xl">
  <GoAInput onChange={onChange} name="town-city" ariaLabel="Town or city name" width="460px"></GoAInput>
</GoAFormItem>
<GoAFormItem label="Province or territory" mt="xl" id="provinceLabel">
  <GoADropdown onChange={onChange} name="province-territory" ariaLabelledBy="provinceLabel">
    <GoADropdownItem value="AB" label="Alberta"></GoADropdownItem>
    <GoADropdownItem value="BC" label="British Columbia"></GoADropdownItem>
    <GoADropdownItem value="MB" label="Manitoba"></GoADropdownItem>
    <GoADropdownItem value="NB" label="New Brunswick"></GoADropdownItem>
    <GoADropdownItem value="NL" label="Newfoundland and Labrador"></GoADropdownItem>
    <GoADropdownItem value="NS" label="Nova Scotia"></GoADropdownItem>
    <GoADropdownItem value="ON" label="Ontario"></GoADropdownItem>
    <GoADropdownItem value="PE" label="Prince Edward Island"></GoADropdownItem>
    <GoADropdownItem value="QC" label="Quebec"></GoADropdownItem>
    <GoADropdownItem value="SK" label="Saskatchewan"></GoADropdownItem>
    <GoADropdownItem value="NT" label="Northwest Territories"></GoADropdownItem>
    <GoADropdownItem value="NU" label="Nunavut"></GoADropdownItem>
    <GoADropdownItem value="YT" label="Yukon"></GoADropdownItem>
  </GoADropdown>
</GoAFormItem>
<GoAFormItem label="Postal code" mt="xl">
  <GoAInput onChange={onChange} name="postal-code" width="105px"></GoAInput>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Multiple questions and a simple progress indicator

View in Figma

Back

Step 1 of 5

Personal information

Save and continue

a.back-link::before {
  content: "";
  display: inline-block;
  width: 42px;
  height: 24px;
  vertical-align: middle;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link:visited::before,
a.back-link:hover::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}

a.back-link {
 margin-top: var(--goa-space-m);
}

h3.section-title {
  margin-bottom: 0;
  color: var(--goa-color-text-secondary);
}

a.back-link + h3 {
  margin-top: var(--goa-space-2xl);
}

h3.section-title + h2 {
  margin-top: var(--goa-space-xs);
}

<a href="#" className="back-link">
  Back
</a>
<h3 className="section-title text-secondary">Step 1 of 5</h3>
<h2>Personal information</h2>
<GoAFormItem label="What is your name?" mt="xl">
  <GoAInput onChange={() => {}} name="name" ariaLabel="what is your name?" width="50ch" />
</GoAFormItem>
<GoAFormItem label="What is your phone number?" mt="xl">
  <GoAInput
    onChange={() => {}}
    name="phone-number"
    ariaLabel="what is your phone number?"
    leadingContent="+1"
  />
</GoAFormItem>
<GoAFormItem label="What is your home postal code?" mt="xl">
  <GoAInput
  onChange={() => {}}
  name="postal-code"
  width="14ch"
  ariaLabel="what is your home postal code"></GoAInput>
</GoAFormItem>
<GoAButton type="submit" mt="2xl">
  Save and continue
</GoAButton>

Form structure

Start by splitting the form across multiple pages with each page containing just one idea, for example:

one piece of information you’re telling a user
one decision they have to make
one question they have to answer

Helps users to:

understand what you’re asking them to do
focus on the specific question and its answer
find their way through an unfamiliar process
use the service on a mobile device
recover easily from errors
navigate with assistive technologies

Helps the service to:

handle branching questions and loops
save a user’s answers automatically as they go
capture analytics about each question
manage potential complexity on a page

What are the main benefits of starting with one idea per page?

Focus: Asking one question at a time helps users focus on the task at hand. This is especially beneficial for complex forms or surveys, where multiple fields can easily overwhelm or confuse the user. The user's attention is undivided, leading to higher quality responses and fewer errors.

Efficiency: Due to the improved focus of the task at hand, completion time for forms can be lowered when measured against traditional long form patterns.

Progression: This approach gives users a sense of progression and accomplishment as they navigate through the form, which can motivate them to complete the form. It allows for a linear progression model, which can be less intimidating and less overwhelming than seeing a full page of empty fields at once.

Reduce Cognitive Load: By reducing the amount of information presented at once, this design pattern can help minimize cognitive load. The cognitive load theory suggests that our working memory capacity is limited, and if too much information is presented at once, it can lead to confusion and mistakes.

Adaptive: allows for adaptive questioning. The answer to one question can determine the next question asked. This isn't always possible when all questions are presented at once. This can help make the form shorter and more relevant for the user, increasing completion rates and user satisfaction.

Data Quality: With all the user's attention on one question, they are more likely to provide accurate and thoughtful answers. This can help to improve the quality of data gathered.

Mobile Friendly: As mobile usage continues to grow, one question at a time approach makes it easier for users to fill out the form on smaller screens. Long forms can be particularly daunting on mobile devices, so breaking it up into smaller, manageable pieces can improve user experience.

Error Handling:If a user makes an error on a form, it is easier and faster to provide feedback on that specific question, leading to an overall smoother and less frustrating user experience.

Using progress indicators

Start by testing your form without a progress indicator to see if it’s simple enough that users do not need one.

Try improving the order, type or number of questions before adding a progress indicator. If people still have difficulty, try adding a simple step or question indicator.

Only include the total number of questions if you can do so reliably. As the user moves through the form, make sure the indicator updates to tell them which question they are on and the total number remaining.

Example of a simple progress indicator in a form image — Example of a simple progress indicator in a form

Why should I avoid progress indicators on forms?

Induce anxiety: If the form is lengthy, showing a slow-moving progress bar can induce anxiety and may deter the user from completing the form. Users could feel overwhelmed by the perceived time investment and the number of questions yet to come.

False perception: Progress bars often represent completion in a linear fashion, but not all form questions take an equal amount of time or effort to complete. A user might spend more time on an earlier question and then speed through subsequent ones. This can lead to an inaccurate perception of progress, causing user frustration.

Distraction: In an adaptive questioning scenario where the next question depends on the answer to the current question, it's challenging to provide an accurate progress indicator as the total number of questions can change dynamically.

Speed over accuracy: A progress indicator can lead users to rush through the form to see the progress bar move faster, thus sacrificing the quality of their responses.

Cannot use branching form logic: It's challenging to provide an accurate progress indicator in a non-linear form where the next question depends on the answer to the current question. The total number of questions will change dynamically.

Additional development and testing time: that progress indicators and form steppers introduce.

When to use a form stepper

A form stepper is a type of visual step/progress indicator in a form.

Start with a one thing per page approach, and consider using a form stepper when all of the following is true:

your form can be broken into logical groups or steps that is helpful to constantly communicate to the user
your form is always linear, and a user cannot skip questions
it is valuable to indicate to the user where they are in the process at all times ongoing
it is valuable to indicate to the user how many steps are remaining, and you can do so reliably
the form is not dynamic, where the number of questions remaining can change depending on the response

Make it clear which tasks a user has completed and which they still need to complete.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours