Ask less, ask clearly
Forms are where people give up most. Wroblewski (2008) advises asking only what is needed, using short clear labels and emphasising one primary button. On narrow screens, top-aligned labels need the least eye movement (Penzo, 2006). Placeholder text alone vanishes on typing and makes people forget what they were entering. Removing fields directly trims drop-off in the marketing funnel.
Keyboards and input
Many mobile errors come from the keyboard. type="email", type="tel" and inputmode="numeric" summon the right keyboard; autocomplete fills names, addresses and cards; and one-time-code pulls verification codes straight from SMS. For few options, visible buttons beat drop-downs: Couper et al. (2004) found visible drop-down options attract responses, and Bargas-Avila et al. (2011) showed selection-element form affects efficiency. Controls must meet touch target size guidance.
Errors and accessibility
Bargas-Avila et al. (2007) found errors work better shown after leaving a field or on submit, next to the field, rather than instantly while typing. Seckler et al. (2014) confirmed that applying 20 such guidelines reduced errors and completion time. Messages should say how to fix things, not just 'invalid input'. WCAG 2.2 (W3C, 2023) requires labels, error identification and avoiding redundant entry, putting forms at the heart of web accessibility.
FAQ
- Where should labels go on mobile forms?
- Directly above the field; do not rely on placeholder text as the label.
- When should error messages appear?
- After the user leaves the field or on submit, next to the field, with instructions for fixing it.
Sources reviewed: 2026-10-27
References
- Wroblewski, L. (2008). Web form design: Filling in the blanks. Rosenfeld Media. The standard practitioner guide to labels, fields and button placement in forms.
- Bargas-Avila, J. A., Oberholzer, G., Schmutz, P., de Vito, M., & Opwis, K. (2007). Usable error message presentation in the World Wide Web: Do not show errors right away. Interacting with Computers, 19(3), 330–341. Experiments on when and where to show error messages.
- Seckler, M., Heinz, S., Bargas-Avila, J. A., Opwis, K., & Tuch, A. N. (2014). Designing usable web forms: Empirical evaluation of web form improvement guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1275–1284). ACM. Shows applying 20 form guidelines cut errors and completion time.
- Bargas-Avila, J. A., Brenzikofer, O., Tuch, A. N., Roth, S. P., & Opwis, K. (2011). Working towards usable forms on the World Wide Web: Optimizing multiple selection interface elements. Advances in Human-Computer Interaction, 2011, Article 347171. Compares multiple-selection elements such as checkboxes and lists.
- Couper, M. P., Tourangeau, R., Conrad, F. G., & Crawford, S. D. (2004). What they see is what we get: Response options for web surveys. Social Science Computer Review, 22(1), 111–127. Finds visible options in drop-downs pull responses, guiding option display.
- Penzo, M. (2006). Label placement in forms. UXmatters. Eye-tracking comparison of label positions supporting top-aligned labels.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation). Includes labels (3.3.2), error identification (3.3.1) and redundant entry (3.3.7).