Related articles
See the number input formatting and validation in action: https://how-to-webflow-clonable.webflow.io/phone-formatting-in-webflow
1) Click on the phone input element and change the ID to "application-form-phone"
2) Put this code before </body> tag
<script src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1/bundle/libphonenumber-min.js"></script>
<script>
const DEFAULT_COUNTRY = "US";
const formatter = new libphonenumber.AsYouType(DEFAULT_COUNTRY);
const phoneInput = document.getElementById("application-form-phone");
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>
You're done!