MediumMobileMeasured

Form fields too small on mobile

Short input fields are hard to tap into and type in on a phone.

Checked on: every page the audit scans · Zolvio’s check: “Form inputs too small”

Why it costs you sales

Newsletter sign-ups, search boxes, quantity fields and contact forms all depend on shoppers tapping into a field and typing. Short, cramped fields are easy to miss and hard to read.

Apple’s design guidelines put the minimum comfortable touch height at 44 points.

How Zolvio detects it

Zolvio opens the page at 375 pixels wide and measures the form fields a shopper can see: text, email, search and number inputs, dropdowns and text areas. A field shorter than 36 pixels flags the page, and the finding lists them (up to ten). Fields less than 10 pixels tall or 40 wide are ignored: those are tricks such as spam traps, not fields.

Members-only pages aren’t judged: a page without an add-to-cart form that shows a password or verification form in its content, such as a lock app’s (Easy Lockdown, Locksmith) or a VIP sign-in in the theme. A sign-in box in the header, the footer, a pop-up or a drawer doesn’t count, since it’s on every page. Neither is a product page used for a consultation or a quote: one without an add-to-cart form whose main content asks the shopper to request a quote, talk to a specialist or book a consultation. An ask your buyable product pages show too, such as a banner on every page, doesn’t count.

This finding is reported after AI review: on paid plans with AI turned on, the AI agent checks it against the audit’s evidence before it reaches your issue list. Audits without AI report only the 22 measured checks.

How to fix it

  1. Find the fields the finding lists: quantity, newsletter, contact form or search.
  2. Give them a height of at least 44 pixels on phones, in the theme’s CSS or the section’s custom CSS.
  3. Set their text to 16px or more, so iPhones don’t zoom in when a field is tapped.
  4. Check the page in the theme editor’s mobile preview.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Form fields too small on mobile” cost a Shopify store sales?

Newsletter sign-ups, search boxes, quantity fields and contact forms all depend on shoppers tapping into a field and typing. Short, cramped fields are easy to miss and hard to read. Apple’s design guidelines put the minimum comfortable touch height at 44 points.

How does Zolvio detect “Form fields too small on mobile”?

Zolvio opens the page at 375 pixels wide and measures the form fields a shopper can see: text, email, search and number inputs, dropdowns and text areas. A field shorter than 36 pixels flags the page, and the finding lists them (up to ten). Fields less than 10 pixels tall or 40 wide are ignored: those are tricks such as spam traps, not fields. Members-only pages aren’t judged: a page without an add-to-cart form that shows a password or verification form in its content, such as a lock app’s (Easy Lockdown, Locksmith) or a VIP sign-in in the theme. A sign-in box in the header, the footer, a pop-up or a drawer doesn’t count, since it’s on every page. Neither is a product page used for a consultation or a quote: one without an add-to-cart form whose main content asks the shopper to request a quote, talk to a specialist or book a consultation. An ask your buyable product pages show too, such as a banner on every page, doesn’t count.

How do I fix “Form fields too small on mobile” on Shopify?

Find the fields the finding lists: quantity, newsletter, contact form or search. Give them a height of at least 44 pixels on phones, in the theme’s CSS or the section’s custom CSS. Set their text to 16px or more, so iPhones don’t zoom in when a field is tapped. Check the page in the theme editor’s mobile preview.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Heatmaps — See where shoppers tap and how far they scroll, on mobile and desktop.