Phone number fields, along with birthdate fields, are tricky to get right. There are many phone number formats users can choose from and they’re often unsure which format is valid. Sometimes they’re even unsure if they should include their country code.
When users are unsure about the proper format, they worry that the form won’t validate their input. A validation error for the wrong phone number format can cause them to abandon the form.
Your users should not wonder which phone number format is valid or get a validation error for the wrong phone number format. If they do, your phone number field has a poor user experience and needs to be redesigned. Avoid the bad practices and follow the best practice if you want to improve your phone number field.
Allowing Any Format
Some think that allowing a phone number in any format is the answer. This would prevent validation errors, but it doesn’t curb user’s uncertainty about which format they should use.
Any uncertainty the user has can decrease your form conversion rate. Users need to be certain about their phone number format otherwise they’re going to worry their input won’t validate.
It’s also not clear to users whether they need to include their country code before their phone number. Users may make the mistake of typing in their country code when it’s not required, resulting in an incorrect phone number.
Showing the Proper Format
Some believe that showing the proper format with an example by the text field will solve the format uncertainty. The user will just look at the example and type their phone number in the proper format.
Turns out that users notice the example, but most of them don’t follow it. A research study found that “89% of test subjects entered their phone number in a different format than the example provided.“
Providing a formatted example isn’t helpful since most users ignore it. Not only that, but they lead to validation errors when the user’s input isn’t in the proper format. The study found that format validation errors resulted in form abandonment.
Separate Text Fields for Each Number String
Some say splitting each phone number string into separate text fields solves the formatting troubles. For an American number, you would have three text fields. This practice does make the formatting proper and consistent, but only for American users.
Users from other countries would not be able to type their input because their phone numbers have different formats and lengths. Creating text fields localized to one country isn’t user-friendly to international users.
Separate text fields also make it difficult for mobile users to type in their input. Usability testing found that many users had a “difficult time navigating between the fields on mobile devices.” This also makes it harder for them to correct their input if they mistype it.
Auto-Formatting with Geolocation and Input Masking
The best practice is one where users don’t even have to think about phone number formatting or country code because it automatically displays it for them.
Auto-formatting the input with geolocation and input masking is the best way to present phone number fields. As users type their phone number, the proper format is displayed without any effort from the user.
Users don’t need to type any parenthesis, dashes, slashes, periods, or spaces, just numbers. The field has a numbers only constraint to prevent validation errors if they type other characters.
Geolocating the user’s country allows you to auto-format the phone number of every user no matter where they’re from. This also tells you what their country code is without having them type it in. This means less work for the user and a better conversion rate for you.
The country code should be displayed alongside the phone number so users know they don’t need to type it in. The most intuitive way to do this is to display an icon of the user’s country flag inside the text field next to their input.
It’s possible to allow users to change their country code if they want to enter an international phone number. Clicking the flag icon would display a dropdown menu with other country codes.
Don’t Make Users Think
When users fill out forms they don’t want to think. They want to type away and complete the form as quickly as possible. Allowing users to enter their phone number in any format forces cognitive work on them. Instead, take the load off users by auto-formatting their input for them.
Making this change to your phone number field can prevent form abandonment and increase your conversion rate. Follow the best practice on phone number fields and stop making your users think.