Form Design
Principles and patterns for building high-conversion forms that users actually complete.
Single-column layout
Stack fields vertically. Multi-column forms disrupt vertical scanning and increase cognitive load. Users complete single-column forms significantly faster with fewer errors.
Top-aligned labels
Place labels above inputs, not beside them. Top-aligned labels reduce saccade distance and work consistently across viewport widths. Left-aligned labels create awkward whitespace and break on mobile.
Inline validation
Validate on blur, not on submit. Show errors adjacent to the offending field. Use clear, actionable messages — never just “Invalid input.”
Username must be at least 3 characters.
Primary action prominence
Make the submit button visually dominant. Use brand color, full width on mobile, and clear microcopy. Avoid generic labels like “Submit” — prefer action-oriented text.
Optional fields
Mark optional fields explicitly. Most fields should be required — if you don’t need it, remove it. Every extra field reduces conversion.
Key takeaway
Every field you add is a decision point. Remove friction by asking only what you need, validating early, and guiding the user toward a single clear action.