HubSpot Community - Country code drop down for phone number in forms - Page 4

CaitlinRyan · ‎Aug 24, 2017

We need to know the country code of all numbers submitted through our forms. It would be ideal if there was a country code drop down to select from that we could have on our web formsThis is what HubSpot has on their forms on their website

Nitsan · ‎Jun 27, 2022

I need this feature as well, it looks much better than existing country text option on forms.

Is there any product update regarding this?

BHenry86 · ‎Jul 1, 2022

How is this somethign we have to ask for? It boggles my mind noone thought of this.... you know day 1

JHegener · ‎Aug 4, 2022

Like Jon_Sasala says, it would be very useful.

Everybody has more than two phone numbers!

DHalliNet · ‎Aug 30, 2022

We really need this capability! This is basic CRM stuff!

KTrout · ‎Sep 16, 2022

yes a phone number type ( office, cell, lab, ect...would be most helpful and should be available

MPardasani1 · ‎Sep 19, 2022

Hi HubSpot,

It would be very useful for some of my clients if the 'country code' for the phone number is auto populated if the country has been selected from the dropdown list.

It will save a lot of time at the events where people are attending from the world and to search for their country code can be a task (especially if the event is too busy).

Please try to get this included in the forms.

Thanks,

Megha

Christian_Jorge · ‎Sep 22, 2022

Indeed needed!

BrunoHarrivelle · ‎Sep 23, 2022

We need this indeed, this is basic and long overdue.

The phone number field already exists, let us use it how we like.

Why this habit of keeping existing features captive from your paying customers ?

CWirsing · ‎Oct 4, 2022

Would be a nice feature for us too.

oMaillard · ‎Oct 10, 2022

Vivement que cela soit possible

ASiegfried35 · ‎Nov 1, 2022

Definitely needed!

LTalisaysay · ‎Nov 2, 2022

Agreed. Everybody has more than two phone numbers. There could be office numbers and direct line numbers and such which we can't use the calling functionality on.

WHsu · ‎Nov 14, 2022

UPVOTE can we use this in ticket property as well

Rongen · ‎Nov 15, 2022

We NEED THIS!!! Please let us know once this has been launched.

oMaillard · ‎Nov 15, 2022

Il est aussi impossible d'utiliser la fonction appel sur un objet personnalisé.

C'est vraiment dommage aussi.

BOR_CCSA · ‎Aug 15, 2023

Commenting for visibility / adding my vote for this feature.

JElston · ‎Sep 15, 2023

We need this feature (country code) on all data fields with the "phone number" as type, and not only the default HubSpot fields.

OGilad · ‎Oct 11, 2023

THis is a feature now. BUt country names are WAY to long! this gives issues for Google, because the text does not fit in the box. So the country names should be the short abriviations : Netherlands = NL

AfronOrana · ‎Dec 7, 2023

Looks like I'm a little late to the party, but here is how I overwrote the style to show the flags. You might have to play around with CSS but this can serve as a base:

Everything kicks in after the JS listener hears the event 'ofFormReady' fired from hubspot:

// Add an event listener to the window object that listens for 'message' events.
window.addEventListener('message', event => {
    // Check if the message event is of type 'hsFormCallback' and the eventName is 'onFormReady'.
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        // Find the form element in the document with a matching 'data-form-id' attribute.
        let initedForm = document.querySelector(`[data-form-id="${event.data.id}"]`);
        
        // Query all elements with class 'hs_phone' within the found form.
        let phoneNumberFields = initedForm.querySelectorAll('.hs_phone');
        
        // Iterate over each 'hs_phone' element.
        phoneNumberFields.forEach(numberField => {
          // Find a 'select' element within the current phone number field.
          let statesDropdown = numberField.querySelector('select');
          
          // If there is no 'select' element, skip the rest of this iteration.
          if (!statesDropdown) return;
          
          // Set a CSS custom property '--bg-flag' on the number field to the URL of a flag icon
          // based on the current value of the dropdown. The flag icons are sourced from an external URL.
          numberField.style.setProperty('--bg-flag', `url(https://purecatamphetamine.github.io/country-flag-icons/3x2/${statesDropdown.value}.svg)`);

          // Add an event listener to the dropdown for 'change' events.
          statesDropdown.addEventListener('change', function () {
            // When the dropdown value changes, update the '--bg-flag' property to reflect the new selection.
            numberField.style.setProperty('--bg-flag', `url(https://purecatamphetamine.github.io/country-flag-icons/3x2/${this.value}.svg)`);
          });  
        });   
    }
});

And then here is the css overrides I used, which very likely will not work on your case, as these are on top of the CSS I wrote from scatch on my theme:

.hs-form .hs-fieldtype-phonenumber .input { position: relative; }
.hs-form .hs-input.hs-fieldtype-intl-phone:before { content: '';  background: var(--bg-flag) center no-repeat; filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.26)); height: 100%; left: 18px; position: absolute;  top: 0; width: 20px;}
.hs-form .hs-input.hs-fieldtype-intl-phone select { color: white;  cursor: pointer; font-size: 0;max-width: 75px!important;}
.hs-form .hs-fieldtype-intl-phone.hs-input input { width: calc(100% - 75px - 15px)!important; }

A visual before / After preview

Hope this helps someone out there in the world!

Cheers🍻

HubSpot Ideas

Country code drop down for phone number in forms