# Automatic Phone Number and Postal Code Field Formatting

**URL:** <https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [August 4, 2021, 4:12pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802 "2021-08-04T16:12:59Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lait](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lait/32/29368_2.png) [@lait](https://community.hubspot.com/u/lait)\
**Post date:** [August 4, 2021, 4:12pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/1 "2021-08-04T16:12:59Z")

</div>

Hello,

I am working on a submission [form](https://share.hsforms.com/1SVHk8SiDTMm8oGlCFHUjCAbuyf5) 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](https://app.hubspot.com/design-manager/19920065/code/50183452798?tfid=49174042507) file:

```lia-code-sample
(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!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [August 5, 2021, 3:56pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/2 "2021-08-05T15:56:12Z")

</div>

@piersg can probably help out here 😀

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [August 5, 2021, 5:07pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/3 "2021-08-05T17:07:18Z")

</div>

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

```lia-code-sample
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:

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

```

---

<div class="post-metadata">

**Author:** ![lait](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lait/32/29368_2.png) [@lait](https://community.hubspot.com/u/lait)\
**Post date:** [August 10, 2021, 9:11pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/4 "2021-08-10T21:11:58Z")

</div>

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](https://app.hubspot.com/design-manager/19920065/code/50185179780?tfid=49174042507)… I did not find a form mudule. Am I missing something? 😕

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [August 11, 2021, 9:51am UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/5 "2021-08-11T09:51:02Z")

</div>

@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:

```lia-code-sample
<!--[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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/5f48e46be00a7ebb8ea818e89fd58b0ebac8f5ac.png)

and then add this to the JS section of the module

```lia-code-sample
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);
 }
});

```

---

<div class="post-metadata">

**Author:** ![BSCARAVELLI](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bscaravelli/32/101577_2.png) [@BSCARAVELLI](https://community.hubspot.com/u/BSCARAVELLI)\
**Post date:** [January 29, 2022, 1:58pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/6 "2022-01-29T13:58:17Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![RBozeman](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rbozeman/32/8786_2.png) [@RBozeman](https://community.hubspot.com/u/RBozeman)\
**Post date:** [September 27, 2022, 7:59pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/7 "2022-09-27T19:59:23Z")

</div>

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](https://app.hubspot.com/ecosystem/6303986/marketplace/apps/marketing/data-management/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.

---

<div class="post-metadata">

**Author:** ![GMoore0](https://avatars.discourse-cdn.com/v4/letter/g/a4c791/32.png) [@GMoore0](https://community.hubspot.com/u/GMoore0)\
**Post date:** [April 12, 2023, 7:00pm UTC](https://community.hubspot.com/t/automatic-phone-number-and-postal-code-field-formatting/41802/8 "2023-04-12T19:00:24Z")

</div>

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.