Phone Number Fields That Reject Real Numbers

The number the form will not take

A visitor fills in your contact form and types their phone number the way they always write it: (604) 555-0134. The form answers in red: please enter a valid phone number.

They take out the brackets. Still invalid. They try dashes, then no spaces at all, and the form gives no clue which part it objects to.

Some get it right on the fourth attempt. Some leave.

The business never hears about either, because a form that refuses to send leaves no record.

Where the strict formats come from

• A plugin setting that expects the American format and nothing else.
• A digits-only rule copied from an old tutorial.
• An input mask that types the brackets and dashes for you.
• A ten-character limit that cuts off anything longer.
• A rule against a leading 1, or against a plus sign.
• A number field meant for quantities, not phone numbers.

The fourth fails quietly. A number filled in by the browser or pasted from elsewhere is cut to fit, and unless the visitor looks closely, what arrives is missing its last digits.

How people actually write a phone number

There is no single way. Brackets around the area code, dashes, dots, spaces, all ten digits run together, a 1 in front for long distance.

Business callers add an extension. Visitors from outside North America start with a plus sign and a country code, and their numbers have a different number of digits.

Each of those is a real number that rings a real phone. A form that rejects any of them is turning away a customer who did nothing wrong.

Masks, autofill and pasted numbers

Input masks, the faint (___) ___-____ pattern that fills in as you type, look helpful and cause their own trouble.

A browser filling in a saved number can include the country code, and a mask built for ten digits can push every digit one place along.

Numbers pasted from a contact or an email signature arrive with spaces and words the mask cannot place.

The visitor sees a scrambled number and has to delete it and type it again, slowly, on a phone keyboard.

A worked example

A wine tour company runs small-group van tours to wineries in a valley a few hours from the city, collecting guests from their hotels in the morning.

Its booking form required a phone number in one format, ten digits with dashes, because the driver calls guests on the day of the tour.

Guests from Britain, Germany and Australia could not enter their mobile numbers at all. Americans who typed a 1 first were rejected too, and the error said only that the number was invalid.

The company noticed when guests began emailing to ask why the form would not take their number. How many gave up without emailing, nobody could say.

The form now accepts any mix of digits, spaces and symbols, checks only that there are enough digits for a real number, asks visitors from abroad for their country code, and shows the number back on the confirmation page.

Accept first, tidy afterwards

The fix is to let people type whatever they normally type, and sort it out once the form has been sent.

Accept digits, spaces, brackets, dashes, dots, a plus sign and the letters people use for an extension. Check only that there are enough digits to make a real phone number.

If your booking system or reminder service needs one format, convert the number after the form is submitted. That is a job for the website, not the visitor.

Keep the number as the visitor typed it as well, in case the conversion mangles an unusual one.

Extensions and numbers from abroad

An extension can go in the same field, written as ext or x, or in a small optional field beside it. Either works, provided the form accepts it.

For a business with visitors from abroad, add one line under the field: include your country code if you are outside Canada and the US.

A country selector with flags is rarely needed. People know their own number better than any list of countries does.

On a phone keypad

On a phone, the number is typed on a touch keyboard, so the type of field matters.

A field set up as a telephone field brings up the phone keypad on most phones, with large keys and the plus sign within reach.

A field set up as a number, which is meant for quantities, can bring up a different keyboard and may refuse spaces.

It is one setting in the form. Left as plain text it still works, but the visitor gets the full keyboard and has to switch to numbers.

When the number really is wrong

Sometimes a visitor does type something unusable: six digits, or an email address in the wrong box.

Say exactly what is wrong in words beside the field, give an example of a number that works, and keep everything else they typed.

A message that says invalid and empties the form loses people who were happy to correct one thing.

Whether to require it at all

Many forms make the phone number compulsory out of habit. If you would reply by email anyway, make it optional.

If you do need it, say why next to the field: so the driver can reach you on the morning of the tour, or so the technician can call before arriving.

People give a number more readily when they know what it is for.

The counter-case

Some checks earn their place. A business that sends text reminders needs a mobile number it can actually use, and a gentle prompt when the digits look too few is reasonable.

A local trade that only ever serves its own area code can live with a simpler rule, provided it still accepts spaces, brackets and a leading 1.

The principle holds either way: accept numbers the way people write them, and do any tidying after the form is sent.

Type it every way

1. Type your number with brackets and a space.
2. Try it with dots, then with a leading 1.
3. Add an extension and submit.
4. Enter a British number with its country code.
5. Let your phone fill in the field.
6. Check what arrived in the email.
7. Read the error message out loud.

Step six is the one most tests skip. A form can appear to accept a number and still deliver it cut short, and only the email that arrives shows it.

The same kind of check applies to addresses, as in checkout forms that reject Canadian postal codes.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.