Forms
Forms capture various pieces of information from a user. It guides them from one element to the next through a logical flow and grouped content.
Layout
*Required
Do's
- Single column layout when possible
- Create logical grouping of elements
- Order from easiest to hardest to fill out
- Position "Submit" at the bottom right
- For longer forms:
- introduce sections with headlines
- provide progress feedback
- Collect only what you need
- Enable "Auto-fill" when possible
- Pre-select options based on data
- Make "required" and "optional" clear
Don'ts
- Avoid splitting forms into multiple columns ("zig zag" effect)
- Do not split fields unnecessarily
- Do not ask for information you won't use
- Do not rearrange the layout that disrupts the flow
Feedback
*Required
Do's
- Provide real-time, inline validation feedback
- Write actionable messages
Don'ts
- Do not erase provided data upon errors - Save progress
Disabled & Active "Submit"
*Required
*Required
Active "Submit"
- For longer forms
- Choose when in doubt
- Some users prefer clicking "Submit" to discover mistakes through feedback
Disabled "Submit"
- For short forms
- Requirements near "Submit"
- Sensitive actions triggered by form
- Disabled state harms accessibility:
- not focusable
- may cause issues with assistive technology
- May prevent users from trying
- May cause "dead end" when users are guessing how to proceed
Do's
- Provide clear instructions what needs to be done
- Enable inline real-time validation feedback
Don'ts
- Do not hide clues what is missing
- Do not hide validation feedback
- Do not make users guess why they can't move on