Set the correct input type on every field so the right keyboard appears, enable autofill, ask for as few fields as possible, and keep labels visible above the field rather than inside it.

The conditions the form is completed in

Not at a desk with a keyboard and both hands free.

On a bus, standing in a queue, in a van between jobs, holding a child, or outside in the cold with one glove off.

One thumb, a small screen, and a keyboard covering half of what remains.

Every field is meaningfully harder to complete than it looks on a desktop, and the cumulative effect is that people abandon partway through and do not come back.

The keyboard is the biggest single win

A phone chooses which keyboard to show based on what the field says it expects, and most forms do not say.

So a phone number field shows the standard letter keyboard, and the visitor has to find the key that switches to numbers, then switch back.

An email field shows a keyboard without an at sign readily available.

Setting the field type correctly means the number pad appears for a phone number, a keyboard with an at sign and a dot for an email address, and a numeric keypad for a postcode or a quantity.

This is a small change in the page's code, it costs nothing, and it removes several taps from every field on every mobile submission.

Turn on autofill

Phones will complete name, email, phone number, and address automatically if fields are labelled in the standard way.

When that works, a five-field form becomes two taps.

When it does not, because the fields carry non-standard names, the visitor types everything by hand and frequently gives up at the address.

This is one of the highest-return changes available on any mobile form and it is invisible: nothing about the design changes, the form simply starts filling itself in.

Fields to remove

Each field removed increases completion. The test is whether you would ask that question in the first thirty seconds of a phone call, and if not, it does not belong on an initial enquiry form.

Labels above, not inside

Placeholder text inside a field looks clean and causes two specific problems.

It disappears when the visitor starts typing, so anybody interrupted has no way to know what the field was for and has to clear it to find out.

And it is deliberately faint, which makes it the hardest text on the page to read outdoors.

A visible label above the field stays visible, survives interruption, and can meet normal contrast. This matters more on a phone than anywhere else, because the visitor is interrupted constantly.

A worked example

A landscaping company's quote form asked for name, email, phone, address, property type, budget range, preferred start date, and a description.

Mobile completion was poor and had been attributed to people not being serious.

They cut it to name, phone, and a description box, with email optional, and asked everything else on the call.

They also set the field types, so the number pad appeared for the phone field, and enabled autofill.

Completed mobile enquiries roughly doubled within a month.

The quality concern turned out to be unfounded: the additional enquiries were much like the existing ones, and the information they had been collecting up front was gathered in the first minute of a conversation they were now having more of.

Validate helpfully, and at the right moment

Error handling is where mobile forms most often become genuinely unpleasant.

Check a field when the visitor leaves it rather than only when they submit, so a mistake is caught next to the field that caused it.

Say what is wrong in words rather than turning the field a colour, since colour alone fails outdoors and for anybody who cannot distinguish it.

Never clear the form on an error, which is still surprisingly common and guarantees the visitor leaves.

And be generous about formats. Accepting a phone number with or without spaces, brackets, or a country code is trivial to implement and removes a rejection that reads as the form being fussy about something the business does not care about.

What happens after submit

On a slow connection there is a gap between tapping submit and anything changing, and in that gap people tap again.

Duplicate enquiries are the usual result, and occasionally worse if the form takes a payment.

Disable the button on the first tap and show that something is happening, which removes the ambiguity.

Then make the confirmation unmistakable. A small line of text at the top of a long page is easily missed on a phone, and somebody who is not sure whether their enquiry went through will either send it again or phone to check.

Offer the alternative

Some people will not complete a form on a phone under any circumstances, and that is a reasonable preference rather than a problem to solve.

A tappable phone number beside the form gives them an immediate route, and for many service businesses the call is the more valuable outcome anyway.

For anything genuinely long, such as an application or a detailed specification, an option to have the link sent by email and complete it later on a computer respects the constraint rather than fighting it.

The counter-case

Shortening forms is not universally correct.

Where enquiry volume is high and your constraint is time rather than leads, a longer form filters, and the fields that cost you completions are doing useful work.

Some businesses genuinely cannot respond without specific information, and collecting it up front is better than a call that establishes you cannot help.

The distinction is whether a field filters usefully or merely obstructs. Budget range on a form for expensive projects filters. Company name on a domestic enquiry obstructs, and every field should be able to justify itself in those terms.

The changes

  1. Set the input type on every field.
  2. Enable autofill with standard field names.
  3. Remove any field you would not ask in the first thirty seconds.
  4. Move labels above the fields.
  5. Validate on leaving a field, in words.
  6. Disable the button after the first tap.
  7. Put a tappable number beside the form.

The first two take an hour between them and are the closest thing to a free improvement on this list.

Asking for information you will not use is covered in asking for a phone number you will not use.

Frequently asked questions

Why does the wrong keyboard appear on my form?

Because the field does not declare what it expects. Setting the input type makes a number pad appear for phone numbers and an email keyboard for addresses, removing several taps per field.

What is the highest-return change to a mobile form?

Enabling autofill with standard field names. When it works, a five-field form becomes two taps and nothing about the design changes.

How many fields should an enquiry form have?

As few as possible. The test is whether you would ask that question in the first thirty seconds of a phone call. If not, ask it later.

Should labels go inside the field?

No. Placeholder text disappears when typing begins, so an interrupted visitor cannot tell what the field was for, and it is deliberately faint, which fails outdoors.

How should errors be handled?

Check when the visitor leaves a field, say what is wrong in words rather than by colour, never clear the form, and accept phone numbers in any format.

Should I always shorten the form?

Not always. Where your constraint is time rather than leads, a longer form filters usefully. Each field should justify itself as filtering rather than obstructing.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

When did you last fill in your own form on a phone?

Try it one-handed. Then set the input types and turn on autofill, which is about an hour of work.

Start a Conversation