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.

enter image description here


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:

example UK number


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

| improve this answer | |
  • 1
    Really good point about the (+44) part. I think it just complicate matters. +1 – ALH Aug 9 '12 at 15:12
  • If I were to enter a phone number, and there was no (+44) prefix show, I might very well enter it myself. – MSalters Aug 10 '12 at 8:04
  • Good point - no reason the server side processing can't detect this too. UX-wise that would be ideal – TJH Aug 10 '12 at 8:08

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)

| improve this answer | |
  • I'd suggest that the JavaScript "Autocorrection" should not "reformat" the number. The user knows best how it's traditionally written! Instead, check in the background that the number 1) has a country code, 2) has the right number of digits for that country. Disregard non-numeric characters except +. Ask the user only if something is wrong/missing. Before asking the user, correct everything you can, so you don't need to ask again and again. E.g. where the country code is missing, guess it by IP and ask the user to confirm. – Erion Aug 11 '12 at 9:08

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.