Mobile Form Design Examples

Inspect field layout, validation, keyboard space and next actions across reviewed mobile form screens.

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.

Try an original web example →

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

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.

App collection Source ↗

Opening…

Continue with the full context

Depop signup: email handoff, validation and first browse →Claude sign-in: make the email handoff recoverable →Notion Mail: distinguish sign-in from connecting a mailbox →Starbucks and Deliveroo: when to ask for an account or location →Hulu account entry and genre personalization →Affirm account creation and identity checks →

Observations describe supplied images. Guidance is editorial interpretation, not measured conversion or accessibility results. Third-party screens remain attributed to their owners.