Forms

What is it?

A form is a structured collection of input fields that gathers information from users to enable an action — registration, checkout, survey, configuration. Forms are among the most common and most failed UX patterns in digital products. Their design directly affects completion rates, data quality, and user trust.

Why it matters

Baymard Institute research shows that the average checkout form has 14.88 fields, while most users only need to fill 6-8. Every unnecessary field reduces completion rate. Forms are where users either commit to your product (registration, checkout) or abandon it. The design of a form is a business decision, not just a UX one.

Best Practices

• Remove every field that isn't strictly necessary. Ask: "What would we lose if we didn't collect this?" If the answer is "nothing," remove it.
• One column layouts are faster to complete than two-column layouts (fewer scanning eye movements).
• Group related fields together with visual and semantic separation.
• Show all fields upfront for short forms (< 7 fields). Use steps for longer forms.
• Auto-populate anything that can be inferred: country from IP, address from postcode.
• Provide smart defaults for optional configuration fields.
• Use the right input type for each field — text, email, tel, number, date — both for UX and keyboard behavior.
• Mark optional fields as "Optional" rather than marking required fields with asterisks.
• Validate on blur, show errors inline below the field, preserve all other field values on error.
• The submit button should summarize the action: "Create Account," "Place Order," "Send Message."

Common Mistakes

• Collecting information "in case we need it" — increases abandonment without data benefit.
• Two-column form layouts for unrelated fields — users miss the right column.
• Asking for the same information twice (email confirmation, password confirmation) — adds friction without meaningful security benefit for most contexts.
• Birthday fields that use three separate dropdowns instead of a date input.
• Phone number fields without format guidance or auto-formatting.
• Forms that clear all fields on validation error — users must re-enter everything.

Checklist

Research & Theory

Real-World Examples