Forms overview

Online forms help users enroll, purchase, register, apply, self-serve and provide feedback. These tasks can be stressful for users because they are often tied to an exchange of money and/or data. If designed well, forms will:

  • support task completion with fewer errors
  • reduce stress and anxiety through clear instruction and expectations
  • positively impact how users view our website(s) and our organization

Form considerations

Keep it short
Reduce users' effort by removing fields that are unnecessary or redundant.

Visually group related fields
Group related items closer together and unrelated items further apart.

Present fields in a single column layout
Provide a clear flow for users by having a separate row for each field. Exceptions: short and/or logically related fields such as city, state and postal code can be presented on the same row.

Use standard sequences
Present fields in the order users are familiar with and are logical i.e. credit card number should be followed by expiration date, then security code.

Avoid placeholder text
Placeholder text disappears thus straining users' short-term memory as well as the low contrast is a burden for visually impaired users.

Explain any input or formatting requirements
Don’t make users guess input requirements. Provide descriptive labels as well as use helper text to provide specific instruction such as password or formatting requirements.

Provide visible and helpful error messages
Prompt users with a variety of cues to let users know where the error(s) occurred and include feedback in plain language to assist with correction.

Form components