Mobile form design: forms people finish on a phone

Key takeaways

Mobile form design is about reducing typing. Every field on a phone is typed with thumbs on a keyboard that covers half the screen. Forms that show the right keyboard, accept autofill and ask for less get finished. Forms copied from a desktop layout get abandoned at the second field.

• Use the correct input type so phones show the email, phone or number keyboard.
• Add autocomplete attributes so name, email and phone fill in with one tap.
• Keep field text at 16px or more, or iPhones zoom the page.
• One column, labels above fields, and a full-width submit button.

Why do forms fail on phones?

Forms fail on phones because they were designed for a keyboard and mouse. The fields are small, the labels vanish when typing starts, the wrong keyboard appears, and an error message shows at the top of the page where the visitor cannot see it. Each obstacle is minor. Together they make a two-minute task feel like five.

The enquiry form is where a visitor becomes a lead, so it is the most valuable screen on a service website. This guide from Global Bridge Labs (GBL) covers what is specific to phones. Field count, wording and follow-up are covered in our general form guidance.

• Why mobile-friendly web design is essential for UK businesses
• Contact form best practices for more enquiries

How do you get the right keyboard to appear?

Set the input type and, where needed, the input mode for each field. A field marked as an email address brings up a keyboard with the @ symbol. A telephone field brings up the number pad. A numeric input mode shows digits for a postcode house number or a quantity. These are single attributes in the form's code.

• Email: type email, so @ and . are on the first keyboard.
• Phone: type tel, for the telephone keypad.
• Numbers such as quantity: inputmode numeric, for digits only.
• Web address: type url, for a keyboard with / and .com.
• Free text: leave as text, with capitalisation on for names.

How does autofill reduce typing?

Autofill lets the phone complete name, email, phone and address fields from saved details in one tap. It works reliably only when each field carries the correct autocomplete attribute telling the browser what it expects. Google's web.dev guidance on forms recommends setting these for every standard field.

For an enquiry form with name, email and phone, proper autocomplete values turn about forty keystrokes into one tap. It is the largest single saving available and costs a developer a few minutes.

• Full name: autocomplete name.
• Email: autocomplete email.
• Phone: autocomplete tel.
• Address lines: street-address, or address-line1 and address-line2.
• Postcode: postal-code.

• Apple Pay and Google Pay on your website: worth adding?

How should a mobile form be laid out?

Use one column, with each label above its field and always visible. Side-by-side fields are cramped on a narrow screen. Placeholder text inside a field disappears when the visitor starts typing, leaving them unsure what was asked. Fields should be at least 48 pixels high with 16px text.

• One field per row, in a single column.
• Labels above fields, not inside them.
• Fields at least 48px high, text at least 16px.
• Group long forms into short steps with a progress indicator.
• Submit button full width, directly below the last field.
• Mark optional fields as optional instead of starring required ones.

• Font size for mobile websites: what is readable?
• Multi-step vs single-step forms: which gets more enquiries?

How should errors be handled?

Show each error next to the field it relates to, in plain words, as soon as the visitor leaves that field. Keep what they typed. On a phone, an error summary at the top of the page is off screen, and a form that clears itself after a failed submission is the fastest way to lose an enquiry.

Be forgiving about format. Accept phone numbers with or without spaces and postcodes in upper or lower case. Rejecting '07700 900123' because of a space is a rule that exists for the database, not the customer.

When is a form the wrong tool on mobile?

A form is the wrong tool when a call or a message would be quicker. For urgent local services, tapping to call or opening WhatsApp beats any form. Offer those first on mobile and keep the form for visitors who prefer it or who are enquiring out of hours.

There is a trade-off between short forms and lead quality. Three fields get more submissions than ten, and some of those will be poor fits. If the sales team needs more detail, ask for it in a second step or in the follow-up reply, after the contact details are captured.

• Click-to-call: turn mobile visitors into phone calls
• Add a WhatsApp button to your website

What does this look like in practice?

A pattern we see on quote forms: nine fields in two columns, labels as placeholder text at 13px, and a drop-down with forty options. On an iPhone the page zooms at the first tap, the visitor cannot see which field they are in, and the drop-down fills the screen. Analytics shows many people start the form and few finish.

Rebuilding it as name, phone and a free-text 'What do you need?' field, with proper input types and autofill, makes it a twenty-second task. The detail is collected on the call back. Across our client work we have seen a 2.4x enquiry rate from conversion changes like these.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Mobile form checklist

• Cut the form to the fields needed to reply.
• Set the right input type on every field.
• Add autocomplete attributes for name, email, phone and address.
• Put labels above fields and keep them visible.
• Make fields 48px high with 16px text.
• Show errors beside the field and keep entered data.
• Submit the form yourself on an iPhone and an Android phone.

• Contact form abandonment: how to spot and fix it

Next step

Fill in your own enquiry form on a phone, one-handed, and time it. If it takes more than a minute or the page jumps about, the form is costing you leads.