The phone number input field

Feedback & Problem Solving
, ,
#1

Hi there,

I’ve been thinking about the phone number input fields on websites. Currently, I’m designing an apply flow for a job site. In this flow, we ask for a phone number. It’s all about the prefix, the land code. Therefore we have some ideas:

  1. Show a flag representing the country (not everybody has a phone number of the country they live in)
  2. Show the land code (not everybody knows their land code)
  3. Showing both the flag and land code (but it’s more information to consume)
  4. Show flag, land name and land code in the drop down but represent this after selecting with a flag. (If we prefill this, to make it easy, people might think it represents the country and not the land code. This might get some confusion for the users)

Does any of you have experience with this? What is your solution or do you maybe have a place where I can find more information about this.

#2

At my last role for an international bank, the phone number component looked like this -
Dropdown (Flag | country dial code prefix) input (enter number)
This combo of flag with dial code tested well with users

Always if you’re not sure, test with your users

1 Like
#3

Usual scenario: Select flag which auto completes (fills) the country code input section and then move onto the input field to type in the rest of the number.
This is what I’ve had experience with in most forms :slight_smile:

1 Like
#4

This might help

#5

Thanks for the input! We’ll test it when the website is live.

I see, cool thanks for the answer. Also thanks for adding the link to more information about phone input fields. This was just what I needed!