What makes mobile forms fail?
Wrong input types so the wrong keyboard appears, missing autocomplete attributes, labels beside fields rather than above, errors summarised at the top instead of next to the field, strict phone number formats, and too many fields — that last one matters more than all the others combined.
Set the viewport correctly
Without this tag a phone renders the page at desktop width and shrinks it, making everything unreadably small:
<meta name="viewport" content="width=device-width, initial-scale=1">
Do not add maximum-scale=1 or user-scalable=no. Disabling zoom is an accessibility failure and it blocks people who need to enlarge text.
Make tap targets big enough and far enough apart
A fingertip is roughly 10mm. Interactive elements should be at least 44 by 44 pixels with about 8 pixels of space between them.
The usual offenders:
- Navigation links stacked with no vertical padding
- Small icons for social links or phone
- Checkboxes and radio buttons at browser default size
- Two buttons sitting flush against each other
A phone number that is hard to hit accurately is the most expensive version of this problem.
Stop horizontal scrolling
If the page can be dragged sideways, something is wider than the screen. Common causes:
- A fixed pixel width on a container
- An image without
max-width: 100% - A table with no scroll container of its own
- A long unbroken string — a URL or an email address
- Negative margins pushing an element past the edge
Wide content should scroll inside its own container, not push the page. Wrap tables and code blocks in an element with overflow-x: auto.
Size text for reading, not for fitting
Body text should be at least 16 pixels. Below that, iOS zooms in automatically when a form field is focused, which throws the layout around at the worst moment.
Also check contrast. Grey text on a white background that reads fine on an office monitor is unreadable on a phone outdoors, and Houston sunlight is a real design constraint rather than an edge case.
Fix forms specifically
Forms are where mobile visitors give up:
- Use the right input types so the correct keyboard appears —
type="tel"for phone,type="email"for email - Set
autocompleteattributes so saved details fill in - Put labels above fields, not beside them
- Show errors next to the field, not in a summary at the top
- Accept phone numbers in any format and normalise them yourself
- Cut every field you do not truly need
That last point does more than all the others combined.
Keep fixed elements small
A sticky header, a cookie banner and a chat widget together can consume half a phone screen. Pick one fixed element, keep it under about 60 pixels, and make sure nothing overlaps the bottom of the page content — a fixed call bar needs matching padding on the body or it covers the last thing on every page.
Make popups dismissible
A popup with a close button too small to hit, or one that reopens on scroll, ends the visit. If you use one, it must be easy to dismiss with one thumb and must not cover the whole screen.
Re-check after every release
Theme updates, plugin changes and new sections break mobile layouts routinely. A five-minute check on a real phone after each deployment catches most of it before a customer does.
Frequently asked questions
What is the single most important mobile tag?
The viewport meta tag with width=device-width and initial-scale=1. Without it a phone renders at desktop width and shrinks everything. Never add maximum-scale or user-scalable=no — disabling zoom is an accessibility failure.
How big should buttons and links be?
At least 44 by 44 pixels with about 8 pixels between them, because a fingertip is roughly 10mm. Stacked navigation links with no padding and small icon links are the usual offenders.
Why does my page scroll sideways?
Something is wider than the screen — a fixed pixel width, an image without max-width, a table with no scroll container, or a long unbroken URL. Wide content should scroll inside its own overflow container.
What makes mobile forms fail?
Wrong input types so the wrong keyboard appears, missing autocomplete attributes, labels beside fields instead of above, errors summarised at the top, strict phone formats, and too many fields — the last matters most.
How much screen can fixed elements take?
As little as possible. A sticky header, cookie banner and chat widget together can eat half a phone screen. Pick one, keep it under about 60 pixels, and pad the page body so a fixed bar does not cover the last content.