Most small-business contact and booking forms are filled in on phones. Two tiny HTML attributes decide whether that takes 10 seconds or a minute of fiddly typing: autocomplete and inputmode. Most themes leave both out.
1. Let the browser fill details for the visitor
Phones already know the visitor's name, email, phone number and address. Tell the browser which field is which, and it offers to fill them in one tap:
<input name="name" autocomplete="name">
<input name="email" type="email" autocomplete="email">
<input name="phone" type="tel" autocomplete="tel">
<input name="city" autocomplete="address-level2">
<input name="zip" autocomplete="postal-code" inputmode="numeric">
Avoid autocomplete="off" on contact fields. It doesn't make anything safer here; it only slows people down.
2. Show the right keyboard
type="tel" opens the number pad, type="email" adds the @ key. For numbers that aren't phone numbers (quantity, guests, PIN code), use inputmode="numeric" instead of type="number", which adds spinner arrows and can mangle leading zeros.
3. Label every field properly
<label for="phone">Phone (for a quick call back)</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">
Placeholder text disappears as soon as someone types, so it's not a label. A real <label> also makes the tap target bigger.
4. Test it in 2 minutes
Open the form on your own phone and tap the first field. If the keyboard offers your saved name/email/phone, it works. If you have to type everything by hand, your visitors do too, and some give up.
Fewer abandoned forms means more enquiries from the same traffic, with zero extra ad spend.
NEXCOD builds and fixes fast, mobile-first websites for small businesses. nexcod.vercel.app · WhatsApp +1 289 902 5119
Top comments (0)