Email keyboard on checkout: set the right input type for phones
The email field at checkout should open the email keyboard with an @ key on phones. One attribute fixes it. See how to check.
2 min read
Area
CRO & UX
Severity
Low
Fix effort
Small
Stores failing
Not enough data
When a shopper taps the email field at checkout on a phone, the keyboard should show the @ symbol and dot. That happens when the field is set to type email. This check looks at the email field on your checkout.
Why it matters
Typing an email on a standard keyboard means switching layouts to find the @, which is slow and error-prone. Mistyped emails mean lost order confirmations and abandoned-cart emails that never arrive. The fix is a single attribute.
What the audit looks at
The audit reads the checkout page markup and looks for an email input with type email or the matching inputmode.
What usually causes it
- A custom checkout field built as a plain text input
- A checkout app that replaced the default fields
- A theme that overrides the checkout template
- A field used for both email and phone with a text type
How to fix it
Make the checkout email field open the email keyboard on phones. The effort is small, usually a setting or a paste and under 30 minutes.
- Give the field type="email" and autocomplete="email" so phones show the @ keyboard and offer saved addresses.
- This removes one of the commonest sources of typing errors at checkout.
On Shopify
- Shopify controls the checkout form, so this is already handled on Shopify and cannot be changed from the theme; no action is needed.
On WooCommerce
- Check the checkout template or checkout plugin: the billing email input needs type="email" and autocomplete="email". WooCommerce sets these by default, so a customised checkout field plugin is the usual cause.
How to check it yourself
- Open checkout on a phone and tap the email field.
- See whether the @ key is on the main keyboard.
- Inspect the field for type="email".
Frequently asked questions
Does this also work for the phone field?
Phone fields should use type tel, which opens a number pad. See the numeric keyboard guide.
Can I change checkout fields on Shopify?
Shopify controls its checkout, which already uses the right types. Custom checkouts and other platforms need the change.
Related checks
Check your own store
See whether your store passes this check
Paste your store URL. The audit loads your pages in a real browser and shows the result for this check with the evidence behind it.