Phone number validation and formatting in Webflow forms
Sometimes it’s useful to ask your site visitor to enter their phone number into a contact form. To improve the quality of gathered phone numbers, it’s important to validate them before submitting the form. To further limit the number of mistakes, it’s also helpful to format the number while typing, by adding a space every few digits.
TL;DR
If you are in a hurry and just want to see an example of how to format and validate a phone number in a Webflow form, copy the following code at the bottom of the body element:
<script src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1/bundle/libphonenumber-min.js"></script><script>
const DEFAULT_COUNTRY = 'FR'
const formatter = new libphonenumber.AsYouType(DEFAULT_COUNTRY)
const phoneInput = document.getElementById('myphone')
phoneInput.addEventListener('input', function (event) {
formatter.reset()
const newValue = formatter.input(phoneInput.value)
phoneInput.value = newValue
if (!libphonenumber.isValidPhoneNumber(newValue, DEFAULT_COUNTRY)) {
phoneInput.setCustomValidity('Invalid phone number')
} else {
phoneInput.setCustomValidity('')
}
})
</script>
Please note that you need to adjust the phone input field element ID and the default country above.
Getting started
For the heavy lifting, we’ll be using the libphonenumber-js library:
To initialize it, add the following script tag at the end of the <body> element using an Embed element:
<script src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1/bundle/libphonenumber-min.js"></script>To learn more about using custom code in Webflow, refer to my article “How to add custom code to Webflow”.
Validate and format phone numbers
After completing this tutorial, you should see a simple form validating and formatting a phone number similar to this one:
1. Create a Form Block element
Create a standard Form Block element and delete any existing fields from it, leaving only the Submit Button:
2. Add a phone field to the form
Add the Label and Input elements to the form:
3. Set up the phone field
Open the Field settings and set the type of the Input field to phone. Also set the field name to Phone, remove the placeholder text for clarity and keep the Required option enabled:
Next, set an ID of the field to myphone, so you can refer to it later:
4. Format the phone number
To format the phone number while it’s being typed, add the following code to the Embed element below the libphnonenumber-js library initialization code:
<script>
const DEFAULT_COUNTRY = 'FR'
const formatter = new libphonenumber.AsYouType(DEFAULT_COUNTRY)
const phoneInput = document.getElementById('myphone')phoneInput.addEventListener('input', function (event) {
formatter.reset()
const newValue = formatter.input(phoneInput.value)
phoneInput.value = newValue
})
</script>
You should end up with the element structure similar to the one below in Webflow Designer:
You can deploy your site at this point, and any phone numbers entered into the form should appear nicely formatted:
Please note the DEFAULT_COUNTRY variable. It sets the country of the phone number, if the user didn’t specify it via the country calling code. In other words, the below phone number is treated as French by default and formatted accordingly:
5. Validate the phone number
At this point, the user can still submit an invalid phone number. Add the following code at the end of the input event listener to validate it:
<script>
...
if (!libphonenumber.isValidPhoneNumber(newValue, DEFAULT_COUNTRY)) {
phoneInput.setCustomValidity('Invalid phone number')
} else {
phoneInput.setCustomValidity('')
}
})
</script>After deployment, the form should not allow the submitting of an invalid phone number:
Bonus: Use the phone component from the webflow-alpinejs library
I maintain a small library integrating an excellent Alpine.js microframework with Webflow. It contains a bunch of reusable components, and among them the phone component. You can simply use this instead of following the above steps.
First, initialize the library by adding the following script tag at the end of the <body> element:
<script src="https://cdn.jsdelivr.net/combine/npm/@loomchild/webflow-alpinejs@2,npm/@loomchild/webflow-alpinejs@2/dist/components/phone.js"></script>Next, add the following style tag at the beginning of the <body> element:
<link href="https://cdn.jsdelivr.net/npm/@loomchild/webflow-
alpinejs@2/dist/style.css" rel="stylesheet">Finally, add the following custom properties to the phone field:
x-data="phone({ country: 'FR' })"
x-bind="input"Voilà, that’s it!
You can learn more about using Alpine.js in Webflow from my “Webflow + Alpine.js” article.
Thank you for reading, I hope you enjoyed this tutorial! For more Webflow coding tips for designers, please follow Webflow Sprinkles. If you have any feedback, please post a comment below.
