Numeric keyboard for number fields at checkout

Fields that expect digits, such as phone, card number and postal code, should open a number pad on a phone. The right input type or inputmode attribute does it. This check looks at numeric fields in checkout.

Why it matters

Switching the keyboard from letters to numbers is slow and causes typos, which cause declined payments and failed deliveries. The fix is a single attribute per field.

What the audit looks at

The audit reads checkout fields that expect numbers and checks their input type or inputmode.

What usually causes it

• Fields built as plain text inputs
• A custom checkout that ignores input modes
• Fields that accept letters and digits and so use text
• Third-party payment fields outside your control

How to fix it

Make number fields open the number keypad on phones. The effort is small, usually a setting or a paste and under 30 minutes.

1. Set inputmode="numeric" (or type="tel") on phone, postcode and card fields.

On Shopify

1. Shopify's checkout does this itself. If yours does not, a custom checkout field is the cause; ask its vendor.

On WooCommerce

1. Add inputmode="numeric" to phone and postcode fields with the woocommerce_checkout_fields filter in a child theme.

How to check it yourself

1. Open checkout on a phone and tap the phone and postal code fields.
2. See whether a number pad appears.
3. Look at the field attributes for inputmode="numeric" or type="tel".

Frequently asked questions

What about postal codes with letters?

Where codes include letters, keep the text keyboard.

Does the payment provider handle card fields?

Hosted card fields are usually set correctly by the provider.

Related checks

• The viewport meta tag: make your store render properly on phones
• Title tags and meta descriptions for store pages: length, content and what to avoid
• Add to cart buttons: what makes shoppers find and use them