By comparison with email addresses, phone number are much more difficult to format-validate, particularly when you need to support various international phone number formats.
Approaches
Input Type
Webflow supports the Phone input type, which generates the input as type=tel, however it only offers very general validations.
Regex and HTML field constraints
You can use custom attributes to constrain input features, e.g. for a UK number;
pattern=*(0-9)*maxlength=11minlength=11
This approach can be combined with the Input type = Phone.
3rd Party Validation Libs
Libphonenumber
Open source project which appears to have been taken over by Google;
https://libphonenumbers.js.org/docs/
https://github.com/google/libphonenumber
DEMO - https://htmlpreview.github.io/?https://github.com/google/libphonenumber/blob/master/javascript/i18n/phonenumbers/demo-compiled.html
Add the library;
Configure your code for your element;
Also supports a special mode for an AsYouTypeFormatter.
https://libphonenumbers.js.org/docs/inputDigit
3rd Party Service API
If you want deeper validation, to ensure that a number is actually registered and to know what carrier handles it, you can use a service like Veriphone.
https://veriphone.io/
Examples
Treat these as starting points as they have not been thoroughly tested.
For all of these, set the input field type to Phone ( tel ). US Format Number Validation
- pattern =
\d{3}[-]\d{3}[-]\d{4} - title = US phone number (format: 123-456-7890)
Mexico
- pattern =
01[-]\d{3}[-]\d{3}[-]\d{4} - title =
Mexican phone number (format: 01-123-456-7890)
Germany
- pattern =
\+49 \d{4} \d{6} - title = German phone number (format: +49 1234 567890)
UK
- pattern =
\+44 \d{4} \d{6} - title =
UK phone number (format: +44 1234 567890)
Notes
https://discourse.webflow.com/t/phone-number-input-validation-redux/62455/9
FAQs
Answers to frequently asked questions.
