Tel field

A Tel field takes a phone number. Phones open the number keypad for it. With a Mask, the number formats itself as visitors type, such as +1 (555) 012-3456.

<label>Phone
  [[your_phone]]
</label>

Settings

The same as the Text field: placeholder, default value, fill from, min and max length, autocomplete and required. With a mask, Min length and Max length go away, since the mask sets the length. Set Autocomplete to tel and browsers offer the visitor’s own number. On top of those:

Setting	What it does
Mask	None, one country’s format, My own, or Visitors pick the country
Your mask	With My own: each # is a digit, the rest is written as it is. Digits before the first # are the country code, such as +1 (###) ###-####.
Only these countries	With Visitors pick the country: type a country’s name and pick it; each one picked shows as a chip you can remove. The list shows them in the order you pick them, such as us, ca, gb, in the order the list shows them. Empty: every country, by name.
Leave out	With Visitors pick the country: countries taken off the list, picked the same way, such as ru, by. Use it alone to offer every country but these.
Picked first	With Visitors pick the country: the country the list starts on. Empty: the first in the list.
Flags	With Visitors pick the country: the picked country’s flag at the start of the field, on by default. Off: its letters, such as US. Windows shows the letters either way.

Masks

Pick a country, such as United States +1 (###) ###-####, and the number formats itself as visitors type. The country code is already there, so they type only their own number. The form sends only a complete number; a short one gets the Phone number isn’t valid message. Without a placeholder of your own, the field shows the mask, such as +1 (___) ___-____.

When visitors click into the empty field, the country code is already there, such as +7 (, so they type only their own number. If they type the code anyway, with or without its +, it isn’t written twice: +7 (+7 812 becomes +7 (812. A leading 0, as in 07700 900123 in the UK, or 8 in Russia, is dropped too. A field left with only its code counts as empty.

Visitors pick the country puts the country’s flag and a small arrow inside the field, at its start, such as 🇺🇸 ▾ +1 (555) 012-3456. Clicking the flag opens the list of countries with their codes, such as United States +1. Picking another country changes the flag and the code, and keeps the digits typed, written in the new country’s format. The field keeps your theme’s look; Re:Maily only makes room for the flag. The number is saved with its code, so the mail shows +1 (555) 012-3456.

The server checks and formats the number too, so masks work with JavaScript off: visitors type the digits, and the number is saved in its mask’s format. Re:Maily comes with about 70 countries. Developers can add, change or remove countries everywhere with remaily_countries. For a country with numbers of different lengths, write your own mask.

For developers

remaily_countries changes the list every form uses: a country’s name, dial code, mask or trunk prefix (the 0 visitors may type first).

add_filter( 'remaily_countries', function ( $countries ) {
    $countries['is']         = [ 'name' => 'Iceland', 'dial' => '354', 'mask' => '### ####', 'trunk' => '' ];
    $countries['de']['mask'] = '#### #######';
    unset( $countries['ru'] );

    return $countries;
} );

remaily_tel_masks changes the masks of one field. It gets the masks, the first one tried first, and the field’s settings:

add_filter( 'remaily_tel_masks', function ( $masks, $field ) {
    if ( 'office_phone' === $field['name'] ) {
        $masks = [ 'de' => [ 'mask' => '+49 (####) ######', 'trunk' => '0' ] ] + $masks;
    }

    return $masks;
}, 10, 2 );

In the mail

[your_phone] prints the number, written in its mask’s format when the field has one.

Message

Message	Default text
Phone number isn’t valid	Please enter a valid phone number.

Change it for one form in its Messages tab, or for every form in Settings → Messages.