Tags: ux concept

Form Design

Date: 2026-08-17


Forms are where intent turns into revenue and where most of it leaks. Nearly every improvement is subtraction — fewer fields, fewer decisions, less typing — and the rest is making the remaining fields impossible to get wrong.


A form collects structured input. Every field is a cost, paid by the customer in effort and by you in abandonment, and it must earn its place against the value of the data.

The single most effective change

Remove fields.

FOR EACH FIELD ASK
  what happens if we don't have this?
  can we derive it?
    → city and county from postcode
  can we ask later?
    → after purchase, when they're
      invested
  can we ask never?
    → "how did you hear about us"
      belongs in analytics, not in
      checkout

Fields that exist because a system requires them are the most common category, and the requirement is frequently older than anyone still working there.

Layout

ONE COLUMN
  ← single most reliable finding in
    form design. Multi-column forms
    produce ambiguous reading order
    and missed fields

LABELS ABOVE FIELDS
  ← fastest to scan, works on mobile,
    no truncation

RELATED FIELDS GROUPED
  with visible spacing between groups
  — Spacing Systems

FIELD WIDTH SUGGESTS LENGTH
  a postcode field should be short;
  an address line long
  ← a signifier — Affordances and Signifiers

Exception to one column: genuinely paired short fields — expiry month/year, first/last name — where two columns read naturally.

Labels, and the placeholder problem

PLACEHOLDERS ARE NOT LABELS
  they disappear on focus
  → the person forgets what the field
    was
  → they cannot check their answer
  → poor contrast by default
  → screen readers treat them
    inconsistently

Always use a real label. Placeholders are for examples — “e.g. SW1A 1AA” — and even then a hint below the field is better because it stays visible.

Float-label patterns solve the disappearing problem and introduce a smaller one: the label shrinks to a size that can fail contrast and legibility. Usable, and not obviously better than a plain label above.

Input types matter more on mobile

The cheapest mobile improvement available:

<input type="email"    inputmode="email">
<input type="tel"      inputmode="tel">
<input type="number"   inputmode="numeric">
<input type="text"     inputmode="numeric"
       autocomplete="postal-code">

The right keyboard appearing removes an entire class of error, and it’s an attribute.

Autocomplete attributes are the other free win:

<input autocomplete="given-name">
<input autocomplete="family-name">
<input autocomplete="address-line1">
<input autocomplete="postal-code">
<input autocomplete="cc-number">

Correct autocomplete values let the browser fill the whole form, which is faster and more accurate than any UI you could design. Getting these wrong — or omitting them — silently disables it.

Required versus optional

Mark the smaller set. If most fields are required, mark the optional ones; if most are optional, mark the required ones. Marking every field with an asterisk conveys nothing.

Prefer the word to the symbol. “(optional)” is unambiguous; an asterisk requires a legend most people don’t read.

Validation and errors

Covered fully in Error Prevention and Recovery. The form-specific points:

  • Validate on blur, not on keystroke
  • Never clear the form on failure
  • Focus the first error on submit
  • Allow any format you can parse. Card numbers with spaces, phone numbers with brackets, postcodes without one — rejecting a format you could normalise is a self-inflicted error

Address entry specifically

The highest-friction part of most checkouts:

POSTCODE LOOKUP FIRST
  → 1 field replaces 4
  → and a manual fallback, always
    (lookups fail, and new-build
     addresses are missing)

DON'T SPLIT unnecessarily
  house number and street as one
  line is fine

BILLING = DELIVERY by default
  — The Default Effect

INTERNATIONAL
  address formats vary enormously;
  a UK-shaped form is unusable
  elsewhere

Measuring it

  • Field-level drop-off — which field they stop at — Form Analytics
  • Time per field — long means confusing
  • Error rate per field, and repeat errors
  • Corrections — re-entering a field after leaving it
  • Completion by device — mobile is nearly always worse, and the gap is the opportunity

Field-level analytics is the single most useful instrumentation on a checkout, because it converts “people abandon” into “people abandon on the phone number field” — which is actionable — Checkout Design.