JetFormBuilder Phone Field Number Keyboard: Force It on Mobile

Atif JanPublished on 30 August 2025Updated 20 October 2026

Smartphone showing a numeric dial pad next to a form phone input, illustrating the JetFormBuilder phone field number keyboard

How you get the number keyboard depends on which phone field your form uses. On JetFormBuilder 3.6.0 or later, use the dedicated Phone Field block, which adds a country selector, number validation and a clean E.164 save format. If your form still uses a Text Field with FIELD TYPE set to "Tel" plus an input mask, the mask is what brings up the letter keyboard: JetFormBuilder's mask library adds inputmode="text" to the input, and that overrides type="tel". For that field, add the short script below, which sets inputmode="tel" on the input.

Whichever option you use, check the result on a real phone. Tap the field and you should see the dial pad (digits plus + * #), not the letter keyboard.

Why the correct keyboard matters
Option 1: Use the Phone Field block (3.6.0+)
Option 2: Fix a Text Field set to "Tel"
Text Field "Tel" or Phone Field?
Force the phone keypad with JavaScript
Install and test the snippet
Common problems

Why the correct keyboard matters

Forms are hard to fill in on a phone. When someone types a phone number on the full letter keyboard, they have to switch to the number row, digits are small and typos are easy. The dial pad shows large digits and the + key, so people finish faster and make fewer mistakes. On a lead or booking form, that difference shows up directly in how many people complete it.

Option 1: Use the Phone Field block (3.6.0+)

JetFormBuilder 3.6.0 added a separate Phone Field block. Before that, the only built-in option was a Text Field with FIELD TYPE set to "Tel", which has few phone-specific settings. The vendor now recommends the Phone Field for phone numbers. The current version is 3.6.7. Several recent releases fix Phone Field bugs, and 3.6.5 to 3.6.6.1 include many security fixes, so update first. You can check the changelog on WordPress.org.

Set up the Phone Field

Open your form in the block editor and add the Phone Field block.
In the General tab, set FIELD LABEL and FORM FIELD NAME. If you are replacing an old field, reuse its name (see the note further down).
In the Field tab, set DEFAULT COUNTRY. The default, "auto", picks the country from the visitor's IP. If your audience is in one country, enter a two-letter ISO code such as US, GB or UA.
Use PREFERRED COUNTRIES to list a few countries at the top (comma-separated ISO codes, for example US,CA,GB). ONLY COUNTRIES limits the list to the codes you enter, and EXCLUDE COUNTRIES hides the ones you name.
Turn on Separate Dial Code if you want the country code shown apart from the number.
Set SAVE FORMAT to E.164, which is the recommended option. It stores the number as + country code + number with digits only, for example +380991234567. "International" stores a formatted number such as +1 201-555-3333 instead.
If you use "auto" country detection, open the Additional Settings tab. Either turn on Use Global ipinfo.io Token, which uses the token saved under WordPress Dashboard > JetFormBuilder > Settings > Ipinfo API, or paste a token into IPINFOIO API TOKEN for this field only.
In Validation Messages, write your own REQUIRED FIELD MESSAGE and INVALID PHONE MESSAGE.

Save the form and open it on a phone. Tap the number input. If you get the dial pad, you are done. If you still see letters, inspect the rendered input (details below) and use the snippet in this article on it.

For a custom flag and dial-code setup built before the Phone Field existed, see our older guides on adding a phone field with country flag and auto-detect and auto-detecting the country and dial code. On 3.6.0 and later, the built-in block covers most of that.

Option 2: Fix a Text Field set to "Tel"

Many existing forms use the Text Field block for phone numbers. Here is the usual setup, as described in the Text Field docs:

Select the Text Field and open the Field tab.
Set FIELD TYPE to Tel. The other options are Text, Email, Url and Password. With "Tel" selected, typing letters shows a validation notice.
Optionally turn on Set Input Mask. Set MASK TYPE to "Default" and enter an INPUT MASK. In a mask, 9 means a digit, a a letter and * either. The documented phone example is (999) 999-9999.
Choose MASK VISIBILITY (Always, Hover or Focus) and, if you like, a MASK PLACEHOLDER.
Turn on Clear mask before submit so the saved value is digits only. With this on, (384) 682-4827 is stored as 3846824827.

A mask controls which characters are accepted, but JetFormBuilder's mask library (Inputmask 5.0.8) also sets the keyboard. When it starts on an input that has no inputmode attribute, it adds inputmode="text". That wins over type="tel", so the phone opens the letter keyboard. Setting inputmode="tel" on the input, before or after the mask starts, brings the dial pad back.

Text Field "Tel" or Phone Field?

	Text Field ("Tel")	Phone Field
Available since	Long-standing	3.6.0
Country selector	No	Yes, with default, preferred, only and exclude lists
Phone number validation	Blocks letters; use a mask for format	Yes, with an INVALID PHONE MESSAGE
Saved value	What was typed, or digits only with "Clear mask before submit"	E.164 or International
Input mask	Yes	Formatting handled by the field
Best for	Single-country forms with a fixed format	International numbers, CRMs, SMS and WhatsApp tools

Choose the Phone Field for new forms. Keep the Text Field when a strict single-country mask is all you need, or when moving the field would break integrations you do not want to touch yet.

Moving an existing form to the Phone Field

Note the FORM FIELD NAME of the old Text Field.
Delete it, add a Phone Field and give it the same name, so post-submit actions and macros that refer to that name still match.
Re-check each post-submit action. The stored value changes format: E.164 adds the + and country code. A CRM column or a meta field that expected 3846824827 will now get +13846824827.
Submit a test entry and check where the data lands.

Force the phone keypad with JavaScript

This script needs no jQuery. It covers three cases:

Every input[type="tel"] inside a form gets inputmode="tel", so a masked "Tel" Text Field opens the dial pad.
Any field you give the CSS class force-tel-keyboard gets the same treatment. Add the class in the block's Advanced panel (Additional CSS class(es)). The script works whether the class ends up on the input or on its wrapper.
Any field with the class digits-only-phone accepts only digits and one leading +. Use this only on a field without an input mask, because the filter and the mask would fight over the value.

Save the code as js/bmc-tel-keypad.js in your child theme, or paste it into a JavaScript snippet in a code-snippets plugin set to load in the site footer:

Code

(function () {
  // Inputs that should open the phone keypad on mobile.
  var KEYPAD_SELECTOR = 'form input[type="tel"], form input.force-tel-keyboard, form .force-tel-keyboard input[type="text"]';

  // Inputs WITHOUT an input mask that should accept only digits and one leading "+".
  var DIGITS_SELECTOR = 'form input.digits-only-phone, form .digits-only-phone input[type="tel"], form .digits-only-phone input[type="text"]';

  function bmcSetKeypad(el) {
    if (!el || !el.matches || !el.matches(KEYPAD_SELECTOR)) {
      return;
    }
    if (el.getAttribute('inputmode') !== 'tel') {
      el.setAttribute('inputmode', 'tel');
    }
    // Help autofill, but keep any autocomplete value already set.
    if (!el.hasAttribute('autocomplete')) {
      el.setAttribute('autocomplete', 'tel');
    }
  }

  function bmcApplyAll() {
    document.querySelectorAll(KEYPAD_SELECTOR).forEach(bmcSetKeypad);
  }

  // Runs on tap (before focus) and on focus (tab key, label click).
  // Listening on the document also covers forms loaded later in popups or via AJAX.
  document.addEventListener('pointerdown', function (e) {
    bmcSetKeypad(e.target);
  }, true);

  document.addEventListener('focusin', function (e) {
    bmcSetKeypad(e.target);
  }, true);

  // Optional digits-only filter: removes everything except digits and a leading "+".
  document.addEventListener('input', function (e) {
    var el = e.target;
    if (!el || !el.matches || !el.matches(DIGITS_SELECTOR)) {
      return;
    }
    var clean = el.value.replace(/(?!^\+)[^\d]/g, '');
    if (clean !== el.value) {
      el.value = clean;
    }
  }, true);

  // Set the attribute on fields already on the page.
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', bmcApplyAll);
  } else {
    bmcApplyAll();
  }
})();

Install and test the snippet

Load the file from your child theme

If you saved the script as js/bmc-tel-keypad.js in your child theme, enqueue it by adding this to the child theme's functions.php:

add_action( 'wp_enqueue_scripts', 'bmc_enqueue_tel_keypad' );

function bmc_enqueue_tel_keypad() {
	wp_enqueue_script(
		'bmc-tel-keypad',
		get_stylesheet_directory_uri() . '/js/bmc-tel-keypad.js',
		array(),
		'1.0.0',
		true
	);
}

The last argument, true, loads the script in the footer. If you edit the file later, raise the version number so browsers and caches fetch the new copy.

How it works

inputmode="tel" tells mobile browsers to show the phone dial pad, which includes +. inputmode="numeric" shows digits only, and on some phones that leaves no way to type +, so tel is the better choice for phone numbers.
The attribute is set on page load, on tap and on focus. If another script resets it, the next tap puts it back before the keyboard opens.
All listeners are attached to the document, so forms that appear later, for example in a popup, are covered without extra code.
The filter regex /(?!^\+)[^\d]/g removes every character that is not a digit, except a + in the first position. When it removes a character, the cursor jumps to the end of the field. That is fine for phone numbers.

Check it in DevTools and on a phone

Open the form page on desktop, right-click the phone input and choose Inspect.
Confirm the input shows inputmode="tel" after the page has loaded. Also check its type. A "Tel" Text Field should be type="tel". If it is not, add the force-tel-keyboard class to the field.
Do the same for a Phone Field. Inspect the actual number input, not the country dropdown. If you add the class to a Phone Field, check that only the number input gets inputmode="tel".
Open the page on an iPhone and an Android phone, then tap the field. You should get the dial pad.
Submit a test entry and check the stored value in your form records or post-submit action.

The script targets every type="tel" input inside any form on the site, including non-JetFormBuilder forms. That is harmless, since those inputs should get the dial pad anyway. If you want it on certain pages only, wrap the wp_enqueue_script() call in a condition such as if ( is_page( 'contact' ) ).

Common problems

Still the letter keyboard after adding the script. Clear your page cache and any JS minify or combine cache, then check in DevTools that bmc-tel-keypad.js loads. If the file loads but inputmode is missing, the input is not type="tel". Add the force-tel-keyboard class.
The Phone Field rejects landline numbers. This was fixed in 3.6.6. Update the plugin.
A validation error appears as soon as the visitor switches country. Since 3.6.2, the Phone Field skips validation when the selected country changes. Update the plugin.
The input mask stops working with Advanced validation. This was fixed in 3.6.7. Update before you rebuild the field.
No way to set a placeholder on the Phone Field. Custom placeholder support arrived in 3.6.7.
Min/Max length is ignored on a masked "Tel" field. This was reported in 2021 for masks such as 999-999-9999, and the maintainers resolved it in 3.0 with Advanced validation: switch the field's validation to Advanced and remove MIN LENGTH (SYMBOLS). A mask with ten 9s already limits the number to ten digits. Use 3.6.7 or later, which fixed the input mask not working with Advanced validation.
Stored numbers include brackets and dashes. Turn on Clear mask before submit on the Text Field, or use E.164 on the Phone Field.
The digits-only filter deletes characters while the mask is typing. Remove the digits-only-phone class from masked fields. Use either the mask or the filter, not both.
Country names are not translated. 3.6.1 made Phone Field translations follow the current WordPress page locale. One user has reported that some locales are still untranslated. JetFormBuilder's own code has a jet-form-builder/phone-field/i18n filter for this: return an array of lowercase ISO codes and country names, for example 'de' => 'Deutschland', and those names replace the ones in the country list. It is not in the official docs, so test it again after updates.

To sum up: on 3.6.0 or later, switch phone inputs to the Phone Field and save in E.164. Keep the snippet for masked "Tel" Text Fields, or for any phone input that still opens the letter keyboard. If you would rather have someone set up or migrate your forms for you, post a request on BoostMyCroco.

Frequently Asked Questions

Why does my masked JetFormBuilder phone field still show the letter keyboard?

Because JetFormBuilder's input mask library adds inputmode="text" to masked inputs that have no inputmode of their own, and inputmode overrides type="tel". Setting inputmode="tel" on the input, as the snippet does, brings back the dial pad.

Can I restrict the JetFormBuilder Phone Field to one country?

Yes. In the Phone Field's Field tab, enter that country's two-letter ISO code in ONLY COUNTRIES, for example US. Set DEFAULT COUNTRY to the same code so visitors do not have to pick it.

Which phone save format should I use for a CRM?

Use E.164, which the Phone Field recommends. It stores + country code + number with digits only, for example +380991234567, a format most CRMs, SMS and WhatsApp tools accept. Choose International only if people will read the stored number.

Does the JetFormBuilder Phone Field validate phone numbers?

Yes. It validates the number against the selected country and shows your INVALID PHONE MESSAGE when the number does not match. Update to at least 3.6.6, which fixed landline numbers being rejected, and preferably to the current 3.6.7.

Should I use inputmode numeric or tel for phone numbers?

Use tel. It opens the phone dial pad, which includes the + key for international numbers. On some phones numeric shows digits only, so visitors cannot type the plus sign.

Sources

JetFormBuilder — Dynamic Blocks Form Builder (wordpress.org)
Text Field Overview — JetFormBuilder (jetformbuilder.com)
Input field Min/Max limit does not work with input mask. · Issue #53 · Crocoblock/jetformbuilder · GitHub (github.com)
Phone Field Overview — JetFormBuilder (jetformbuilder.com)
Jetformbuilder form, A custom code for auto detect country and land code phone. · GitHub (gist.github.com)