Keyboard types, autofill and OTP: small fixes for mobile forms

Your checkout form might look perfect and still be slow on a phone because of details nobody sees in a design mockup. Someone taps the phone number field and gets the full QWERTY keyboard. The address has to be typed out letter by letter even though the phone already knows it. The OTP arrives by SMS and the customer has to switch apps to copy it. Setting up mobile form autofill and the right keyboard for each field is mostly a matter of adding a few HTML attributes, and it can save visitors dozens of taps.

This guide is aimed at developers and site owners who want to know what to ask for. Each fix is small, low-risk and testable in minutes.

Show the right keyboard with type and inputmode

Mobile browsers choose which on-screen keyboard to show based on two attributes on the input element.

The type attribute

The type attribute describes what the data is. It affects the keyboard and also built-in browser behaviour such as validation.

• type="email" shows a keyboard with the @ symbol and a dot easily reachable.
• type="tel" shows a phone dial pad, ideal for mobile numbers.
• type="url" adds keys such as forward slash and ".com" on some keyboards.
• type="search" often changes the Enter key to a "Search" or "Go" label.

The inputmode attribute

The inputmode attribute only hints at which keyboard to show, without changing validation. That makes it the right tool for numbers that are not really quantities.

• inputmode="numeric" for PIN codes, OTPs, and card numbers: a plain 0 to 9 keypad.
• inputmode="decimal" for amounts that may include a decimal point, such as a custom payment amount.

Avoid type="number" for PIN codes, OTPs and phone numbers. It is designed for quantities, can drop leading zeros, may show spinner arrows, and can change the value when a user scrolls over it on desktop.

Change the Enter key label

The enterkeyhint attribute lets you label the keyboard's Enter key as "next", "go", "send" or "done". Setting "next" on intermediate fields and "send" on the last one makes the flow feel natural.

Let the phone fill in details with autocomplete tokens

Phones and browsers store names, emails, phone numbers and addresses. They can only fill your form if they understand what each field is for, and the autocomplete attribute tells them. Common tokens include:

• name for full name, or given-name and family-name if split
• email and tel
• street-address, or address-line1 and address-line2 for separate lines
• address-level2 for city and address-level1 for state
• postal-code for the PIN code
• organization for company name
• cc-number, cc-exp and cc-csc for card fields, if you host them yourself

Add a section prefix such as shipping or billing when a form has two addresses, for example "shipping postal-code", so browsers do not mix them up. Also make sure each field has a sensible name and a visible label, which improves autofill accuracy further.

Mistakes that break autofill

1. Setting autocomplete="off" across whole forms out of habit. Most browsers limit how far they honour it, and where they do, it just slows customers down.
2. Splitting phone numbers into several boxes, which autofill cannot populate cleanly.
3. Using custom JavaScript fields that do not fire normal change events, so autofilled values are ignored on submit.
4. Reusing the same token on two different fields in one section.

OTP autofill: stop the app-switching

OTP verification is common on Indian websites for sign-up, login and cash on delivery confirmation. Two techniques reduce friction.

autocomplete="one-time-code"

Adding autocomplete="one-time-code" to the OTP input, along with inputmode="numeric", lets iOS and some Android keyboards suggest the code from a recently received SMS above the keyboard. The user taps once and the code is filled.

The WebOTP API on Android

Chrome on Android supports the WebOTP API, which can read a code from a specially formatted SMS after the user grants permission. The message needs a final line that includes your domain and the code in a specific format, so it requires coordination with your SMS provider and DLT-registered template. Treat it as an enhancement: the form must still work when someone types the code manually.

Use one OTP box, not six

Six separate single-digit boxes look neat but often break paste and autofill. A single field styled with letter spacing looks similar and works reliably with every method above.

PIN code lookup for Indian addresses

A six-digit PIN code narrows an address down to a delivery area, so it can save customers from typing city and state. The usual flow is to ask for the PIN code first, look it up against a PIN code directory, and prefill the city and state fields.

Handle this carefully:

• Use a reliable, regularly updated data source, such as the pincode directory published on India's open government data platform or a trusted delivery partner's API.
• Prefill, never lock. Some PIN codes cover several localities or sit near district boundaries, so let users edit the result.
• If lookup fails or the network is slow, leave the fields editable and let the customer continue.
• Use the same lookup to show serviceability or cash on delivery availability early, before the customer reaches payment.

A quick audit for your own forms

Open each form on an iPhone and an Android phone and tap through every field. Check that the correct keyboard appears, that autofill offers your saved details, that an OTP SMS is suggested, and that entering a PIN code fills city and state. Note every field that needs a new attribute; most fixes are one line each.

For stores with checkout and delivery rules, these details are part of our online store development process. If you only need help with one form, you can ask an expert.

Frequently asked questions

Why does my phone number field show the full keyboard?

The input is probably set to type="text" with no inputmode. Changing it to type="tel" will show a dial pad on mobile browsers.

Does autocomplete="off" stop browsers saving passwords?

Generally no. Most modern browsers ignore it for login fields so password managers keep working. Use the correct tokens such as current-password and new-password instead.

Is the WebOTP API supported on iPhones?

No, WebOTP is supported in Chromium-based browsers on Android. On iPhones, the one-time-code autocomplete value provides a similar suggestion from incoming messages.