DEV Community

Rahil Khan
Rahil Khan

Posted on

Make your contact form 2x faster to fill on phones: autocomplete and inputmode in 10 minutes

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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)