Among the many different input fields that users have to interact with, the phone number filer is one of the trickiest fields to get right. A lot of different phone number formats and, as a result, the hard process of data validation for input.
In this article, I want to share three simple tips on how to make phone number input more efficient.
From first glance, splitting the field into a few fields will solve the problem of formatting - the user will have a natural constraint that will prevent them from adding an incorrect number. However, this design decision will introduce a few serious problems:
The country code should be displayed alongside the phone number. Based on the selected country, in many cases, you can set the input masking and validation rules.
Here are two things to remember:
Set a sensible default for the country. Prefill country code based on user geolocation data.
Allow users to modify country code when necessary. The country selector should look like an interactive element - the user should know that they can change it.
You can use the International Telephone Input jQuery library for the country selector.
It's hard to validate the phone number when you see it without dashes.
Good form fields use the input structure as an affordance to indicate the required format for the expected value. It's particularly helpful for fields like phone numbers because they have defined character count. That's why as a user types her phone number, it should be auto-formated to proper number without any effort from the user side - the user shouldn't need to type dashes.
Field masking is a technique that helps users format inputted text. Many designers confuse field masking with placeholder text - they are not the same thing. Unlike placeholders, which are basically static text, masks automatically format the data provided by the user. In the example below, the parentheses, spaces and dashes appear on the screen automatically as a phone number is entered.