---
title: "Form design is the conversion feature you forgot to build."
date: 2026-01-22
url: https://remiam.co.uk/notes/form-design-as-conversion
tags: [Forms, UX, Conversion]
read_time_minutes: 6
description: "Form design as the unsung conversion feature — the patterns Remiam ships, why default browser inputs almost always lose, and what to fix first."
---

# Form design is the conversion feature you forgot to build.

*Published 2026-01-22 · 6 min read · by Liam (Remiam)*

Every system has a form. Most of them are bad. Here's what we've learnt shipping forms that people actually finish.

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

- Asking for fields you don't actually need at this stage. Every optional field shaves conversion.
- Validation that only appears after submit. Tell users what is wrong as they type, not after they commit.
- 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.
- Mobile keyboards that show the wrong layout. Email inputs should show '@' and '.com'. Numeric inputs should show numbers.
- Submit buttons that look like links. Forms that look like puzzles.

## What we do by default

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

## The boring HTML still matters

```html contact-form.html (excerpt)
<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.

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.

## References

1. [MDN — autocomplete attribute values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
2. [WCAG — accessible forms tutorial](https://www.w3.org/WAI/tutorials/forms/)