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

Question

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 1

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:

Answer 2

I think the best solution is to provide in line instructions and as you type validation. Mark the field set as contact info and indicate it is required. As the user type in any field in the frame set render a tick or somesuch that declares 'either or both' is fine.

I've just changed the in line validation to make it even more obvious of the either or choice

Answer 3

I'd say keep it simple:

This is the most straight-forward, least friction way. It requires no extra steps (checkboxes, drop-downs), and it's easy to implement content-aware validation.

In case getting both would be useful, @Inca's answer is well suited.

Answer 4

As a starting point, please DON'T do what one form did to me recently, which is not mark either as mandatory, and then tell me to fill in one or the other when I try to submit the form. Aaargh.

One possibility would be to have a single box, with a title of "please enter either email or phone number", and validate the type of data that is entered. I can see that this would work in some situations, but the text and processing would have to be done very carefully, to make sure it works right. In this case, I think it would be a wrong approach.

I think the best approach would be to have a "contact details" section, and include text something like "please enter some contact details - phone number and/or email address". If you have a lot of screen space, then you can indicate this graphically, like colmcq indicates, but this does take up space.

Answer 5

What do you think of accentuating that the user has a choice to make with checkboxes? Here's what the initial state might look like:

Note that the checkbox that is most likely to be used would be on top, and selected. Can't say I've tried this before, but I like that it makes the user's choices more tangible.

Answer 6

The solution was right before our eyes. Stackexchange login form.

Answer 7

I'd suggest

preferred contact:     [e-mail or phone] *(required)
alternative contact:   [e-mail or phone] (optional)

(And just use a text input - it is easy to distinguish an email address from a phonenumber by code, so you don't need the user to make a choice or offer separate fields.

Answer 8

Assuming that it's a definite either/or situation you could disable the one they don't enter data into. You'd need to re-enable both if they clear the data out of course.

However, in this case that might not be advisable as people may want to enter both.

The only other alternative is to only enable the "Next"/"Submit" button when one of the fields is filled in. This would ensure that they enter something into at least one of the boxes but doesn't prevent them from entering data for both.

Answer 9

When I need to be super explicit, I have also used the radio buttons in the past, make the field 'preferred form of contact' a required field, and then have a radio button for phone OR email, where the phoen doesn't validate with the supporting field to one or the other being filled in.

Answer 10

Preferred contact method [dropdown: email||phone]

Email: [text input]

Phone: [text input]

And just require the "preferred..." dropdown and the associated field. I think from a data consistency standpoint you'd have to keep them separate fields in the database.

Answer 11

This is my approach, maybe a big OR between the 2 options explains better the situation.