How would 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. The user has to provide his phone number.

The user can select his country / country code via a drop list and enter his phone number in a text field.

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

+ [(0)]

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

Alternative 2: Prefill the text field witha zero.

Answer 1

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 2

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 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.