forms - Dealing with Area Codes in Phone Number fields

Ok so I know a similar(ish) question has been asked before re: friendly format for Phone Numbers.

My question however focuses on a more specific part of this question, namely the 'dropped' first zero issue in the city code.

I am looking at redesigning a web form where the user currently enters his/her phone and am attempting to make the whole city/local code issues less ambiguous.

I have included some samples in the attached image.

Option A is as the form currently stands. In this case the user (assuming from London) could enter a many variants on the city code. I know I sometimes stop and think when I get to this point in at a form 'What is the most appropriate format'?

do I enter the zero or not, so I enter plus sign, brackets, hyphens or any other characters etc..

Option B - has a note underneath the field which displays to the user the preferred format to enter.

Option C pre-empts the city code and enters the initial 0 for the user, so 207 could be entered here.

Option D - a dynamic drop down who's contents change depending on the option the user chooses in the first(country) drop down.

What do you guys think about this? There is an element of guidance/information I like about option C although maybe it is still a little ambiguous in it's own way. Option D I feel simply may not be doable for various reasons.

Or if anyone knows of anyone has any other ideas or knows of any existing patterns that handle this issue well, I would be interested to discuss them here.

Answer

There was some great research done by Jessica Enders on this subject in late 2009 (focusing on Australian phone numbers). Her research showed that users generally enter phone numbers as one long string of digits

Like the mobile phone numbers, one long string of digits—including area code—was the most common method of data entry: out of 640 landline phone numbers provided by interested research participants, 39% were entered as one long string of 10 digits (i.e. no spaces and no chunking).

But, importantly given your question, many users don't enter their area code, even when explicitly prompted:

Interestingly, in another 11% of cases, the 8 digits of the main part of the landline number were given, unbroken, but also without the area code, despite it being explicitly requested via a caption next to the field. If we had had validation on the field, this means that over 10% of users would have experienced a validation failure.

With that research incorporated, option B seems like the closest fit, especially since you provide an example of how to fill in your phone number. One additional benefit is that you're able to use the HTML5 input type=tel field type to allow user agents to provide input help (especially on mobile devices).

Expect users to enter hyphens, spaces, asterisks, hashes/pound keys and parentheses (at least) if you're supporting regional and international variations. Ideally your implementation should permit any combination of punctuation for input (stripping out punctuation for validation). The ideal being that if someone thinks of their phone number as a continuous value, they're equally supported as someone who thinks of their phone number in pairs of digits.