Improving the Bootstrap checkout example UX
Contents
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:
