International Telephone Input with Country Flags and Dial Codes using jQuery

Telephone number input field is a mandatory field in the web form where the user contact info needs to be collected. Displaying country flag and international dial code makes the telephone number input user-friendly. In this tutorial, we will show you how to implement international telephone input field with national flags and dial codes dropdown list.

The International Telephone Number Input field is a simple jQuery plugin to add a dropdown list to the input field. It will list all the country names, national flags and international dial codes on the telephone input field. This plugin is very useful when you need to provide a telephone input filed for international users.

CSS

Include the intlTelInput.css stylesheet file to styling the international telephone input dropdown list.

<link rel="stylesheet" href="css/intlTelInput.css">

HTML

The following HTML creates a telephone input field.

<input type="tel" id="phone" />

JavaScript

International Telephone Input plugin uses the jQuery, so include the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Include the intlTelInput.js to use the International Telephone Input plugin.

<script src="js/intlTelInput.js"></script>

The intlTelInput() method initializes the International Telephone Input plugin. It will place a dropdown list with country flag and dial code to the input element.

$("#phone").intlTelInput();

Basic Uses

The following example code enables international telephone input field. Specify the utils.js script in utilsScript to enable the international formatting.

<script>
$("#phone").intlTelInput({
    utilsScript: "js/utils.js"
});
</script>

Advanced Uses

The following example code set a default country dial code based on the user’s IP address.

<script>
$("#phone").intlTelInput({
    initialCountry: "auto",
    geoIpLookup: function(callback) {
        jQuery.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            callback(countryCode);
        });
    },
    utilsScript: "js/utils.js"
});
</script>

Configuration Options

The intlTelInput() method has various configuration options to customize the international telephone input functionality. Some useful options of intlTelInput are given below.

• allowDropdown – (Boolean) (Default: true) Whether the dropdown is enabled or not. If disabled, dropdown list will not appear on the input element and the flag will not be clickable.
• autoHideDialCode – (Boolean) (Default: true) Remove the dial code from input field on blur or submit.
• autoPlaceholder – (String) (Default: polite) Set placeholder in the input field.
• customPlaceholder – (Function) (Default: null) Change the auto placeholder with custom string.
• dropdownContainer – (String) (Default: '') Append country dropdown to a specific element.
• excludeCountries – (Array) (Default: undefined) Display all countries except the specified ones.
• formatOnDisplay – (Boolean) (Default: true) Format the input value during initialisation.
• geoIpLookup – (Function) (Default: null) Specify a custom function that looks up the user’s location.
• hiddenInput – (String) (Default: '') Add a hidden input with the given name, and on submit, populate it with the result of getNumber.
• initialCountry – (String) (Default: '') Specify the country code to set the initial country selection. Set it to “auto” to get the user’s location by IP address using geoIpLookup option.
• nationalMode – (Boolean) (Default: true) Allow the user to enter the number without international dial codes.
• placeholderNumberType – (String) (Default: MOBILE) Specify the number type to use for placeholders.
• onlyCountries – (Array) (Default: undefined) Display only these specified countries.
• preferredCountries – (Array) (Default: [ "us", "gb" ]) Specify the countries to appear at the top of the list.
• separateDialCode – (Boolean) (Default: false) Display the country dial code next to the selected flag.
• utilsScript – (String) (Default: '') Specify the path to the libphonenumber script to enable validation/formatting.