The phone field is where forms most often reject real customers. +46 70 123 45 67, 070-123 45 67 and 0701234567 are the same number — and somewhere, a form is refusing two of the three. The fix is counterintuitive: the best phone field is the least strict one.
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">type="tel" brings up the dial-pad keyboard on phones
and — deliberately — validates nothing. autocomplete="tel"
lets the browser fill the number in one tap. That's the whole
field.
Phone numbers have no single format. Country codes,
leading zeros, spaces, dashes, parentheses — every combination is in
someone's contacts, and browsers autofill numbers complete with
spaces. A pattern that enforces one shape rejects honest
autofilled numbers, and the visitor's reward for using your form
carefully is an error they don't understand.
If your business system needs numbers in one shape, normalize at the receiving end — strip spaces and dashes after the message arrives. Cleanup is your job, not the customer's.
Default to optional. Plenty of people — especially younger customers — will abandon a form that demands a phone number for something email handles. Require it only when calls are genuinely how the work happens: a contractor scoping a project, a restaurant that must reach a party about tonight's table. If you require it, the label can say why: "Phone (we confirm bookings by phone)" turns a demand into a reason.
Country-flag pickers and auto-formatting inputs look professional and cost more than they give: a JavaScript dependency, layout quirks, and a new way to be wrong (the visitor from a country your picker sorts poorly). For an international audience, one optional line in the label — "include country code" — does the same work with zero moving parts.
No — real numbers arrive with +, spaces, dashes and parentheses, and browser autofill includes them. If a field must be machine-clean, clean it at the receiving end instead of bouncing the visitor.
type="number" is for quantities — it strips leading zeros, may show spinner arrows, and rejects + and spaces, all wrong for phone numbers. type="tel" gives the dial-pad keyboard and accepts anything. Always tel for phones.
Use inputmode="numeric" on a normal text input — number pad on phones, no number-field semantics. That’s the right tool for digit-ish values that aren’t quantities.
The hform builder writes this kind of HTML for you — real labels, the right input types, a honeypot, validation that respects your visitors. Build a form in two minutes; free plan included, plain pricing beyond it.
More form craft: Validation · File uploads · Form length — or see all guides.