Loading component...
Usage
Use forms when a user needs to enter information to take an action. Here are a few common situations when you might use a form:
- Signing up for a service
- Submitting feedback
- Purchasing a product
- Taking a survey
- Registering an account
- Accessing gated content
If you need any component-specific usage guidelines, visit the component page:
Form length
When creating forms it is important to remember that the longer the form, the less inclined the user is to complete that form. Make sure that you are respecting the user’s time and personal privacy and only ask for necessary information.
If a form is especially long, consider splitting the experience up into shorter logical steps or stages to avoid overwhelming the user. Here are guidelines for creating a multi-step form:
- Repeat any form-level instructions on each page
- Split the form up into logical steps and groups
- Allow the user to skip optional steps or groups of inputs
- Don’t set a time limit to complete the form
Alignment
Forms should always be arranged vertically, including checkboxes and radio groups. See the User Research section for more information.
If your platform still has horizontal form layouts, please make a plan to convert to vertical layout soon.
Validation
Validation happens at three points in time:
- As the user interacts with the form control, with a 1-second delay to prevent an error message from appearing before the user is finished interacting with the form control
- When the user tabs to or clicks on another form control
- On click of the ‘submit’ button
Error messages are cleared as invalid values are corrected.
Do:
- Arrange form fields vertically in one column
- Locate the “Submit” and “Cancel” buttons at the bottom or end of the form
- Visually group related form fields under a shared fieldset label
- Ask the user to enter only information that is required
- Structure the form in a logical and predictable order for when the user should or would fill out the inputs
- Emphasize the positive action (“Submit”) over the negative action (“Cancel”)
- Consider splitting a long form into multiple steps
- Explain why it is necessary when you ask the user to input sensitive or personal information
- Size fields in accordance with the information expected; for example, a zip code field can be narrower in width than a name field
Don't:
- Arrange form fields horizontally or in multiple columns
- Put the “Submit” or “Cancel” buttons in a hard-to-find place
- Group inputs in an illogical manner
- Add inputs for unnecessary information
- Create long forms
- Add “Reset” or “Clear” buttons
- Clear entered information on error automatically
- Disable entire forms
- Disable fields that have been correctly completed; the user must be able to edit their entry before submission
- Disable the “Submit” button
- Trap the user in the form or in an input; make sure that the user can use a keyboard to navigate in and out of the form or input in all states
- Use an icon, such as a checkbox, to indicate correct format because it might be confused with correct input
- An exception to this would be a password creation field
Content guidelines
If you need any component-specific content guidelines, visit the component page:
Do:
- Give the form a descriptive title
- Add form-level help text when necessary
- Group related form inputs in fieldsets with descriptive legend text
- Write input labels in parallel syntax
- Ensure that the input’s text and purpose are distinct from other inputs
- Ensure that the form’s actions are clear and distinct from each other
- Mark only the fields that are necessary as “required”
Don't:
- Write vague form text, descriptions, fieldset labels, or actions
- Rely on error messages to deliver important information
- Refer to the error messaging content guidelines for more information on writing effective messaging
User research
Key takeaways
Vertical alignment
Form elements should be arranged vertically. This includes checkbox lists and radio buttons in radio groups. The text input’s label should be stacked on top of the input’s field. Stacking form elements makes it easier for the user to read the form. Vertical alignment also translates better than horizontal alignment on smaller screens.
Single column
Putting forms into a single column allows the user to read the form faster. Arranging form elements into multiple columns slows the user down and can lead to users misinterpreting form elements’ relationships or overlooking a column of fields. The exceptions to this rule are groups of fields that, together, make one entity. Some examples are:
- City, state, address, and zip code
- First name, middle initial, and last name
- Credit card number, expiration date, and security code
Short forms
Keeping forms short increases the likelihood that the user will complete and submit the form. If there is no way to shorten the form, split the form up into steps so the user isn’t overwhelmed.
Study links
Primary sources (BSC user research)
No sources
Secondary sources
Accessibility
When validating that a form is accessible, first follow all accessibility requirements for each individual form element.
Here are some high-level accessibility requirements to check:
- Ensure that you announce the form correctly before a user enters the form
- A specific form title for visual users
- Making sure the form is declared on a screen reader
- Ensure the form is keyboard navigable
- Ensure that the validation messages provide the reason and solution to the user’s error
- Ensure that help text, if necessary, gives the user enough information to complete their task
See W3C’s Form Instructions for more information and Deque’s screen reader keyboard shortcuts and gestures documentation.