56KGen · Viewport

That window is a bit too cramped

Give the browser a little more breathing room so the interface can render properly.

Width ≥ 320 pxHeight ≥ 250 px

Everything will snap back into place once the window is wide enough.

← All articlesWebsites & experience

Mobile forms: small details that make a difference

Suitable keyboards, well-placed error messages and stable layouts make longer forms easier to complete.

1 min read
56K / INSIGHTS

Reduce typing effort

Every field needs a reason to exist. Order fields to match the user's thinking, mark optional information and use clear labels. Choose suitable keyboards for email addresses, phone numbers and verification codes to reduce switching.

Allow the browser to autofill fields with a clear meaning. Do not block pasting passwords or verification codes: pasting can help people work faster and more accurately.

Avoid unexpected layout shifts

Reserve space for avatars, previews and status messages. When extra controls or validation errors appear, the layout should change deliberately. The primary button should be easy to find and remain accessible around the keyboard at important steps.

A button row that fits a large screen may not fit a small phone. Test long labels, enlarged text and narrow screens rather than only one popular size.

Help people correct mistakes

Explain which field has a problem and how to fix it. Preserve entered data when submission fails. After success, explain what changed; if another step is needed, describe it with a concise action. A good form helps people know where they are and what remains.

Keep reading

All articles ↗