Make Your Mobile Checkout Forms Dead Simple to Complete

On your e-commerce sites, it’s bad enough if potential customers abandon their carts simply because filling out forms becomes too tedious or confusing.

Maybe you’ve streamlined each form in your checkout process to make it as painless as possible.

But how simple and fast is it to complete your checkout forms on a mobile device?

For starters, labels above fields helps readability.

Trust logos likely increase conversion rate.

But are each of your form fields bringing up the right mobile keyboard type?

If you’re not familiar with the different keyboards for iOS and Android, think about it the next time you fill out your email address on a form using your phone. Are the ‘@’ and ‘.’ characters prominently displayed next to the space bar at the bottom? If not, then you have to navigate to the symbols keyboard to complete the field. It’s a few extra taps which can be eliminated.

To avoid this we need to match mobile keyboard types to form fields, which is pretty simple to add to your forms. The 4 main keyboard types are standard (default), email, number and phone.

iOS also supports URL, date and time keyboard types. But Android does not currently.

HTML5 input types are used to trigger the keyboard type. And if the device being used doesn’t support them it will simply revert to a standard keyboard.

Here’s a comparison of what the keyboard types look like on iOS (left) and Android (right) along with the HTML input types required to trigger them.

Default text field (type=”text”)

iOS form field text default Android form field text default

[code language=”html” light=”true”]
<input type="text" name="first_name">
[/code]

Email input type

Notice the ‘@’ and ‘.’ characters added next to the space bar for easy email address entry.

iOS form field email Android form field email

[code language=”html” light=”true”]
<input type="email" name="customer_email">
[/code]

Number input type

Numbers dominate the top row on iOS with supporting characters on the next 2 rows. Android simply brings up a 10-key.

iOs form field number Android form field number

[code language=”html” light=”true”]
<input type="number" name="cc_number">
[/code]

Phone input type (type=”tel”)

Both iOS and Android use a 10-key here, with the addition of letters and ‘#’ / ‘*’ characters to imitate regular phone keypads.

iOS form field telephone Android form field telephone

[code language=”html” light=”true”]
<input type="tel" name="phone_number">
[/code]

Drop-downs such as credit card expiration dates should just use the native HTML input type ‘select’.

Don’t forget to add the autofocus attribute to the first field in the checkout form to eliminate another extra tap. This works on both mobile and desktop HTML5 browsers.

[code language=”html” light=”true”]
<input type="number" name="cc_number" autofocus>
[/code]

That’s it. Not much extra coding to make filling out your mobile checkout forms easier and faster for your visitors. Hopefully you’ll see a few more conversions after putting these changes in place.