The content on this page is currently in draft as or team finalizes it. In the meantime, if you have any questions, email [email protected].
You will find form design standards throughout this section of the website. We've laid these standards out here as a reference for staff who are in the process of drafting their forms.
Form design standards for web forms
Most web forms will have a service design element where your team may work with a user experience lead to learn more about user and business needs. This will inform how the web form will function.
The branding elements for web forms come from the Yukon.ca Design System so all web forms are consistent in how they look and feel. Online design patterns will be applied for consistency in the user experience.
Buttons
When you add buttons to web forms, you should follow the online design pattern for buttons and the guidance for colour and palettes for digital services.
The cancel button should be styled as a secondary button so it has less prominence than the “Print” or “Submit” button.
How buttons should function
- If a person clicks the “Go back a step” or “Cancel” button, any changes made to checkboxes or radio buttons should be discarded and the original settings reinstated.
- If a person clicks the “Go back a step” and then “Continue to next step” buttons, interpret this as an undo-redo pair. The appearance of the controls should show the person’s changes as if they had never clicked the “Go back a step” button. These changes will not take effect until the users submits the form.
Fields
Fields are the spaces or places for people to add their inputs to a form. Web form fields should:
- appear as a single row;
- be at least 48 pixels high for mobile devices;
- allow for text size to be a minimum of 16px in size;
- be sized to correspond to the expected input; and
- separate groups of fields (these should be tagged for screen readers).
Labels
Labels describe what a person should input. Every web form field should have a label:
- between 1 and 3 words to make it easier for people to scan;
- written in sentence case;
- aligned to the top-left; and
- associated with form fields using the "for" attribute for screen readers.
Avoid:
- adding a colon after your label;
- hiding labels (unless the surrounding context makes them unecessary); and
- using inline labels as placeholder text.
- As soon as a person starts typing, the label disappears and they have to remember it as they type.
- If a person navigates your form using the Tab key, they might completely miss seeing that information is required.
Links
Links for web forms will be styled to follow our guidance for colour and pallettes for digital service.
Form design standards for PDF forms
The forms design standards for PDFs were developed to ensure government forms have consistency and apply best practices and design principles. This means they are easier for people to see, understand and interact with.
Border
PDF forms should have a 3/8 of an inch (0.375 inch) border. This will ensure they can be printed out on most printers.
Buttons
Buttons appear at the bottom of PDF forms when people are viewing them online. These buttons do not appear on print versions of the form. Commonly used buttons include:
- Print form
- Clear form
- Attach file
- Submit by email
Box format
Most government forms are designed using a box format. This makes it easier for the public to know where to include their information. It also gives us the greatest amount of space to collect the data.
Each box must have a label. The label will appear in the top left corner of the box without colons.
Colour
PDF forms are in black and white. This includes logos and other images.
Draft wordmark
When you get your draft PDF form back to review, you’ll see the forms designer applied a “Draft” watermark in the background. They will remove the watermark once the form meets the government’s standards and the form is published.
Formatting
It's important that PDF forms are designed with a good balance between the content and the white space. Your forms designer will ensure your form is designed to the following specifications.
- The border is compatible with most printers. To achieve this, allow a 3/8 of an inch (0.375 inch) border for printing.
- Forms filled out “in the field” will be large enough to accommodate handwritten information. To achieve this you should allow 1 inch for every 5 characters.
- The standard spacing is 6 lines to the inch vertical spacing and 10 characters to the inch horizontal spacing.
Links
Links for online PDFs will be blue. If your form is only meant for print, the links will appear black.
Section headings
Headings for sections are in sentence case. The text is white and the background is black to provide good contrast.
Signature
Forms are designed to allow 1/2 of an inch (0.5 inch) vertically and 3 inches horizontally.
Spacing
The standard spacing is 6 lines to the inch vertical spacing and 10 characters to the inch horizontal spacing.
Margins
For margins, PDF forms should maintain a border minimum of 5/16 of an inch (0.3125 inch) margin around the document for printer gripping and at least 1 inch on the inside or left margin for binding, if required.
Handwritten entries
If you expect people filling out your form are likely to print it off and fill it in by hand, allow 5 characters to an inch horizontally and 3 lines to an inch vertically.
Fields should be large enough to accommodate handwritten information. Allow 1 inch for ever 5 characters.
Typewritten entries
If you expect people filling out your form will do online using a computer or mobile device, allow 10 pica characters to an inch horizontally and 3 lines to an inch vertically for double spacing.
Columns of figures
Allow 8 handwritten figures to an inch, including spaces between dollars and cents or 10 typed figures to an inch, including spaces.
Data fields groupings
Data fields that are similar in purpose or nature are grouped together, enclosed in a box and preceded by a section title.
Sequencing
Data fields are organized on the form so that data entry progresses in a logical manner (left to right and top to bottom).
Security
Forms are password protected until they are published or printed. This ensures they cannot be altered.