Popup Form Phone Number Formatting

[SLester]

hello,

I have a popup form where I collect email and phone number. I noticed the phone number field here is a single line text and does not allow for area code+ numeric input formatted properly. 

Is there a css file for this form that I can access? do I need to add input[type='tel'] somewhere manually?

Thanks so much,

Sahar

[Anton · Accepted solution]

Hi @SLester, 

if you use the default phone number property you can set the country code in the form. If you want to have AREACODE+NUMBER you can either create a custom workflow with formating actions or modify the embed code with this guide. If you want to modify the embed code I recomend you to create a custom module like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "{{ hub_id }}",
    formId: "{{ module.form_field.form_id }}",
			{# all further modifications come here #}
  });
</script>

best, 

Anton

[RBozeman]

Hi @SLester,

As @BukunmiOdetayo mentioned, you can automatically require a country code dropdown on your form. But that doesn't solve other issues - general formatting, area codes, extensions, etc. 

Full disclosure, I work for Insycle as a product marketer. But Insycle has deep phone number formatting features that I think would be helpful for your situation, both for cleaning up historical phone numbers as well as automating phone formatting moving forward. Here are a few bullet points:

• Insycle offers numerous default templates that allow you to automatically format phone numbers for popular formats, including the E. 164 international standard.
• You can also build custom phone number formatting templates to meet specific needs. 
• You can easily add prefixes such as country codes or extensions to existing numbers.
• Insycle can also remove all non-digits (separators like dashes, spaces, periods, stars etc.) from phone numbers, essentially wiping the slate clean and stripping the phone number down to its raw digits, so that you can reformat them how you would like and define any separator of your choosing
• Your phone number formatting templates can be scheduled to run automatically on a set schedule, or even added to a HubSpot workflow, so that phone number formatting happens immediately after data hits your database.

Hope that is helpful! Have a good day!

Ryan

[BukunmiOdetayo · Accepted solution]

To expatiate what @Anton has said, simply turning the "show the country code dropdown menu" toggle on will let your website visitors who want to submit the form select their country code.

Otherwise, you can access the CSS file of the form.

[Seattle-Anand]

Bukunmi, is there a way to do this for Mobile and Company phone? Seems only to work on the Phone # Field for the contact.

[TitiCuisset]

Hi @SLester 

Thank you for reaching out.

I want to tag some of our experts here - @BukunmiOdetayo @Anton @LMeert do you have any advice for @SLester on this? 

Thank you!

Best

Tiphaine

[Anton · Accepted solution]

Hi @SLester, 

if you use the default phone number property you can set the country code in the form. If you want to have AREACODE+NUMBER you can either create a custom workflow with formating actions or modify the embed code with this guide. If you want to modify the embed code I recomend you to create a custom module like this

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "{{ hub_id }}",
    formId: "{{ module.form_field.form_id }}",
			{# all further modifications come here #}
  });
</script>

best, 

Anton