Automatic Phone Number and Postal Code Field Formatting

[lait]

Hello,

I am working on a submission form and I was wondering if it is possible to force the formatting when the user enters the the phone number and postal code?

For example, if a user enters a Canadian phone number this way: 123456789, is it possible to 

automatically populated this format: (123) 456 789?

Same for postal codes: s0s-0s0 to S0S 0S0?

I have tried using this code in our field_masks.js file:

(function() {
  // Post code mask
	$('input[name="zip"]').mask('S0S 0S0');
 
  // Phone number mask
  $('input[name="phone"]').mask('p1 (000) 000-0000', {
        translation: {
            p: {
                pattern: /\+/,
                optional: true
            }
        }
    });
//     return this.optional(element) || /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i.test(value);
//   }, "Please provide a valid zipcode.");
}());
$('input[type=email]').bind('input', function () {
        $(this).val(function (_, v) {
            return v.replace(/\s+/g, '');
        });
    });

 But it does not work. Is that even possible?
Thanks!

[GMoore0]

Running into this issue now, just imported roughly 4,500 contacts from another CRM. A decent split between Canadian and US phone numbers, and am now stuck going through every single one to format CAN/US phone numbers. A very simple filter on my spreadsheet would break them into 2 categories, and in 2 clicks I could format all 4,500 numbers if this tool was available. 

Considering this thread was started 2 years ago I won't hold my breathe, but I thought i'd add to it and hopefully give it some attention. 

Hubspot, please listen to the people who actually use your software before they start going elsewhere. 

[RBozeman]

Hi @lait,

@piersg's solution is a good one and should stop a lot of your problems right at the source. 

However, you might run into some issues with phone number formatting, as there are just so many variables to consider. What kind of validation do you have on the form? Are you certain they will enter phone numbers like you described (or at least the in-flowing data will be that way by the time formatting takes place? For example, could a user enter a phone number in different formats like "123.456.8675" or "+1-425-532-7864,"?

Accounting for different formats, area codes, country-specific formats, and country codes can get extremely messy. If you knew for certain your CRM entries were from a specific country or had strong validation don't he form field that severely limits the issue that you have to take into account, though. 

If you are dealing with advanced issues like that, I would recommend trying Insycle. Full disclosure, I work for Insycle, but it can help solve some advanced use cases regarding phone number formatting:

• Many pre-built phone number formatting templates
• Build custom phone number formatting templates
• Format phone numbers for country codes (based on location data)
• Include phone number formatting recipes in HubSpot Workflows, so that your phone number field is formatted directly after the data hits HubSpot CRM and before your first marketing or sales materials go out

In short, phone number formatting quickly becomes a complex topic when you look at all of the potential variables. 

[BSCARAVELLI]

Hi,

Is it possible ot make mask phone number field in a form? Can't find 

[piersg]

@lait How are you adding the form to the page? Are you using the embed code, or are you doing it in a module?

If you're using an embed code I would do this:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
	hbspt.forms.create({
		portalId: "[portal id]",
		formId: "[form id]"
	});
	function formatPhoneNumber(phoneNumberString) {
	  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
	  var match = cleaned.match(/^(\d{3})(\d{3})(\d{3})$/);
	  if (match) {
	    return '(' + match[1] + ') ' + match[2] + ' ' + match[3];
	  }
	  return null;
	}

	function formatPostCode(postCode){
	    return postCode.toUpperCase().replace('-',' ');
	}

    window.addEventListener('message', event => {
		if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
			var postCode = document.getElementById('zip-input');
			var phone = document.getElementById('0-2/phone-input');
			postCode.value = formatPostCode(postCode.value);
			phone.value = formatPhoneNumber(phone.value);
		}
	});
</script>

Or if you're using a custom module you can add a form field that allows you to select the form you want in the page editor

and then add this to the JS section of the module

function formatPhoneNumber(phoneNumberString) {
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{3})$/);
  if (match) {
    return '(' + match[1] + ') ' + match[2] + ' ' + match[3];
  }
  return null;
}

function formatPostCode(postCode){
  return postCode.toUpperCase().replace('-',' ');
}

window.addEventListener('message', event => {
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
    var postCode = document.getElementById('zip-input');
    var phone = document.getElementById('0-2/phone-input');
    postCode.value = formatPostCode(postCode.value);
    phone.value = formatPhoneNumber(phone.value);
  }
});

[piersg · Accepted solution]

Hi @lait, you can use this function for the phone number

function formatPhoneNumber(phoneNumberString) {
  var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
  var match = cleaned.match(/^(\d{3})(\d{3})(\d{3})$/);
  if (match) {
    return '(' + match[1] + ') ' + match[2] + ' ' + match[3];
  }
  return null;
}
// example:
formatPhoneNumber(123456789)
// outputs "(123) 456 789"

For the post codes you can do this:

function formatPostCode(postCode){
    return postCode.toUpperCase().replace('-',' ');
}
formatPostCode('s0s-0s0');
// outputs "S0S 0S0"

[lait]

Thanks for the help! However (and again I'm sorry, I am new to this tool), I have modified the JS file, but then I don't know where to customize the form in the HTML version so I can apply the JS to in my Design Manager... I did not find a form mudule. Am I missing something? 😕 

[dennisedson]

@piersg  can probably help out here 😀