Skip to content

Form Design

Designing the fields, sequence, validation and error handling of a form so people can complete it without stopping to think.

UI Components

Form design is the design of the fields, their order, the validation and the error handling, so a person can complete the form without stopping to think. It is the highest-leverage interface work in most B2B products, because forms sit at every point where the product asks somebody to commit: signing up, inviting a colleague, configuring an integration, submitting a request.

It is also the most measurable. A form has a completion rate, and it responds to changes that cost hours rather than sprints.

The decisions that matter, in order

Which fields exist. The largest effect available, and the one that requires the most agreement, because somebody wanted each field. Removing a field beats optimising it.

What order they come in. Easy and obvious first, so momentum builds. A form opening with the hardest question loses people who would have finished it.

How they are labelled. Above the field, in the words the person would use, and specific enough to answer without guessing. "Company size" with overlapping ranges makes somebody stop and work out where they belong.

When errors appear. Inline, as they go. Not after submit.

What happens on failure. Whether their work survives. This is the difference between an annoyance and an abandonment.

Layout rules that are settled

Some of this is genuinely contested and some is not. The following is not.

RuleWhyThe exception
One columnA single unambiguous reading orderGenuinely paired fields, such as city and postcode
Labels above the fieldFastest to scan, survives translation and narrow screensNone worth taking
No placeholder-as-labelIt vanishes on typing, so nobody can check their entryPlaceholder as a format hint, alongside a real label
Field width suggests input lengthA three-character field should not be 400px wideNone
Required marked, not optionalMost fields are required; marking the minority is quieterForms where most fields are optional, then invert
Errors next to the causeSomebody must not hunt for what went wrongNone

Nothing in this table is expensive to implement, and getting all six right puts a form ahead of most of what ships.

Validation, which is where forms are won and lost

Two sign-up forms side by side. On the left, labelled Avoid: an email field whose only label is the placeholder, showing ana@ with the error "Invalid email" underneath, and a second field labelled only by its placeholder Company size. On the right, labelled Better: the same email field with a persistent Work email label above it and the message "Add the part after the @ — we use it to find your company", and a Company size field with a visible label above a Select one control

The two forms accept the same input and reject the same input. What differs is whether the person can tell what happened without guessing, and whether the label is still on screen once they start typing.

The pattern that costs the most is the one that is easiest to build: validate everything on submit, return the page with a list of errors at the top, and clear the fields that failed.

Each part of that has a fix.

Validate as they finish each field, not as they type the first character, which flags an email as invalid before anyone has finished writing it. On blur is usually the right moment.

Say what would be valid, not that the input was wrong. "Use your work email" is actionable; "Invalid email" is a verdict.

Keep everything they typed. Losing entered data is the single most expensive defect in this area, and it is nearly always a consequence of how the failure path was built rather than a decision anybody made.

Put the message next to the field. A summary at the top of a long form makes somebody hunt for the cause.

Do not block submission on a warning. Distinguish "this cannot be accepted" from "this looks unusual".

Forms in B2B, where the fields are political

Consumer form advice says remove fields. In B2B every field has an owner who asked for it, which turns a design decision into a negotiation.

Three things move that conversation.

Separate qualifying data from necessary data. Company size and role qualify a lead; they are not needed to create an account. Asking them after the first success keeps the information and stops charging for it in abandonment.

Show what a field costs. A field-level drop-off figure ends the argument faster than any principle. The team that wanted it can then decide with the number visible.

Enrich instead of asking. Company size, industry and headcount can often be derived from a work email domain. The best field is the one nobody has to fill.

There is also a distinctly B2B failure: forms that ask for information the person does not have. Integration credentials, a tax identifier, a billing contact. Somebody has to email a colleague, and the tab closes. Those fields belong later, marked optional, with a way to come back.

In practice

A trial signup form has nine fields and loses a substantial share of the people who start it.

Watching five people attempt it shows two independent problems. "Company size" offers ranges that overlap at the boundaries, so people stop to work out which one applies to them. And validation runs only on submit, so a mistyped work address returns the form with its fields emptied.

Two changes, neither visual. The overlapping ranges become a plain number field. Validation moves inline, with the message beside the field and everything typed preserved.

The instructive part is what happens when the result is split by change. If the inline validation carries almost all of the gain and removing the field contributes little, the team has learned that people were not abandoning at the field, they were abandoning after the error, and the next form they build should start from that.

Where teams get it wrong

  • Restyling instead of removing. A prettier nine-field form is still nine fields.
  • Validating on submit. The person invests everything before learning anything.
  • Clearing the fields on error. The most expensive defect in form design, and almost always accidental.
  • Placeholder text as the label. It disappears exactly when somebody wants to check their work.
  • Asking for what they do not have. The tab closes and does not reopen.
  • Two columns because it looks balanced. Symmetry paid for in skipped fields.

Frequently Asked Questions