Streaming live at 10am (PST)

Phone Number Input Validation [redux]


Continuing the discussion from Phone Number Input Validation:

Has anybody found out how to force numeric input in Webflow form input fields? Thanks.


step 1 - add pattern

Add this custom attribute to phone feild

  • name: pattern
  • value: ^[0-9-+s()]*$

The code behind scene:
<input type="tel" pattern="^[0-9-+s()]*$" placeholder="Telephone Number" required>

numbers (0-9), the minus symbol (-), the plus symbol (+) as well as spaces (s) and parentheses (()) are allowed.

Step 2 - Change type to tel by tiny JS code

2.1.Add #id to phone feild

2.2. Change attribute

 /* select the feild by id - name match to the name in step 2.1 */
var phoneField = document.getElementById("phoneField"); 
 /* change attribute */
phoneField.setAttribute("type", "tel");


Where to put this code? (per page, global site -or- embed code)




Thank you very much for this, Ezra!


Mark as solution. Thanks


Hi Ezra. I used the attached settings since in my case the phone field is optional and I’m after 11-digit UK phone numbers without any symbols. It probably could be done more neatly but seems to work ok. Thanks.