HubSpot Ideas

CaitlinRyan

Country code drop down for phone number in forms

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 websiteThis is what HubSpot has on their forms on their website

Mises à jour HubSpot
May 11, 2021 10:11 AM

Not at the moment no, we don't currently allow for customisations on the inputs. I can see how this would be helpful though and the screenshot you've sent isn't the prettiest of sights. I'll be sure to bring this up with the team to see if it's something we can fit in in the future! 

March 05, 2019 01:54 AM

Thanks very much @lien  our engineers are currently investiging this issue now.

March 04, 2019 08:36 AM

Hi @lien yes this is has been tested and we released this in beta to customers who have had no issues. This may be due to the form you're using. Could you open a ticket with our support team who can assist you with this issue please? 

Statut mis à jour : Delivered
March 01, 2019 07:06 AM

Hi all, this has just been released to all portals today. You can find this by adding the "phone" field to your HubSpot form, clicking this within the editor and enabling "show country code dropdown".

 

Thanks to everyone for your continued feedback in helping us build a great product! Smiley heureux

Statut mis à jour : In Beta
February 27, 2019 01:57 AM

Hi all,

 

I've got some exciting news - this feature is now in Beta so if you are interested in rying it out please DM me your Portal ID and I will add it to your account. 

 

Thanks,

Dom

January 16, 2019 02:26 AM

Hey guys, thanks that's great. As soon as it's in beta I'll change the status and you can DM me your details

Re: Country code drop down for phone number in forms - changed to: In Planning
January 16, 2019 01:15 AM

Hi everyone, I'm excited to tell you that we've been working on this feature for a while now and will have a beta version of this feature ready in the next couple of weeks. I will be updating the status of this post as soon as the  beta is ready so you are welcome to reply on this post if you are interested in joining it. 

 

 

79 Commentaires
Nitsan
Participant

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
Participant

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

JHegener
Membre

Like Jon_Sasala says, it would be very useful.

Everybody has more than two phone numbers!

DHalliNet
Participant | Partenaire solutions Platinum

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

KTrout
Membre

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

MPardasani1
Membre | Partenaire solutions Elite

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
Participant

Indeed needed!

BrunoHarrivelle
Membre

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
Membre

Would be a nice feature for us too.

 

oMaillard
Membre

Vivement que cela soit possible 

ASiegfried35
Membre

Definitely needed!

LTalisaysay
Membre | Partenaire solutions Platinum

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
Membre

UPVOTE can we use this in ticket  property as well

Rongen
Contributeur

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

oMaillard
Membre

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

C'est vraiment dommage aussi.

 

BOR_CCSA
Membre

Commenting for visibility / adding my vote for this feature.

JElston
Participant

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

OGilad
Membre

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
Membre

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

before-after.png

 

 

 

Hope this helps someone out there in the world!

Cheers🍻