The telephone input with flags and international codes
The intl-tel-input is a jQuery-based plug-in that you may use with any input in your forms that enables users to enter phone numbers. This telephone input will display the respective flag.
By IP lookup, the input will detect the user’s country and automatically set an example number in a format for that country.
The jQuery telephone input plug-in can also handle phone number extensions while also providing validation with error types.
In the following section, you can see online demos along with how to set up this cool plug-in on your website.
A demo of telephone input with flags and international codes
The process is quite simple. You need to create an input type “tel” with an ID and initiate the plug-in in jQuery code.
Have a look at this demo where no other options are used in jQuery except initiating the plug-in. So, the input telephone is simple with flags without IP lookup:
Online demo and code
The simple markup for this demo:
<h3>A demo of jQuery International Telephone Input</h3> <form> <input id="jquery-intl-phone" type="tel"> <button type="submit">Proceed</button> </form>
The script:
<script>
$("#jquery-intl-phone").intlTelInput({
});
</script>
For this simple telephone input with flags, you only need to include the intlTelInput.js plug-in file. You may download it from the Github website (Credit: jackocnr).
Note: Make sure that you adjust the path in the intlTelInput.css file for flags.png and flags@2x.png files, otherwise, flags will not appear.
Get the complete code from the demo page including all dependency files, markup, and script.
A demo with IP lookup to display visitor’s country flag on load
As mentioned earlier, the plug-in has ability to lookup the user’s IP and show the respective flag from where the user is landed to your web page. For that, you need to set the initialCountry: auto and use the callback function in geoIpLookup option.
Complete code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/intlTelInput/intlTelInput.css">
<link rel="stylesheet" href="css/intlTelInput//demo.css">
</head>
<body>
<h1>A demo with IP lookup</h1>
<form style="margin-left:150px;">
<input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/intlTelInput/intlTelInput.js"></script>
<script>
$("#mobile-number").intlTelInput({
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
utilsScript: "../../build/js/utils.js" // just for formatting/placeholders etc
});
</script>
</body>
</html>
Output:
A demo of showing only EU countries
You may use the onlyCountries option in the jQuery code for filtering the countries in the dropdown. In this demo, the telephone dropdown is limited to EU countries only:
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/intlTelInput/intlTelInput.css">
<link rel="stylesheet" href="css/intlTelInput//demo.css">
</head>
<body>
<h1>A demo with EU countries</h1>
<form style="margin-left:150px;">
<input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/intlTelInput/intlTelInput.js"></script>
<script>
$("#mobile-number").intlTelInput({
onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk",
"ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv",
"li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro",
"ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"]
});
</script>
</body>
</html>
You can see, the country codes are specified in the onlyCountries option in jQuery code. You may filter only a few countries as per requirement.
There are quite a few other options available as using this awesome plug-in.