Why is my form hard to fill in on a phone?

A phone chooses its keyboard from the field's type. An email address in a plain text field gets a keyboard without the @ sign in easy reach.

Declaring the field as email, tel, url or number gives the matching keyboard at no cost.

Where the type would change validation in unwanted ways, the inputmode attribute selects the keyboard without changing behaviour.

Automatic capitalisation and correction applied to email addresses and user names produce errors the visitor has to notice and undo; both can be switched off per field.

Phones store names, addresses, emails, phone numbers and payment details, and fill them in one tap — if the field says what it is for.

The autocomplete attribute carries that statement, with standard tokens such as name, email, tel, street-address and postal-code.

Without it, the browser guesses from the field name, and guesses badly on forms whose names are generated.

Autocomplete tokens are also an accessibility requirement, since they let assistive technology identify the purpose of common fields.

On a checkout, autofill is the difference between a minute of typing on glass and a few taps.

Safari on iOS zooms into a focused field whose text is smaller than 16 CSS pixels, and the visitor has to zoom back out after every field.

The fix is a field font size of at least 16 pixels on small screens.

The wrong fix is disabling zoom in the viewport declaration, which stops the automatic zoom and also stops anyone who needs to magnify the page from doing so.

Small field text is usually part of a wider problem of text too small for a phone, and fixing the base size fixes both.

Checkboxes, radio buttons, small links such as the terms link and the close button of a popup are the usual offenders.

A target smaller than a fingertip, or packed tightly against its neighbours, produces mis-taps that look like the form ignoring the visitor.

Making the label clickable — associating it with its control — enlarges the target to the whole label for free.

Spacing between adjacent targets matters as much as their size.

A placeholder used as the only label disappears the moment the visitor starts typing, and on a small screen there is no room to remember it.

Error messages shown only at the top of a long form are off-screen on a phone, so the visitor sees nothing happen on submit.

Errors placed next to the field, and focus moved to the first one, make the problem visible where it is.

Losing everything typed when validation fails is the single most frustrating failure, and the most expensive on a phone.

Field types against what each field evidently contains, and missing autocomplete tokens.

Fields without a programmatic label.

Touch target size and spacing, text size, and the viewport declaration — including one that disables zoom.

On a detected shop, the same static signals on the checkout page specifically.

What only a real phone establishes is the experience end to end: autofill actually working, errors appearing in view, and the keyboard not covering the field in use.