1

I'm really struggling with a phone input field for a form similar to an emergency contact form. International numbers are unlikely but possible inputs.

Due to timelines and system limitations, we can't provide a list of countries with their country codes. However, we can provide two country options, "Canada/USA" and "Other".

  • If the user selects "Canada/USA", the country code will default to "+1".
  • If the user selects "Other", they must enter the country code themselves.

I've been playing around with a few variations but none of them seem to be especially effective and I feel like I'm overthinking this whole thing. I've been mining other phone number threads and found a few tips, but would love some specific advice or insights on this problem. Thank you in advance for any answers.

Option A. Provide country toggle, separate country code and number. Provide CA/US & Other toggle, separate country code and number.

Option B. Provide country toggle, put country code and number together, separate country code with parentheses. Provide country toggle, put country code and number together, separate country code with parentheses.

Option C. Provide country toggle, put country code and number together, provide only a plus sign (+). Provide country toggle, put country code and number together, provide only a plus sign (+).

Option D. Remove country toggle, separate country code and number, default country code to +1. enter image description here

Option E. Remove country toggle, put country code and number together, default country code to +1. Remove country toggle, put country code and number together, default country code to +1.

2
  • Out of curiosity, why is this a timeline / system limitation? It's just a dropdown and users will need to fill it anyway. I'm not sure why you see this as an issue, but I can see some serious issues in terms of usability and by leaving this as free text you'll need to do a lot more work than just adding a dropdown or you'll end with random inputs
    – Devin
    Sep 10 at 0:03
  • @Devin Good points, we actually have a phone number w/ default country codes on another part of our site, but it ran into a lot of testing/implementation issues when it was under development back then and management can't push the deadline for this project, so I believe that's why it wasn't in scope. The project manager doesn't like extensive dropdowns as well, but I can definitely try bringing it up again since this current direction has a lot of pitfalls that might be worse.
    – bluefable
    Sep 10 at 3:33
2

According to the North American Numbering Plan the official format for the US is NPA-NXX-XXXX (NPA = Area code, NXX-XXXX = Subscriber number). However, in Canada sometimes the country code is required for dialing. As a result it's safe to add the country code automatically to numbers in North America. It's important to make sure users understand that this happens automatically.

The conventions can be very different for other countries. That being said, I could imagine the following approach:

enter image description here

Option F – For CN/US a fixed country code, no need to enter manually but to explicitly display so it's clear that it is already considered. When swichtign to International, show country code as format hint and keep a long field, given the large variety of formats internationally.

Since the US phone number format is so commonly known it could work well without explanation, while other formats might benefit from more context.

1
  • 1
    Interesting to see someone downvoting but not leaving a comment to understand what they see differently. Missed learning opportunity for everyone :-( Sep 10 at 9:19
0

Interesting problem. Option A you have above makes it very clear except that I've seen many people getting confused with the toggle buttons to understand what is selected. They do get it eventually but just causes that moment of friction. So maybe having a traditional radio button or dropdown. Also something to consider would be to have a ready link that points to country codes if the user selects the "other" option. People don't remember these formats and a ready reckoner of some sorts would be useful.

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.