Use a standard one-column format with intuitive flow.
One column layouts are best for almost all types of inputs. Exceptions include first/last name, multi-input date fields, and commonly paired data values like car make & model.
The form should follow an intuitive sequence. What’s “intuitive” will vary depending on the type of form. For example, a service request form might ask for:
- Requester Contact Info
- Request Details
- Billing Info
- Any additional information
- Submit
Use styling & spacing to enhance readability.
Provide sufficient margins between form questions to make it clear to the user where one question ends and the next begins.
Colocate related fields into sections under sensible headers so as to break the form into logical and manageable chunks.
Follow standard editorial guidelines.
Use proper and consistent spelling, grammar, capitalization, and punctuation, following U-M’s Editorial Style Guide. This conveys credibility and trustworthiness to users.
Before
How Can we help?
After
How can we help?
Consider multi-page forms for long or complex forms.
For lengthy or cognitively difficult forms, breaking questions up into multiple pages can reduce “psychological friction” and make the task of completing the form appear less daunting.
Consider using a multi-page form if:
- There are more than 15 questions
- There are conditional blocks of questions (e.g., only users who answer “yes” get a set of 8 additional questions)
- [IF FORM PROGRESS CAN BE SAVED]: Some questions may require additional research and the user may need to return to the form to complete it.
Use a progress indicator for multi-page forms.
Place any catch-all question at the end of the form.
If you need a field to allow the user to enter any information that may not have been covered by the other fields in the form, that field should immediately precede the Submit button.
Use proper HTML syntax & ARIA attributes.
To ensure the form is keyboard navigable and screenreader-friendly, use for and id values to associate form <input> elements with their <label>. You can also use aria-labelledby.
Use aria-describedby within <input> elements to associate the input with help text.
For any symbols or graphics used to convey meaning (e.g., a required asterisk), provide alternative text.
Do not use color alone to convey meaning.
Users with certain visual impairments may not be able to see color or distinguish certain color combinations. Never use color alone to convey meaning.