How to Make Phone Number Field in Web Widget to Allow Only Numbers

Using the custom JS option, you can make the phone number field in the web widget allow only numbers.

To achieve this, follow the given steps:

1. Go to the Admin module and select the Web Widgets.
2. Click the active Web Widgets to allow only numbers.
3. Navigate to Advanced Customization.
4. Paste the following custom JS code.

Custom JS code

inputField = document.querySelector('.phone-number-field');

inputField.addEventListener('keypress', function(event) {
     const regex = /[\d\+]/;
     if (!regex.test(event.key)) {
          event.preventDefault();
      }
});

5. Click on Update.

The following picture illustrates how to paste the custom JS code.