Every system we build has a form somewhere. Contact, signup, booking, checkout, intake. The form is usually the place where the most value enters the business — and it's usually the place that's been given the least design attention.

## What kills a form

- 01 Asking for fields you don't actually need at this stage. Every optional field shaves conversion.
- 02 Validation that only appears after submit. Tell users what is wrong as they type, not after they commit.
- 03 Inputs that don't match the data. Date pickers that need 12 clicks, phone fields without auto-format, addresses you make people type when you could lookup.
- 04 Mobile keyboards that show the wrong layout. Email inputs should show '@' and '.com'. Numeric inputs should show numbers.
- 05 Submit buttons that look like links. Forms that look like puzzles.

## What we do by default

- 01 One column. Forms are vertical. Two-column forms are slower on every device we tested.
- 02 Real labels above inputs, not placeholder-only — placeholders disappear and accessibility loses.
- 03 Inline validation with positive states. The green check is as important as the red cross.
- 04 Autofill discipline — autocomplete attributes on every field that matters. Browsers will help if you let them.
- 05 A clear single primary action. No competing buttons next to submit.

## The boring HTML still matters

```
<form>
  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    autocomplete="email"
    inputmode="email"
    required
  />

<label for="phone">Phone</label>
  <input
    id="phone"
    name="phone"
    type="tel"
    autocomplete="tel"
    inputmode="tel"
  />

<button type="submit">Send →</button>
</form>
```

## Form-design checklist

| Check | Why it matters |
| --- | --- |
| One column, vertical | Faster on every device tested |
| Real <label> above each input | Accessibility + label survives focus |
| Inline validation on blur | Caught wrong before user commits |
| Correct type and inputmode | Right mobile keyboard, less typing |
| Autocomplete attributes | Browser autofill works without prompting |
| Single primary action | No accidentally hit-the-wrong-button |
| Loading state on submit | Prevents double-submission |
| Success state without redirect | Visible confirmation in context |

The form-design checklist we apply to every form we ship.

> We can almost always lift conversion on a form by a double-digit percentage just by applying the basics. It's not exciting work. It's the work that pays the rent.