Improving the Bootstrap checkout example UX

Bootstrap’s documentation has a really nice example of a checkout , but folks shouldn’t just copy and paste that in to their store. There’s many changes that can be made to aid with autocomplete/autofill, and generally make the form easier to be completed by the user faster.

Autocomplete Form Details

Use the autocomplete attribute to assist the browser in auto-filling in the form (e.g. autocomplete="given-name").

Auto-detect and preselect country

There are 180 countries in the world and asking your user to select the one they are in is a pain - especially if they’re on a mobile device. Save them the bother by using a GeoIP service and preselecting their current country based on their IP address. Check my geoip-db-country-select GitHub repo for a example.

In the unlikely event that the user wants to select a different country they can change it. You should also add autocomplete="country-name" to the select.

Number keyboard for mobile

Tapping in the input for credit card field should ideally show the number input keyboard. Thankfully, there is a HTML5 pattern which we can use to do that for iPhone. Just add pattern="/d*". It’s important to note that making any additions to the pattern will prevent iOS from showing the number input by default, so you can’t use pattern="/d*{14,23}" for example.

For Chrome for Android users, use the recently added inputmode="numeric" attribute.

We do want to limit users to the maximum number of characters they can enter though, so add minlength="14" and maxlength="23" for the credit card number.

Checkout the finished demo at GitHub

Further Reading

Help users checkout faster with Autofill

Updated 05/05/2018: Update to Bootstrap v4.1: