Mobile friendly forms are forms people can fill in with one thumb, on a small screen, often on a slow connection. For many sites more than half of visitors arrive on a phone, so a form that only works well on a laptop loses a large share of its entries. This guide is ideal for beginners and for teams who have never filled in their own form on a phone. We share 10 fixes for forms on phones and a 5 minute test to find what to fix first, in WordPress or anywhere else.
The short version
- Fill in your own form on a phone before changing anything.
- Use the right keyboard for each field: email, phone, number.
- Make tap targets at least 24 by 24 pixels, and bigger for buttons.
- Swap typing for tapping: cards, toggles and date pickers.
Why do forms fail on phones?
Because small screens make every problem bigger. A tiny checkbox is hard to hit, a dropdown with 50 options needs endless scrolling, and a keyboard that covers half the screen hides the error message. Each problem adds a few seconds and a little doubt, and people on phones are often in a hurry. We test every template on a phone in Echo Forms before it ships, because that is where most problems show.
What are 10 fixes for mobile form design?
| # | Fix | Why it helps |
|---|---|---|
| 1 | One column | No sideways scrolling or squinting |
| 2 | The right keyboard | The number pad opens for phone numbers |
| 3 | Big tap targets | Thumbs are less precise than a mouse |
| 4 | Labels above fields | Still visible while typing |
| 5 | Cards instead of tiny radio buttons | One tap on a big target |
| 6 | Fewer typed answers | Choices and toggles beat typing |
| 7 | Short steps | Less on screen at once |
| 8 | Errors next to the field | Seen even with the keyboard open |
| 9 | Autofill names and emails | The phone fills them in |
| 10 | A full-width button | Easy to reach with a thumb |
How big should tap targets be?
Large enough to hit with a thumb without zooming. The WCAG target size guidance recommends 44 by 44 CSS pixels for the best experience, and at least 24 by 24 under the newer minimum. Buttons should be bigger still. In Echo Forms, choice cards turn radio buttons into large tap targets, and on phones a design’s buttons stretch to the full width.
How to test mobile friendly forms, step by step
- Open your form on your own phone, on mobile data instead of Wi-Fi.
- Fill it in with one thumb, and time it.
- Note every moment you zoom, scroll sideways or mis-tap.
- Check that email, phone and number fields open the right keyboard.
- Send it with a mistake on purpose and see whether the error is visible.
- Fix the worst 3 problems and test again. We aim for a contact form a person can send in under 2 minutes on a phone.
The whole test takes about 5 minutes. The everyday fields guide shows which field opens which keyboard, and choices and ratings covers picture and icon cards.
Do multi-step forms help on phones?
Often, yes. A long form split into steps of 3 to 5 fields feels lighter on a small screen, and a progress bar tells people how far they have to go. One question at a time, in conversational mode, suits short forms that people fill in on the move. See multi-step forms for how it looks.
Mobile friendly forms are mostly about respect for the thumb and the small screen. Test yours on a phone for 5 minutes this week, fix the worst 3 problems, and check your entries again after 14 days.
Forms that work on every phone
Every Echo Forms field is built for phones first, with the right keyboard for each.
