Phone number Entry question

Question

We are using 4 fields for phone number entry. We are supposed to support international phone numbers. Country_code1, Area_code1, Main_Phone, Extension1

We default and hide the country code field when the selected country is US. We also have an area code field, a phone number field and an extension field.

We remove any '-' from the phone number field before it is sent to our server so the phone number is formatted like this when it gets to our server:

cc-ac-number-ext , i.e. 1-800-9059912- (blank extension)

Should look like this in our DB:

Country_code1, Area_code1, Main_Phone,  Extension1
     1            800       9059912

Now, the issue is that a LOT of people are entering the first three digits of their US phone number in the phone number field and apparently tabbing into the extension field and entering the last 4 of their phone number there.

This cause the phone number to be entered into our DB like this:

Country_code1, Area_code1, Main_Phone,  Extension1
     1            800       905           9912

How would I fix the validation of these in order to also support international phone numbers?

Screenshot of layouts:

This is how we do it on another one of our sites:

SO I guess reorganizing the outputs may help somewhat. But client-side validation is still going to be problematic. We currently only test to make sure the number field is populated.

Here is the new planned layout vs. the current layout:

Answer 1

I would give your user clear visual cues about what belongs in each field:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The advantage is that it follows the pattern they are accustomed to but doesn't take up much more space than the current implementation.

Having the last box explicitly labeled as an extension should clear up any ambiguity as to what should be entered there.

Answer 2

Remove static Extension field. Make checkbox 'Ext.' instead and display your Extension field when it's checked.

Answer 3

Why do you need all those numbers separated? I can understand you may need the country code, but does it really make a difference to know which digits make up the area code and which ones make up the local number? What about people who have only a mobile number and don't have an area code, what should they write there? How will you deal with your already-gathered data when area codes change (e.g. cities grow and what was once part of the area code becomes part of the number)? I am speaking from experience here - my city's area code changed 3 times in the last 20 years.

I would rather ask the user to write their number in freeform, including the country code. Then I would parse the input to separate it into those fields. Parsing is not difficult: Country codes are public information, so you can find the longest matching code from the left of the entered number and separate the input at that point. You will be left with area code + number. Knowing which is the area code and which is the number will only help you if you have the infrastructure to call the user from a local phone. If you don't, there's no point in separating them. If you do, then you will know the area codes for that country already, hence you will be able to parse them just like with the country code.

Answer 4

As you had given the explanation here, the same you can specify besides the phone number fields so that the user can just have a look and then they can enter the number properly. This is from UX perspective.

From development perspective what you can do is just tell the users to enter the number without spaces/dashes and then the dashes will be added automatically after the fixed number of digits. (As Microsoft used to do it while entering the Product key in case of Windows Vista/7/8.)

Hope this may help you to get more ideas.