Automatic Phone Number and Postal Code Field Formatting

Develop, Build & Integrate CMS Development
1

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!

2

@piersg can probably help out here :grinning_face:

3

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"
4

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? :confused:

5

@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

piersg_0-1628675341163.png
piersg_0-1628675341163.png404×365 22.8 KB

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);
 }
});
6

Hi,

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

7

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.

8

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.