Knowledgebase

Form Design: Everything That Matters, Briefly Print

  • uiuxdesign, email, password, woocommerce, billing, guide, howto, solution
  • 0

The summary.

REMOVE FIELDS FIRST

Every field costs completions. Ask of each: do we act on this, could we ask later, could we derive it?

One column. Multiple columns cause fields to be missed.

NEVER USE PLACEHOLDER TEXT AS A LABEL

It disappears when typing begins, is usually too low contrast, and cannot be seen when reviewing.

Labels above the field, and tapping the label should focus it.

VALIDATE AFTER A FIELD IS FINISHED, NOT WHILE TYPING

Show what is wrong specifically, next to the field, and never clear the form.

Accept formatting variations — spaces in card and phone numbers, differing case — and normalise them yourself.

SET THE RIGHT KEYBOARD ON MOBILE

And turn off autocapitalisation where it is wrong. Automatic capitals on an email field is a constant irritation.

ALWAYS ALLOW PASTING

Blocking it prevents password managers and causes errors.

SHOW THE FULL COST EARLY IN CHECKOUT

Late disclosure of delivery cost is the largest single cause of abandonment.

Allow purchase without an account, and preserve everything on payment failure.

A REQUIRED FIELD PEOPLE CANNOT ANSWER PRODUCES RUBBISH

Not accuracy. And names, addresses and phone numbers vary more than most validation assumes.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot