main
x

Brand standards

x
Menu

Web forms

Building and styling forms to the Peel Region's brand and standards.

Labels

Form title

  • The form title should match the title used on peelregion.ca (with the addition of the word "form" if appropriate).
  • Use H1 tag.

Form instructions

  • Instructions that apply to the entire form should be placed before the <form> element to ensure that it's read aloud by screen readers before they switch to "Forms Mode".
  • In-line instructions should be placed throughout the form within the label of the form control.

Required vs. optional fields

  • All fields should be required unless labelled as optional.
  • Do not indicate required fields by using asterisks.
  • Include the word "optional" in parenthesis at the end and as part of the label text.

Placeholder text

General writing tips

Instructions should always use active voice, not passive. When structuring sentences place the subject before the verb (action word). For example:

  • Instead of: "Proof of income must be provided for each business."
  • Use: "Each business must provide proof of income."

Write in first and second-person point of view. Use "we" and "you" when possible. For example:

  • Instead of: "The applicant should check for accuracy."
  • Use: "You should check for accuracy."

Don't use "please" in form instructions or error messages.

Refer to the Writing effective digital content for complete guidelines.

Common field labels

These fields are common controls on most forms. Where applicable, formats and validation rules are noted. Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by using the <label> element.

Placeholder text is not a replacement for labels and should be avoided.

Standard text fields (exactly as written, including capitalization)

Field label

 Validation Comment
First name   Enter first and last name separately unless application requires a combined name.
Last name    
Email Validate for proper email format Do not label as "address"
Phone number 10 digits Allow user to enter an unformatted number (i.e., 9995551111) and automatically format as either (999) 555-1111 or 999-555-1111.
Address   Use an API to auto-complete and format address where possible.
Street    
City    
Province 2 letters Drop-down list of standard values
Postal code 7 characters including space
(A1A 1A1)		 Allow user to enter unformatted postal code with or without space and automatically format. Auto format upper- or lower-case entries.
Country    
Unit or apt.   Optional
Date 8 digits in YYYY-MM-DD format
(2023-03-15)

Use date picker calendar. Ensure the control is accessible on mobile when using a keyboard only.
Date of birth 8 digits in YYYY-MM-DD format
(2023-03-15)

Better to allow direct date entry as date pickers typically do not allow easy entry of dates far in the past.
Accessibility accommodations Text area Optional. May be required for services delivered in-person

Demographic fields

Do not ask the folowing demographic questions: sex assigned at birth, gender identity, cultural background, language, religion, immigration status, disability, age, education level, employment status, family status, household income, housing status, etc. unless this data is essential for the service to be performed (e.g. a medical form).

References

Error handling

Validation error messages

  • Display an error message when a user enters data that does not meet the allowed values or validation criteria on that field.
  • Display an error message to identify required fields that were not completed.
  • Validation should be inline: that is, as soon as the user has finished filling in a field, an indicator should appear nearby if the field contains an error. Don't validate fields before input is complete (e.g. onblur form validation).
  • Error messages should be displayed in red. An icon to the left of the error message or validation summary will draw attention to the error and help users who are colour blind.
  • Error messages should be easy to understand and should provide simple instructions on how they can be resolved.

Common validation error messages

These should be written exactly ash shows, including capitalization.

Scenario

Error message
Required field not completed [Field label] is required.
Acknowledgement or consent checkbox not checked You must accept the terms and conditions to continue.
You must check the box to continue.
Entry is too long This number is too long. Enter up to XX digits.
This entry is too long. Enter up to XX characters.
Incorrect email format Enter a valid email address.
Incorrect phone number Enter a valid phone number.
Incorrect date format Enter date in YYYY/MM/DD format.
Two field values don't match Both [field label] should match.
Radio box not selected Choose an option that applies to you.
Checkbox not selected Choose at least one option that applies to you.

Mobile keyboard for input types

These are subject to change and should easily be controlled with CSS.

Field type

Keyboard

Input type (example)

Text

Regular

 <input type="text" id="last_name" name="last_name" value="">

Credit card

Numeric

 <input type="text" id="x_card_num" maxlength="16" name="x_card_num" pattern="[0-9]*" value="" autocomplete="cc-number">

Email

Email

 <input autocomplete="email" name="email" id="email" type="email" value="">

Phone

Numeric

 <input autocomplete="tel" name="phone_number" id="phone_number" type="tel" value="">

Canadian postal code

Regular

<input type="text" id="postal" maxlength="7" name="postal" pattern="[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]" value="" autocomplete="postal">

Date

Date picker (regular)

Use a date picker. Depending on the use for date, limit the years. For example, if the event is happening in the future, do not show past dates.

Buttons

There should only be one primary button in the area such as "submit" or "next." Other buttons should be styled as an alternate.

input[type=button], button{
  padding: 8px 10px;
  border: 1px solid transparent;
  background: #036;
  cursor: pointer;
  font-weight: 600;
  color: #FFF !important;
  display: inline-block;
  width: auto;
  margin: 0;
  transition: all ease .1s;
  min-height: 40px;
  top: 1px;
  margin-bottom: 1px;
  position: relative;
  box-sizing: border-box;
  text-decoration: none !important;
}

input[type=button]:hover, input[type=button]:focus, button:hover, button:focus{
  background: #FFF !important;
  color: #054d84 !important;
  border-color: #054d84;
}

Alternate button style

The following example demonstrates the second button which has a CSS selector named "hollow" attached to it:

input[type=submit].hollow,
input[type=reset].hollow,
input[type=button].hollow,
button.hollow{
  background: none;
  color: #054d84 !important;
}

input[type=submit].hollow:hover,
input[type=button].hollow:hover,
input[type=reset].hollow:hover,
input[type=submit].hollow:focus,
input[type=button].hollow:focus,
input[type=reset].hollow:focus,
button.hollow:hover,
button.hollow:focus {
background:#036 !important;
  color: #FFF !important;
}

Dropdown list items

When using list items (<select> field) do not pre-select any options but do preselect a black option with no value. This ensures that the user intentionally selects their answer rather than a value selected by default. Use whatever technology to achieve this. We should be mindful for space on a mobile device so we try to keep the line content short (about 350px wide).

<label for="happy">Are you happy</label>
<select name="happy" id="happy">
  <option selected value=""></option>
  <option value="no">No</option>
  <option value="yes">Yes</option>
</select>

Radio group vs checkbox

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list. If there are more that about 5 items and their labels are short, consider using a drop-down list (e.g. country list).

Checkboxes are used when there are lists of options. The user may select any number of choices, including zero, one, or several. Each checkbox is independent of all other checkboxes in the list, so checking one box should not uncheck the others.

A stand-alone checkbox is used for a single option that the user can turn on or off.

Responsive behaviour

These are subject to change and should easily be controlled with CSS.

Screen resolution Fields 2-across Fields 3-across
Greater than 645px 1/2 width 1/3 width
645px and smaller full width 1/2 width
525px and smaller full width full width
x

Components

  • Fieldset
    Group related information into logical blocks or sets.
  • Legend
    defines a caption for the <fieldset> element.
  • Label
    The "for" attribute of <label> must be equal to the id attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.
  • Radio
    The field is wrapped in the label.
  • Checkbox
    The field is wrapped in the label.
  • List
    Preselect a black option with no value rather than an actual choice.
  • Clear highlights

Sample form

Show form components

Eligibility
Employment

1Date of birth field: age range has been limited to 15 years in the past and no future dates as of the current day. Date ranges can be configured for spacific needs. Manual entry is still allowed.