topic Re: Automatic Phone Number and Postal Code Field Formatting in CMS Development

Automatic Phone Number and Postal Code Field Formatting

lait — Wed, 04 Aug 2021 16:12:59 GMT

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:

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

Re: Automatic Phone Number and Postal Code Field Formatting

dennisedson — Thu, 05 Aug 2021 15:56:12 GMT

@piersg can probably help out here 😀

Re: Automatic Phone Number and Postal Code Field Formatting

piersg — Thu, 05 Aug 2021 17:07:18 GMT

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

For the post codes you can do this:

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

Re: Automatic Phone Number and Postal Code Field Formatting

lait — Tue, 10 Aug 2021 21:11:58 GMT

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? 😕

Re: Automatic Phone Number and Postal Code Field Formatting

piersg — Wed, 11 Aug 2021 09:52:20 GMT

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

<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

Re: Automatic Phone Number and Postal Code Field Formatting

BSCARAVELLI — Sat, 29 Jan 2022 13:58:17 GMT

Hi,

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

Re: Automatic Phone Number and Postal Code Field Formatting

RBozeman — Tue, 27 Sep 2022 20:00:03 GMT

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.

Re: Automatic Phone Number and Postal Code Field Formatting

GMoore0 — Wed, 12 Apr 2023 19:00:24 GMT

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.