Forms and fields: fewer fields, clear labels, the right keyboard
How many fields to ask for, a label above the field, a width that hints at the answer, the right phone keyboard, autofill and errors after sending — with live examples.
In short
A good form asks only what is needed for the first reply and is filled in without thinking. Fields go in one column, each with a label above it that does not disappear when typing starts, and with a width that hints at the length of the answer. On a phone every field opens the right keyboard — with @ for email, digits for a phone number or a code — and the browser fills in the name, address and phone by itself if the field says what it is. Optional fields are marked with a word, errors appear after sending both next to the field and in a list at the top, and what the person typed is never lost. The button names the result: “Get the estimate”, not “Submit”.
Ask only what the first reply needs
A request for a kitchen estimate. Switch to four fields: everything else is learned in the first call.
Every field is a question the person has to answer before getting anything. A middle name, a city and “how did you hear about us” do not help to reply — they only make the form longer. For each field ask: what will we do with this answer before the first call? If nothing, the field goes.
The label stays above the field
A label inside the field disappears with the first letter. In a filled form it is no longer clear what was asked.
The grey text inside the field is good for an example of the answer, not for the question itself. The label above stays visible while typing, is read by screen readers, and lets the person check the form before sending. The hint goes under the field: what the number is for, what format is expected.
The width hints at the answer
When all fields are the same length, the postcode looks like a street. A short field says: a short answer is expected here.
The right keyboard on a phone
The field type tells the phone which keyboard to open. One attribute — and the person does not have to switch layouts.
type="email"
@ and the dot at hand
type="tel"
digits and plus
inputmode="numeric"
digits only
Field types and autofill
The type or inputmode chooses the keyboard, autocomplete lets the browser fill the field with saved data.
| What we ask | Keyboard | Autofill |
|---|---|---|
| Name | type="text" | autocomplete="name" |
type="email" | autocomplete="email" | |
| Phone | type="tel" | autocomplete="tel" |
| Street and house | type="text" | autocomplete="address-line1" |
| Postcode | type="text": letters and digits | autocomplete="postal-code" |
| Code from SMS | inputmode="numeric" | autocomplete="one-time-code" |
| Amount | inputmode="decimal" | not needed |
Errors after sending
A list at the top says how many fields to check, each line leads to its field, and the hint next to the field says how to fix it.
After a failed attempt the focus moves to the list, so a screen reader announces it, and nothing typed is erased. The error is marked not only by colour but by a sign and words — for those who do not distinguish red. How a field looks in each state is covered in the article about components.
Forms in code: 2 examples
Fields that open the right keyboard and accept autofill, and styles for a one-column form.
Fields with labels and hints
The label is tied to the field by for and id, the hint — by aria-describedby.
<div class="field">
<label class="field__label" for="phone">Phone</label>
<input class="field__input" id="phone" name="phone" type="tel"
autocomplete="tel" required aria-describedby="phone-hint">
<p class="field__hint" id="phone-hint">We will call you back on this number</p>
</div>
<div class="field field--postcode">
<label class="field__label" for="postcode">Postcode</label>
<input class="field__input" id="postcode" name="postcode"
autocomplete="postal-code" maxlength="8">
</div>
<div class="field">
<label class="field__label" for="sms-code">Code from SMS</label>
<input class="field__input" id="sms-code" name="sms-code"
inputmode="numeric" autocomplete="one-time-code" maxlength="6">
</div>
<div class="field">
<label class="field__label" for="comment">Comment <span>· optional</span></label>
<textarea class="field__input" id="comment" name="comment" rows="3"></textarea>
</div>A one-column form
The eye goes down without a zigzag, short fields are short, and the text in fields is large enough for phones not to zoom in.
/* One column: the eye goes down, not in a zigzag */
.form {
display: grid;
gap: var(--space-5);
max-width: 32rem;
}
.field {
display: grid;
gap: var(--space-1);
}
/* 16px or more: Safari on iPhone does not zoom the page on focus */
.field__input {
min-height: 2.75rem;
padding-inline: var(--space-3);
font-size: max(1rem, 16px);
}
/* The width hints at the length of the answer */
.field--postcode .field__input {
inline-size: calc(8ch + 2 * var(--space-3));
}
.field__label span,
.field__hint {
font-size: var(--step--1);
color: var(--color-text-muted);
}7 rules for forms
-
01
Only what is needed now
Every extra field is a reason to close the form.
-
02
One column
Fields side by side only when they belong together: house and flat.
-
03
A label above the field
The text inside the field is an example, not the question.
-
04
Width by the answer
A postcode is short, a street is long.
-
05
The right keyboard and autofill
type, inputmode and autocomplete on every field.
-
06
Mark the exceptions
If almost everything is required, mark the optional fields with a word.
-
07
Errors in two places
Next to the field and in a list at the top; what was typed stays.
Common mistakes with forms
-
A placeholder instead of a label
After typing, it is not clear what the field was about.
-
Three fields for a name
To address a person, one “Name” field is enough.
-
A phone mask that fights back
A number pasted from contacts does not fit and has to be retyped.
-
A “Clear” button next to “Send”
One wrong tap — and the whole form is gone.
-
A captcha just in case
A hidden field and a check on the server stop most bots without bothering people.
-
A form that is cleared after an error
Typing everything again is the most common reason to give up.
Questions about forms
How many fields should a lead form have?
As many as the first reply needs: usually a name, a way to contact and what is needed.
Should required or optional fields be marked?
Whichever are fewer. In short forms almost everything is required, so the word “optional” is placed next to the rest. An asterisk without an explanation is not understood by everyone.
Does a phone field need a mask?
A hint with an example is often enough. If there is a mask, it must accept a number pasted in any format.
Should fields be checked while typing?
The format — after the person leaves the field. While typing — only things like password strength.
Steps or one long form?
Steps for long forms with different topics, like delivery and payment, with progress shown. A short form fits on one screen.
What should happen after sending?
A clear confirmation on the same screen: what was received, when to expect a reply and what to do in the meantime.
Online form
Forms people
finish
I design and build forms, from a short lead form to a checkout, that people fill in without questions. Tell me about the project — I answer within one working day.