Done right, optimized mobile forms can deliver more than an increased conversion rate: They can become a competitive advantage—a reason users choose to fill out a form on your site.

Just have a look at the number of interactions it takes to book a room on Hotel Tonight compared to its competitors:

“Booking a hotel happens in 3 taps and a swipe. This is a competitive advantage,” says Sam Shank, the CEO of Hotel Tonight.

Reducing form fields usually works, but, like every “best practice,” it’s not a guarantee. (Indeed, there may be times when increasing form fields boosts conversion rates.)

What follows is a mobile-specific framework for form optimization:

1. Key differences between the mobile and desktop UI

Three key UI differences create challenges for mobile-form design:

1. Aspect ratio. About 80–90% of smartphone use occurs in portrait orientation, which makes width a precious commodity: There’s more vertical space, and vertical scrolling is more intuitive.

2. Touchscreen navigation. There’s no mouse, and smartphone users with a stylus are in the minority. A touchscreen places added demands on the size and spacing of elements.

3. Limited keyboard. Smartphones have a limited keyboard—and an inconsistent one. Those factors justify careful consideration of which keyboard to show for which field and whether to enable (or disable) automated functions, like auto-capitalize.

2. Form-wide considerations

Single-column design

Single-column forms enabled faster completion compared to multi-column ones:

Multi-step forms

Multi-step forms have the potential to eliminate scrolling entirely by fitting each form section within the smartphone window. They have added benefits for long forms:

• Information can be saved after each step
• They chunk segments of the form to reduce the cognitive load. For long forms, this can make the process seem less intimidating

Font size

A 16px font size is standard for body copy on mobile devices. Smaller (or larger) font sizes may cause issues, especially for those with visual impairments.

Touch-target size

Small buttons risk imprecision on the part of the user or the device. Touch-targets for mobile devices have minimum size recommendations. The minimum size grows larger as the target moves away from the center of the screen, where user taps are most accurate:

• 7 mm in the center of the screen.
• 9 mm along the edges.
• 12 mm in the corners.

Important: visible buttons or icons may be smaller than the touch targets, but the size of the touch targets should cover the minimum area, even if the icon or button doesn’t fill the space.

Total form fields

Since filling out a form is less convenient on a mobile device—keyboards are smaller and partial, touch is less precise than a mouse click—the reasons that removing form fields usually works on any device are, presumably, more true for smartphones. (That logic won’t bail you out of testing.)

3. Field-specific considerations

Automation

HTML tags toggle automated features on and off based on the input field:

• Autocorrect. Autocorrect may mistakenly correct information in fields with proper nouns (e.g. name, address).
• Auto-capitalize. Auto-capitalize saves users effort for name and address fields but should be disabled for password fields.
• Autocomplete or autofill. Autocomplete may be useful for finishing a known email address, but it may erroneously try to complete an order number with a phone number, or vice versa.

• Autodetection. Asking for the credit card type is unnecessary; autodetection identifies the credit card based on the first four numbers, requiring form fillers to complete one less task.
• Location detection. Location detection can identify the user’s country (at a minimum) or, using Google’s Places API or another geolocation API, a more specific place, like the nearest airport. Time your request for location information carefully—if you request access before users see the relevance, they may decline.

Drop-downs

Treat dropdowns as a “UI of last resort;” research shows that mobile forms with dropdowns take longer to complete. That’s because mobile dropdowns:

• Require more interactions.
• Obscure user choices.

There are other options:

Steppers. A +/– set of controls can be grouped together or separated by the element label. Steppers work well for quantities that have a reasonable upper bound, like hotel or airline reservations. (Site visitors rarely book rooms or flights for more than a few people.)

Segments. When the options are limited, a segmented control allows a user to see all available choices at once:

Sliders. Sliders can be used for large ranges or those with a Min-Max variable.

Date pickers. A calendar picker, rather than a drop-down list of days, months, and years, can reduce the total number of taps. (Unless you’re asking for a date of birth—clicking back decades in a calendar would be an ordeal.)

The same research study that found that dropdowns slowed form completion also found that a single date picker—despite requiring fewer total interactions—slowed form completion, too. Two separate date pickers (for start and end dates) resulted in faster task completion.

Field masks

Field masks can help reduce errors and speed up form completion by displaying the proper format for a response that could have many formats, like a telephone or credit card number:

Masks should also:

• Be visible from the start. If the mask reveals gradually, users are still guessing from input to input if they’re on the right track.
• Not include placeholder text. Doing so may cause users to skip over a field because it appears pre-filled. An outline of the expected input, such as “(     )      –          ” can set expectations while also clearly looking incomplete.

Field labels

The condensed space on a mobile device makes easy-to-read field labels essential. The aspect ratio alone (portrait instead of landscape) effectively mandates labels above rather than beside form fields. Otherwise, almost any entry would require horizontal scrolling to see the label and entry field at the same time.

One solution is a floating label, implemented via CSS or JavaScript. The form label initially appears inside the field in larger type (increasing readability while saving space), then migrates above the field (in smaller type) as soon as the user taps it:

Field-specific keyboards

Define the input type (e.g. “email,” “tel,” “datetime,” etc.) to return an appropriate mobile keyboard when a user taps into the field.

Keyboard types offer obvious (a number pad for phone numbers) and subtle (the inclusion of the “@” symbol for email addresses) conveniences.

In-line validation

On most mobile forms, users can’t see the entire form; vertical scrolling is necessary to see all fields. That makes real-time, in-line validation—a best practice for forms on any device—more important.

Descriptive text—instead of simple green or red highlighting—helps users correct the error quickly and ensures accessibility for visually impaired users.

If users need to scroll to the top of the form to see errors, then scroll back down to the specific field, they may get lost or frustrated and give up.

Other optimizations

Form autofocus. Autofocus highlights the current input field, making it easier for users to see which field they’re working in.

Suggestive field sizing. Sizing fields relative to the length of the anticipated input (e.g. a longer field for a street address compared to a zip code) offers a subtle reminder to users about input expectations.

Disabling the submit button. After a user taps to submit a form or complete a purchase, disabling buttons prevents an accidental click that may cause resubmission or navigate the user offsite before the conversion completes.

4. Tools to measure form performance

Granular measurement helps identify trouble spots within forms:

• Which parts of the form take users the longest to complete?
• At which point do users most often abandon the form?

Tools you can use for form analytics: Google Tag Manager, HotJar, Formisimo, Zuko (for enterprise), Clicktale.

Conclusion

Mobile forms restrict user interactions—there’s no mouse, an incomplete keyword, and a smaller, vertical screen. Those limitations make an intuitive and efficient user experience more important and, at times, more challenging to deliver.

But they also make some choices easier; not every form “optimization” needs to be tested. Delivering the appropriate keyboard for the appropriate field is a clear win. So, too, is a reasonably sized touch target or the use of a field mask to reject invalid inputs. Those UX improvements are an immediate opportunity for all sites, not just high-traffic ones.

Like all online efforts, form optimization is not a static discipline. Newer features like Touch ID, facial recognition, or photo scans of credit cards promise streamlined interactions at a critical juncture that, every year, occurs more frequently on mobile devices.

Optimizing Mobile Forms for More Conversions—and a Competitive Advantage

PS. Install a form analytics tool before doing any tests. First, you’ll see where people have problems with your form. Then, after testing, you’ll see a clear “before and after” picture.