The content on this page is currently in draft as or team finalizes it. We expect to finalize this page in August. In the meantime, if you have any questions, email email@example.com.
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.
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 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 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.
- 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 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.
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 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
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.
PDF forms are in black and white. This includes logos and other images.
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.
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 for online PDFs will be blue. If your form is only meant for print, the links will appear black.
Headings for sections are in all caps. The text is white and the background is black to provide good contrast.
Forms are designed to allow 1/2 of an inch (0.5 inch) vertically and 3 inches horizontally.
The standard spacing is 6 lines to the inch vertical spacing and 10 characters to the inch horizontal spacing.
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.
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.
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.
Data fields are organized on the form so that data entry progresses in a logical manner (left to right and top to bottom).
Forms are password protected until they are published or printed. This ensures they cannot be altered.