How to create a Phone Number field in forms also it must enter like this example: (xxx)-xxx-xxxx
You can definitely do a Single Line field with a Regular Expression to force the formatting. There's a couple ways to do the RegEx, but here's one that should match the format you listed.
\(\d\d\d\)\-\d\d\d\-\d\d\d\d
Here's some Javascript to spruce it up a little bit by adding placeholder text, this assumes your field(s) have a class name of phoneNumber:
$(document).ready(function () {
$('.phoneNumber input').each(function() {
$(this).attr('placeholder', '(123)-456-7890');
});
});
Here's an even more expanded version of the Javascript that also checks for common formats of the phone number, and replaces it to your format automatically.
$(document).ready(function () {
//Add placeholder text to the phoneNumber field(s) when the form loads
$('.phoneNumber input').each(function() {
$(this).attr('placeholder', '(123)-456-7890');
});
//When the phoneNumber field(s) are changed, check for common formatting errors and update to standard format
$('.phoneNumber input').change(function() {
//automatically reformat if entered as 1234567890
if($(this).val().match(/\d\d\d\d\d\d\d\d\d\d/)) {
$(this).val($(this).val().replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, "($1)-$2-$3"));
}
//automatically reformat if entered as (123)456-7890
else if($(this).val().match(/\(\d\d\d\)\d\d\d\-\d\d\d\d/)) {
$(this).val($(this).val().replace(/\((\d\d\d)\)(\d\d\d)\-(\d\d\d\d)/, "($1)-$2-$3"));
}
//automatically reformat if entered as (123) 456-7890
else if($(this).val().match(/\(\d\d\d\)\s\d\d\d\-\d\d\d\d/)) {
$(this).val($(this).val().replace(/\((\d\d\d)\)\s(\d\d\d)\-(\d\d\d\d)/, "($1)-$2-$3"));
}
//automatically reformat if entered as 123-456-7890
else if($(this).val().match(/\d\d\d\-\d\d\d\-\d\d\d\d/)) {
$(this).val($(this).val().replace(/(\d\d\d)\-(\d\d\d)\-(\d\d\d\d)/, "($1)-$2-$3"));
}
//automatically reformat if entered as 123 456 7890
else if($(this).val().match(/\d\d\d\s\d\d\d\s\d\d\d\d/)) {
$(this).val($(this).val().replace(/(\d\d\d)\s(\d\d\d)\s(\d\d\d\d)/, "($1)-$2-$3"));
}
//automatically reformat if entered as 123.456.7890
else if($(this).val().match(/\d\d\d\.\d\d\d\.\d\d\d\d/)) {
$(this).val($(this).val().replace(/(\d\d\d)\.(\d\d\d)\.(\d\d\d\d)/, "($1)-$2-$3"));
}
$(this).parsley().validate();
});
});
This is an older question, and not as relevant for people using the new Forms designer, but for those using a classic designer I thought I would share. This is a function I use to automatically convert a 10-digit number entered in any format to our preferred format (xxx-xxx-xxxx, but you can change it to suit your preferences).
Note - the "most flexible option" for phone numbers that I put in the regex field is this:
^\(?\d{3}\)?[\-\s]?\d{3}[\-\s]?\d{4}$
It allows people to enter a 10-digit phone number in just about whatever format they're comfortable with, then the JS function converts it to the format we like.
$(document).ready(function() {
// Set field regex validation to most flexible option above (in Layout designer)
// establish regular expression to test in JS
const phoneRegex = /\d{3}-\d{3}-\d{4}/gm; //phone # must match xxx-xxx-xxxx
//Auto-format phone numbers
$('.phone input').on('change',function(){
// extract all numbers
var numbers = $(this).val().replace(/[^[0-9]/g,'');
// If current input val does not match phoneRegex, but is 10 digits
if (!phoneRegex.test($(this).val()) && numbers.length == 10){
// re-assemble the string with hyphens and set the value
var formatPhone = numbers.substr(0,3) + '-' + numbers.substr(3,3) + '-' + numbers.substr(6,4);
$(this).val(formatPhone).change();
};
});
});