Localise country names
International Telephone Input supports some measure of internationalisation, allowing you to localise the country names in the dropdown. Using the localisedCountries
option, you can pass an object with one entry for each country, where the key is the country code, and the value is the localised country name. This means that you're able to display the country names in your user's language, which provides a much better user experience.
In the example below, we localise the country names to German, as a demonstration. We also use the onlyCountries
option to limit the countries to just the few that we have chosen to localise, whereas by default they would all be shown, localised or not.
Demo
Markup
<input id="phone" type="tel">
Code
const input = document.querySelector("#phone");
window.intlTelInput(input, {
localizedCountries: {
fr: "Frankreich",
de: "Deutschland",
es: "Spanien",
it: "Italien",
ch: "Schweiz",
nl: "Niederlande",
at: "Österreich",
dk: "Dänemark",
},
onlyCountries: ["fr", "de", "es", "it", "ch", "nl", "at", "dk"],
utilsScript: "/intl-tel-input/js/utils.js?1684676252775" // just for formatting/placeholders etc
});