Form Layout
The visual and structural arrangement of form fields, labels, and actions for clear data entry.
Plain English
Forms are the most friction-heavy part of any product — they ask users to do work. Good form layout reduces that friction: clear labels above fields (never beside), logical field order, groups of related fields, appropriate field widths for expected input, and a single primary CTA at the end. The biggest wins come from reducing the number of fields (every optional field you remove improves completion rates) and from clear inline validation that helps users correct mistakes immediately.
Technical
Layout: single-column forms complete faster than multi-column. Use CSS Grid for aligned multi-column sections (address fields, date ranges). Field width communicates expected input: full-width for name/address, 50% for state, 25% for zip code, 33% for phone area code. Label positioning: above (best for readability), not beside (requires wider layout), not placeholder-only (fails usability). Group related fields with visual proximity and optional fieldset/legend for accessibility. Submit button: full-width on mobile, left-aligned on desktop forms.
Live Demo
Personal
Account
Good form layout reduces cognitive load. Group related fields. Left-align labels.
Usage
✓ Good usage
A single-column checkout form with labels above each field, grouped sections (Contact, Shipping, Payment), 20px between fields, 36px between sections, and a full-width mobile CTA.
✗ Bad usage
A 6-column form layout with labels beside fields — requires reading horizontally for label then vertically to the next row, slowing completion significantly.
Recommended values
- Single-column default (faster completion)
- Label above input, 4-6px gap
- Field vertical spacing: 16-24px between fields
- Group spacing: 32px between field groups
- Submit button: full-width on mobile, left-aligned on desktop
- Required indicator: (*) + legend explaining the symbol
Common mistakes
- Multi-column forms — studies show they complete slower than single-column.
- Labels beside fields rather than above — requires horizontal eye tracking.
- No grouping of related fields — a 15-field form with no visual structure feels overwhelming.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Single-column form, labels above fields with 4px gap. 20px between fields, 32px between groups (Contact / Shipping / Payment). Full-width on mobile. Submit button full-width mobile, left-aligned desktop. Required fields marked with (*), legend at form top. Inline validation on blur.