Customers at times make mistakes when typing data into forms. They might omit a digit or two, mistakenly type a letter into the credit card number field, reverse the day and month values of a date, or type a phone number without the area code among many other numerous mistakes.

Using input masks reduces the errors made on extremely important restricted fields: phone number, credit card number, credit card expiration, and the date. 

 

Error reduction

Input masks reduce the number of validation errors, which can reduce site abandonments. Instead of waiting for a customer to fill in an entire form before receiving a validation error, input masks catch mistakes as they happen and allow a customer to correct them there and then.

 

Account for regional differences in formatting

You should also consider regional differences in format. For example, the date format in the US is MM/DD/YY, in Europe it’s DD/MM/YY, and in Canada and Japan it’s YYYY/MM/DD.

Phone number formatting should also be considered from country to country due to the variation in the number of digits, area code length, and the inclusion or exclusion of country codes.

 

Few stores use input masks

According to Baymard, 54% of sites don’t use input masks (or don’t use them correctly) to help shoppers enter their data in restricted inputs. And in the testing they did, 89% didn’t follow formatting examples for restricted fields.

 

Credit card number

For more information on the formatting of the credit card number specifically, please refer to best practice #119.

Examples