Phone number input with country code

Question

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.

Option B. 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 (+).

Option D. Remove country toggle, separate country code and number, default country code to +1.

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

Answer 1

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:

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.

Answer 2

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.