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
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).
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.
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
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:
