How to tell a client in a form that they can enter their email OR their tel # (but both are not necessary)?

In a contact form, I need either their number or email. I've thought of these ways:

• Have field label be "Email or Tel #", or "Email / Tel #"


• Have the above, but placeholder text in the input saying "Either one is fine"



• Have the label be "Contact me by" and then have a dynamic message appear (Twitter style) when the field is put in focus


• Have a select box saying with label "Contact me by" and options "Phone", "Email". When one is selected, an input element below it will be revealed -- respectively Phone and Email

Which, if any, would you consider user-friendly if you were visiting a site?

Answer

Generally speaking, web forms don't offer either / or workflows. And the only obvious way to signify that a form has an either / or branch is through extraneous text that users don't read anyway.

As such, I'd suggest you have a single text field which smartly validates, automatically detecting the type of data entered. This is quite possible in javascript, for example. Consider the following:

In this case, I've added helptext to indicate the formats that are acceptable. This is important, else a user, expecting to give just one particular kind of data, would be rather puzzled.

Alternatively, if your GUI implementation doesn't offer this sort of smart validation, might I suggest a multi-part single line field, like the following: