How to design forms that are easy to fill on a phone

Most enquiry forms are designed on a large monitor, where a two-column grid of neat little boxes looks tidy. Then a customer opens that same form on a phone, standing in a queue, with one thumb and a screen half-covered by the keyboard. Good mobile form design starts from that real situation. The layout, sizing and control choices below are about making each field quick to find, easy to hit and simple to complete, so the form actually gets sent.

Cut before you design

No layout trick beats having fewer fields. Every extra input is another tap, another scroll and another chance for the keyboard to hide something. Before adjusting any design, go through the form and ask of each field: do we need this before we first speak to the customer?

A basic service enquiry often needs only a name, a phone number and a short message. Company name, budget range, city and "how did you hear about us" can often wait for the first conversation. On a phone, the difference between three fields and nine is the difference between one screen and three.

Use a single column, always

Side-by-side fields make the eye zigzag and are easy to skip on small screens. A single vertical column gives one obvious path from top to bottom, which suits the natural scrolling motion on a phone.

Even pairs that seem to belong together, such as first name and last name, work better stacked on mobile. Better still, use a single "Full name" field unless you have a genuine need to split it. The one exception is a very short, tightly related pair such as a card expiry month and year, and even then test it on a narrow screen.

Make inputs big and forgiving

Height and width

Text fields should be comfortably tall, around 44 to 48 pixels, so they are easy to tap and the typed text is clearly visible. Let them span the full width of the form so there is no tiny target to aim for.

Text size inside fields

Use at least 16 pixels for the text inside inputs. As well as being readable, this avoids iOS Safari automatically zooming into the page when a field is focused, which disorients many users.

Clear boundaries and focus

Give each field a visible border with enough contrast against the background. Minimalist designs that show only a faint bottom line make it hard to see where to tap. When a field is active, show a strong focus style so users know where their typing will go.

Put labels above fields, not inside them

Placeholder text inside a box looks clean in a mockup, but it disappears the moment someone starts typing. On a phone, where users often switch apps to copy an address or check an OTP, they come back to a half-filled form and cannot tell what each box was for.

• Place a short, visible label directly above each field. Top-aligned labels suit narrow screens because they never compete with the input for width.
• Keep labels short: "Phone number" rather than "Please enter your contact phone number".
• Use hints sparingly, below the label or under the field, for format help such as "10-digit mobile number".
• Mark optional fields with "(optional)" instead of scattering asterisks on required ones, since most fields in a lean form will be required anyway.

Choose the right control for each question

Dropdown menus are the default for anything with fixed options, but on phones they are often the slowest choice. Opening a select list, scrolling the native picker and confirming takes several steps, and the options are hidden until opened.

Short lists: show the options

For two to about five choices, use large tappable buttons or radio options that are visible all at once. "Preferred contact: Call / WhatsApp / Email" is a single tap with segmented buttons, compared with three or four steps using a dropdown.

Yes or no questions

A clearly labelled toggle or a pair of radio buttons works better than a dropdown containing "Yes" and "No".

Long lists: dropdowns or search

For long, familiar lists such as Indian states, a native dropdown is fine, because the phone's own picker handles it well. For very long lists such as cities or product models, a search-as-you-type field is usually faster.

Dates and numbers

Avoid custom date widgets that are fiddly on touch screens. Native date inputs open the phone's own picker, and for things like quantity, simple plus and minus buttons with a large hit area are easier than typing.

Keep the submit button within reach

On a long mobile form, the submit button can end up hidden below the keyboard or far down the page. A few approaches help:

1. Place the submit button immediately after the last field, full width, with a specific label such as "Send enquiry" or "Request callback".
2. On longer forms, consider a sticky submit bar at the bottom of the screen. Make sure it does not cover fields, and that it moves sensibly when the keyboard opens.
3. Split genuinely long forms into short steps with a progress indicator, each step fitting roughly one screen.
4. After a tap, disable the button and show a sending state so people do not tap repeatedly and create duplicate submissions.

Show errors where the thumb is

If a form fails on submit and shows a message only at the top, a mobile user may never see it. Place error messages directly below the relevant field, scroll to the first problem automatically and keep everything the user typed. Messages should say what to fix, for example "Enter a 10-digit mobile number", not just "Invalid".

Testing your form on real phones

Hand your phone to someone who has never seen the form and ask them to send an enquiry while you watch silently. Note where they hesitate, mis-tap or scroll back up. Then repeat on a smaller Android device. Five such tests usually reveal most layout problems.

If your forms are part of a campaign or a sales funnel, every lost submission costs money. Our landing page development team designs forms around mobile users first, and the same approach runs through our wider website builds.

Frequently asked questions

Should form labels be inside or above the input on mobile?

Above is generally better. Labels placed inside fields as placeholders vanish when typing starts, which makes forms harder to review and correct. Floating labels are a compromise but need careful styling to stay readable.

How many fields should a mobile enquiry form have?

As few as you need to start a conversation. For many service businesses that is three or four: name, phone, perhaps email, and a short message. Collect the rest later.

Are multi-step forms better on phones?

For long forms such as applications or detailed quotes, breaking them into short steps can feel more manageable. For a simple enquiry, a single short screen is faster than splitting it up.