How could I best indicate the required format for a phone number (country + area code)

Question

I'm designing a registration page for a portal which which will be used all over Europe. Users have to provide their phone number.

A user can select their country / country code via a drop list, and enter their phone number in a text field.

My question is how to best indicate the format I want the user to enter for the number - area code respectively without the (0).

+<country> [(0)]<area>

Alternative 1: Add a text field label which shows an example (Please use the following format: (030) 123456789)

Alternative 2: Prefill the text field with a zero.

Answer 1

Don't bother. Instead of trying to coax the user to get it right, just clean up. For robustness, do so both in Javascript (so the user can see your auto-correction) and in the backend (for users with JS turned off)

Answer 2

I'd go with option 2, out of the options presented. I don't like the first example because people generally don't understand other country formats so that may not add any more clarity for many users.

As a third option, have you considered simply not bothering the user with formatting and calculating it server side? We know that all euro numbers begin with a 0 unless using the country code when it is replaced with +CC, so we know that we can truncate the 0 if the user has typed it.

Potential downfall - people are so used to being told which format to use they might not understand that either is OK.

Potential option 4

Combine your first and second idea and refine it slightly by adding in a full example phone number which matches the format of the country selected from the list. This way you get an example the user is familiar with. Example:

---

EDIT:

Why does the drop down need to say (+44) etc? Maybe if that bit was removed people would just type their numbers as normal and there'd be no confusion

Answer 3

the best ux is when you take the time to find out the conventions (both landline and mobile) for each country number format. This includes the correct grouping and number of digits etc. Thus when a user selects their country, the correct looking text entry boxes come up. The country code gets displayed just in front of the entry boxes and is disabled. Area code entry box is surrounded by round brackets by convention. The separate entry boxes for each grouping of digits has a faint outline, so it looks like a continuous entry of the full number in a subtle way. All this effort affords users to enter their number naturally without having to study instructions on a form.

Answer 4

I can't remember any one time that someone has gotten this right. They just expect you to know the format to input. This really sucks when someone's new to a country and not really well versed on how phone numbers in a country look like.

Now, I sort of agree with @MSalters' answer, you should use JavaScript to clean up the input. But, I find that forms that aren't clear about the correct phone number format are mentally jarring. This makes finishing the form even more of a chore than it already is.

So please, don't disregard the design portion of this input field. The easier your form is to understand the quicker users will finish it. Which, I'm guessing, is what you want, no?

Oh and Alternative 1 is the best option for me. You could also make it so that the suggestion is inside the field (using placeholder attribute)