Country List with Flag or Phone Code


1. Include the required intlTelInput.css in the head section of your page.

<link rel="stylesheet" href="">

2. Create a standard telephone input field.

<input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">


3. Include jQuery javascript library and jQuery International Telephone Input plugin at the bottom of your page.


<script src=""></script>
<script src=""></script>


4. Initialize the plugin and we’re done.



5. Default options.

// typing digits after a valid number will be added to the extension part of the number
allowExtensions: false,

// automatically format the number according to the selected country
autoFormat: true,

// if there is just a dial code in the input: remove it on blur, and re-add it on focus
autoHideDialCode: true,

// add or remove input placeholder with an example number for the selected country
autoPlaceholder: true,

// default country
defaultCountry: "",

// geoIp lookup function
geoIpLookup: null,

// don't insert international dial codes
nationalMode: true,

// number type to use for placeholders
numberType: "MOBILE",

// display only these countries
onlyCountries: [],

// the countries at the top of the list. defaults to united states and united kingdom
preferredCountries: [ "us", "gb" ],

// specify the path to the libphonenumber script to enable validation/formatting
utilsScript: ""


6. Public methods.

// destroy

// Get the extension part of the current number
var extension = $("#demo").intlTelInput("getExtension");

// Get the current number in the given format
var intlNumber = $("#demo").intlTelInput("getNumber");

// Get the type (fixed-line/mobile/toll-free etc) of the current number.
var numberType = $("#demo").intlTelInput("getNumberType");

// Get the country data for the currently selected flag.
var countryData = $("#demo").intlTelInput("getSelectedCountryData");

// Get more information about a validation error.
var error = $("#demo").intlTelInput("get<a href="">Validation</a>Error");

// Vali<a href="">date</a> the current number
var isValid = $("#demo").intlTelInput("isValidNumber");

// Load the utils.js script (included in the lib directory) to enable formatting/validation etc.
$("#demo").intlTelInput("loadUtils", "lib/libphonenumber/build/utils.js");

// Change the country selection
$("#demo").intlTelInput("selectCountry", "gb");

// Insert a number, and update the selected flag accordingly.
$("#demo").intlTelInput("setNumber", "+44 7733 123 456");


Live Demo



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s