Let's say you want to combine both email and phone input into a single text field because you require either or, not both. What's the best way would you approach this? As far as making it clear without a shadow of a doubt the user can enter an email address or a phone number. Also, how would you deal with international phone numbers? Ask the user to enter their country code first?

UPDATE: Please think about this with and without JavaScript being present. Don't get so hung up on validations. Let's convey to the user what we're doing first.

  • 3
    I had a similar question - maybe answers there can help? ux.stackexchange.com/questions/28921/… Nov 20, 2012 at 14:01
  • As far as handling international numbers, take a look at code.google.com/p/libphonenumber
    – mawcsco
    Nov 20, 2012 at 16:18
  • Thanks @mawcsco! I know about google's libphonenumber library, however I was asking from UX point of view. Do I display the +C (country code) in front of the text_field in a drop down or let the user type it in?
    – Sai
    Nov 21, 2012 at 2:58
  • There are some considerations to be aware of with this, particularly with mobile. Separate fields can each use their appropriate input type (type=tel/type=email), which on mobile devices will show the most useful keyboard and even on desktop browsers can allow user agents to provide automatic field completion (e.g. from the user's address book). Rolling the two field types into one field removes that option (making it harder to enter the appropriate value on a mobile, especially phone numbers).
    – Kit Grose
    Nov 26, 2012 at 5:07

4 Answers 4


In my opinion, dynamic examples based on the first characters user have entered may help users to enter correct values (validation is still needed, thought):

dynamic examples

Examples will not only suggest the way phone number can be entered, but also limit ways of validating this numbers (since there may be a lot of different schemes, so choosing one or two depending on some prefix will limit the number of varians to check).

  • 1
    +1 innovative approach. shoulf be tested if users recognise the contextual hint
    – FrankL
    Nov 24, 2012 at 13:10
  • I like this as well. (I can't upvote yet!)
    – Sai
    Nov 25, 2012 at 7:07

Either/Or: The first thing is to convey to the user that you require either/or. You can do this with a radio button or a dropdown box. In addition, label this control with "Enter e-mail OR phone number:". Next to this control place the textbox that would hold the entered data, but change the hint watermark (italic and gray) according to the selection (i.e. "Enter phone number"/"Enter e-mail"). Users might misinterpret this logic (see my final remark), so you better show the mock-up or prototype to several by passers and ask them about their understanding of it.

International Phone: To enter the phone number, an effective manner is to provide a dropdown box to choose the country from. Show it only when the phone number option is selected. Make sure the new dropdown box is properly placed before the textbox of the phone number itself. Each value in the country dropdown list would be the country's name and its phone prefix.

Default Country: If you can detect the country of the user, make is the default. If you can't, then make the most common country the default (probably the US). Another little point is to tolerate the prefix zero in the box for the rest of the number (as people might forget to omit it).

Why either/or?: I'm just curious as what happens if the user inputs both? Is that bad? If you can tolerate this, than you might consider demanding at least one, and not exactly one. Less constraining in this case might be more user-friendly.


Thinking outloud...

I'd make it a simple text box with a simple label

Email OR Phone: [                       ]

I'd probably test that, if possible. But it doesn't seem terribly complicated to me.

As for validation, email is fairly easy. Check for an @ sign, and then validate it as email.

Phone numbers are more difficult and, ideally, I'd suggest you not validate it. Things like country codes and extensions can be complex.

That said, if validation of phone is somewhat critical, then I'd suggest what Dvir suggests and that's toggle a radio.

Email mode:

Please enter an Email address OR Phone number:

(*) Email    ( ) Phone

[                            ]

Phone mode:

Please enter an Email address OR Phone number:

( ) Email    (*) Phone

Country      Phone                 Extension
[USA    \/]  [                   ] [       ]

I'd suggest a pull down for country rather than entering country code only because (this is an assumption) I'm not sure people always know their country code unless they need to do a lot of international phone calling and receiving.

  • I like this approach. How would you display the country code drop down if you couldn't insert new elements into the UI/DOM or javascript were disabled?
    – Sai
    Nov 21, 2012 at 5:28
  • If JS isn't an option, then you'd have to show both. (These days, I think it's fair to expect JS to be required)
    – DA01
    Nov 21, 2012 at 6:18
  • I agree. But there's always this one guy who's adamant about enabling JavaScript. I don't want to alienate that guy. For him, I can present an ugly UI as long as I can convey what I want from him.
    – Sai
    Nov 21, 2012 at 6:26
  • You're not alienating him. He's alienating himself. ;)
    – DA01
    Nov 21, 2012 at 9:13
  • @Syed the trick is not to dynamically insert the phone fields, but rather to dynamically hide them, and then toggle them back to visible as necessary using JS. That means non-JS users see something like Email (radio button), email field, phone (radio button), phone fields, and on DOM ready the JS reformats it to hide the extraneous fields dynamically.
    – Kit Grose
    Nov 26, 2012 at 5:04


You're noticing (correctly) that this is a big problem because phone numbers and emails each have their own validation that you need to do -- combining these in the same field will give you no small headache.

I would ask for the email address regardless, but if you have to make them choose, What I would do is have them specify whether they want to give you their "Phone Number" vs. "Email" (Dropdown / toggle / radio buttons would all work -- dropdown is cleanest, IMHO), then show the corresponding field to what they selected (and hide the one they didn't pick).

As far as validating phone numbers go, you can specify a field is a phone number, but none of the browsers validate the information given here yet -- so you're still on your own. But better to handle that nightmare on its own rather than combine it with an email field, yes?

  • 2
    Your answer suggests there are technical problems with combining the field, but not usability or user experience problems. What are your usability or user experience concerns with combining the fields? This is UX.se after all.
    – mawcsco
    Nov 20, 2012 at 16:15
  • The UX problem feeds from the technical problem -- Asking someone to give this OR that is confusing, and ironically when I first read the question I thought you were trying to ask for both at once. If it's confusing from a technical standpoint, then it's definitely confusing from the user's standpoint. I still recommend the solution I suggested above. Nov 20, 2012 at 21:11
  • 1
    I think you've mistaken me for the OP. And your reasoning is non-sequitur. Just because something is confusing from a technical standpoint does not mean that it would be confusing for a user. The whole point of UX is to make complicated and confusing technology easy to understand. I'm not arguing that the two fields should be combined, only that I think your answer lacks UX reasoning and support.
    – mawcsco
    Nov 20, 2012 at 21:33
  • Rachel, detecting whether the user entered a phone number or email address is fairly easy in my opinion. Conveying to the user they can enter either is not. I want to solve this first.
    – Sai
    Nov 21, 2012 at 3:03
  • Rachel, let me ask you this. Let's go with your approach. How would you solve tagging type="tel" or type="email" to the input based on a radio/drop down option when JavaScript is not enabled? This is problematic for mobile devices.
    – Sai
    Nov 21, 2012 at 3:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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