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.