JetFormBuilder Telephone Input: How to Force the Number Keyboard on Mobile

How to Force Number Keyboard for Telephone Fields in JetFormBuilder

When creating forms with JetFormBuilder, you may notice that the telephone input field doesn’t always trigger the numeric keyboard on mobile devices. Instead, users still see the full keyboard, which makes entering phone numbers less user-friendly. In this guide, we’ll show you how to fix this issue by using a simple JavaScript snippet that enforces numeric input and ensures the correct keyboard displays on phones and tablets. JetFormBuilder telephone input.

Why the Correct Keyboard Matters

On mobile devices, form usability is critical. If users see a full keyboard instead of a number pad when entering their phone number, it slows them down and increases the chance of input errors. A properly configured tel input should automatically show the number keyboard, providing a smoother experience and boosting conversions.

The Default JetFormBuilder Issue

By default, JetFormBuilder allows you to set input masks for telephone fields. While this restricts input to numbers, it does not guarantee that mobile browsers will display the numeric keyboard. This can be frustrating, especially if you expect consistent user behavior across devices.

Solution: JavaScript Snippet for Telephone Fields

To solve this issue, we can use a simple JavaScript (jQuery) snippet. This script ensures that only numbers (and an optional “+” for international numbers) are allowed, while also forcing the correct keyboard to appear on mobile devices.

				
					jQuery(document).ready(function($) {
    $('input[type="tel"].jet-form-builder__field').on('input', function() {
        // Remove non-numeric characters except "+" for international numbers
        let sanitizedValue = $(this).val().replace(/[^0-9+]/g, '');

        // Ensure "+" is only at the beginning (if needed)
        if (sanitizedValue.includes("+") &amp;&amp; sanitizedValue.indexOf("+") !== 0) {
            sanitizedValue = sanitizedValue.replace(/+/g, ""); 
            sanitizedValue = "+" + sanitizedValue; 
        }

        $(this).val(sanitizedValue);
    });
});

How to Implement the Snippet in Your Site

Here’s how to add this snippet to your WordPress site:

Install a code snippet plugin like Code Snippets.
Create a new snippet and paste the above jQuery code.
Save and activate the snippet.
Test your form on a mobile device to confirm the number keyboard now appears correctly.

Benefits of Using This Snippet

Ensures a better user experience on mobile devices.
Prevents users from entering invalid characters.
Supports international phone numbers with “+”.
Increases form submission accuracy and speed.

Faqs

Does this work for all mobile devices?

Yes, the snippet targets the tel input type, which most modern browsers interpret correctly, displaying the numeric keyboard.

Can I still use an input mask with JetFormBuilder?

You can, but this snippet is designed to replace the need for masks while keeping inputs clean and valid.

Will this affect desktop users?

No, desktop users will see no difference. It only improves the mobile keyboard experience.

Can I allow special characters like dashes or parentheses?

By default, the snippet only allows numbers and “+”. You can modify the regular expression to allow other characters if needed.

Do I need jQuery for this snippet to work?

Yes, the provided code uses jQuery, which is included by default in WordPress, so no extra setup is required.