Mobile form examples
Field layout, validation, keyboard space and the next action determine whether a small-screen form remains understandable. These inspected examples offer evidence for design decisions rather than a universal template.
16 reviewed screens · 7 apps · Source versions shown for each example
Can the person understand and correct each field?
- Keep persistent labels, purpose and errors together; do not rely on color alone.
- Validate at a useful moment and retain the person's other answers after an error.
- Use the right keyboard, autofill hints and announced status, then test those behaviors in a working implementation.
Claude · Aug 2026
Keep context above the keyboard
The email field and legal links remain above the on-screen keyboard while the illustration becomes smaller.
Consider: Test the smallest supported viewport with the keyboard open, not just the resting form.
Claude · Aug 2026
Show the submitted-address action
A filled email field has a circular arrow action at its trailing edge.
Consider: Give icon-only submit actions accessible names and clear enabled states.
Claude · Aug 2026
Place code entry inside the explanation
The code input appears inside the email confirmation card above the numeric keyboard.
Consider: Group the challenge and its purpose; support platform code autofill where appropriate.
Notion Mail · Sep 2026
Expand the chosen email method
An email field and Continue action sit below the provider menu in the browser sheet.
Consider: Keep the active method evident when alternate methods remain visible.
Notion Mail · Sep 2026
Request the emailed code in place
A verification-code field appears beneath the email field with a sent-to-inbox explanation.
Consider: Keep the address and challenge together so users can verify the destination.
Notion Mail · Sep 2026
Reserve a clear draft structure
The compose view separates recipient, subject and body, with attachment and calendar controls and a muted Send action.
Consider: Make missing requirements understandable before enabling a consequential send action.
Hulu · Jul 2026
Enter an account email
A branded MyDisney panel asks for an email address and presents Continue, with an explanation of how the account connects to Hulu.
Consider: Explain the account relationship next to the field so a change of brand does not feel unexplained.
Hulu · Jul 2026
Continue with a populated email field
The same email step shows a populated field and a primary Continue action; the address itself is omitted.
Consider: Preserve entered input when a person advances or returns, while avoiding unnecessary exposure of sensitive field contents in shared references.
Affirm · Aug 2026
Begin account creation
The account form explains that it needs basic information and shows a mobile-number field with a change-number link.
Consider: Explain data scope before collecting it and let people correct the phone number at the field.
Affirm · Aug 2026
Review a populated phone field
The account form shows a populated mobile-number field, SMS verification explanation and linked terms and privacy information; the number is not repeated.
Consider: Retain context around a completed field and keep consent information available before continuing.
Depop · Jul 2026
Explain a personal-data request
The birth-date screen says the date is needed for safety and will not appear on the profile. A help link offers further explanation.
Consider: Place the reason near a sensitive field and describe visibility. Treat the explanation as a product claim, not independent verification of its data practices.
Depop · Jul 2026
Show the completed date entry
The birth-date fields are populated and Continue is enabled; the safety explanation remains above them.
Consider: Keep the reason for collecting sensitive information visible while a person fills it in.
Starbucks · Jul 2026
Group account fields and choices
The sign-up sheet groups personal info, security and terms, including optional email and faster-sign-in choices.
Consider: Separate optional preferences from required agreement, and ensure defaults are deliberate.
Starbucks · Jul 2026
Keep section labels in a long form
Filled name and email fields remain divided by Personal info, Security and Terms headings.
Consider: Section headings can reduce scanning cost in a long form. Do not expose entered details in analysis copy.
Deliveroo · Jul 2026
Show account requirements
The Create Account screen lists name, email and password fields plus password requirements and a phone-verified confirmation.
Consider: Carry verification feedback into the next step and explain password rules before failure.
Deliveroo · Jul 2026
Keep requirements beside filled fields
The Create Account form shows filled name fields while password requirements and Confirm remain visible.
Consider: Keep the rule near the field as a person completes the form.
Continue with the full context
Observations describe supplied images. Guidance is editorial interpretation, not measured conversion or accessibility results. Third-party screens remain attributed to their owners.