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 to allow only numbers.

Follow the given steps:

1. Go to the Admin module.
2. Select the Web Widgets.
3. Click the active Web Widgets to allow only numbers.
4. Navigate to Advanced Customization.
5. 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();
      }
});

6. Click on Update.

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