The HTML phone number input, explained.

The basic phone input

<label for="phone">Phone</label>
<input id="phone" type="tel" name="phone" autocomplete="tel" />

• type="tel" is the input type for telephone numbers. Phones show a dial pad instead of the full keyboard.
• autocomplete="tel" lets the browser offer the visitor’s saved number, including the country code. Use tel-national if you want it without the country code.
• name is the key the number is sent under. Without a name the field is not sent.
• A visible label linked with for and id says what the field is for, and whether it is optional.

The browser does not check phone numbers

Phone numbers are written differently around the world, with or without country codes, spaces, brackets and dashes. So type="tel" accepts any text: letters included. The only checks are the ones you add: required, minlength, maxlength and pattern.

That is usually the right default for a contact form. A strict format turns away real numbers written in a way you did not expect, and a person reading the message can call “0491 570 156” or “+44 20 7946 0000” just as easily.

Why not type="number"?

A phone number is not a quantity. A number input refuses the +, spaces and dashes people use when they write a phone number, shows up and down arrows, and on some browsers changes the value when the visitor scrolls over it. Keep type="number" for amounts; see the HTML number input.

Check the format with pattern

If you want to stop obvious mistakes without turning away foreign numbers, a loose pattern works well. This one allows an optional +, then 6 to 20 digits, spaces, dashes, dots and brackets, so “(555) 555-0123” and “+44 20 7946 0000” both pass but “call me” does not. The title text is added to the browser’s message when the value does not match.

<label for="phone">Phone</label>
<input id="phone" type="tel" name="phone" autocomplete="tel"
       pattern="\+?[0-9 \-\(\)\.]{6,20}"
       title="A phone number, with an optional + and country code" />

If every caller is in one country, you can require that country’s format. Show the format in visible text as well, because a placeholder disappears as soon as someone starts typing:

<label for="us-phone">Phone (US)</label>
<input id="us-phone" type="tel" name="phone" autocomplete="tel-national"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="555-555-0123"
       aria-describedby="us-phone-hint" />
<p id="us-phone-hint">Format: 555-555-0123</p>

The pattern must match the whole value. Current browsers read it as a strict regular expression, so characters such as (, ) and - inside square brackets need a backslash.

International numbers

The simplest approach is to ask for the number with its country code, and say so in the label or a hint: “Phone, with country code”. The browser’s autofill already includes the code when it has one.

If you need numbers in one consistent format, for example to send text messages, a country picker beside the field helps. Libraries such as intl-tel-input add one with flags and formatting, at the cost of extra JavaScript on the page.

Clean up and check the number in JavaScript

To store or dial the number, strip everything except digits and a leading +. To use your own wording when a pattern fails, set it with setCustomValidity and clear it again once the value matches.

const phone = document.querySelector('#phone');

// Keep only what a dialler needs: a leading + and digits
const digits = phone.value.replace(/[^\d+]/g, '');

phone.addEventListener('input', () => {
  if (phone.validity.patternMismatch) {
    phone.setCustomValidity('Enter a phone number, with an optional + and country code.');
  } else {
    phone.setCustomValidity('');
  }
});

A click-to-call link

To let visitors call you, use a link with the tel: scheme. Write the number in the link with its country code and no spaces; the visible text can be formatted however you like. On a phone, tapping it opens the dialler.

<a href="tel:+15555550123">+1 555 555 0123</a>

A form that sends

This contact form posts to Heartdove, which saves every message, emails you an alert and tracks it until it is delivered or bounces. The number arrives as its own labelled field, “Phone”, in your inbox and in the alert, exactly as the visitor typed it. Leave the phone field optional unless you really need it: every required field is a reason for someone not to send.

<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label for="name">Name</label>
  <input id="name" type="text" name="name" autocomplete="name" required />

  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required />

  <label for="phone">Phone (optional)</label>
  <input id="phone" type="tel" name="phone" autocomplete="tel" />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Send message</button>
</form>

Replace YOUR_ACCESS_KEY with your key from a free Heartdove form. The contact form generator can add a phone field for you.

Questions

Keep reading

• The HTML email input
• The HTML number input
• HTML form validation
• All HTML input types