Web Interface  |  Inputs

Phone

This section is about how to properly create a phone number input, including international formatting.

01Phone format

It causes problems when a strict format is required in the phone number input. The user should be able to enter his number the way he is used to writing it down. If he is used to separating characters with spaces — that's fine. If he is used to putting hyphens — that's fine.

Raises doubts.
It's familiar and clear.

The computer must do its job and be able to recognize phone numbers with spaces, with hyphens, with brackets, with a country code, and without a country code. And be able to determine, regardless of the format, the correctness of the data entered.

Don't make the user struggle with input errors. He will just leave and won't continue filling out the form.

02Country code

Sometimes it is important to get a phone number in international format with a country code. Especially when you need it for two-factor authorization or for sensitive financial transactions. In this case, the free input format may not work, as there is a chance that the user will enter the number in a format other than international.

The straightforward solution is to split the input field into two fields: one with a country code and one with a phone number without a code. This is a bad solution. We might get the country code right, but the second part can have the wrong data. People will just put in this second field a phone number as they have it with or without a code.

It's not good to separate the phone input into the country code and the number itself.
It is good to give a placeholder with expected data and keep a single field with free number entry.

It's a good idea to give a placeholder with expected data. If we expect a phone number in international format, a hint with a plus sign and an automatically detected country code will obviously help with correct entry. The user can type the rest of the number however he wants: with spaces, with hyphens, with brackets etc.