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 entering the phone numbers. This telephone input will display the respective flag.
By IP lookup, the input will detect the user’s country and automatically sets an example number in a format for that country.
The jQuery telephone input plug-in can also handle phone number extensions while it also provides 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 Intl 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:
The simple markup for this demo:
<h3>A demo of jQuery International Telephone Input</h3>
<input id="jquery-intl-phone" type="tel">
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 firstname.lastname@example.org 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.
See the demo and code online:
You may see and get the complete code form the demo page.
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:
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.