HTML Select Country Phone Code List with Flags

Posted Under: HTML5, Select, Snippets on Nov 14, 2021

This is a code snippet for HTML Select country code list with flags. It is based on powerful twilio's API. It is plug and play, everything is hosted on CDN. Its usage is simple, simply add this in the <head> of your web page "head" tag.

<link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.19/css/intlTelInput.css"/>
<script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>

Now add this <input> tag where you wish it to be displayed

<input name="phone" type="text" id="phone"/>

and finally initialize it by this script.

var input = document.querySelector("#phone");
window.intlTelInput(input, {
  separateDialCode: true
});

It should be rendered like this: Now, there is a number of options that can be used to initialize the select dropdown.

var input = document.querySelector("#phone");
window.intlTelInput(input, {
    // show dial codes too
    separateDialCode: true,
    // If there are some countries you want to show on the top.
    // here we are promoting russia and singapore.
    preferredCountries: ["ru", "sg"],
    //Default country
    initialCountry:"sg",
    // show only these countres, remove all other
    onlyCountries: ["ru", "cn","pk", "sg", "my", "bd"],
    // If there are some countries you want to execlde.
    // here we are exluding india and israel.
    excludeCountries: ["in","il"]
});

Complete Code

<html lang="en">
    <head>
        <title>HTML Select Country Phone Code List with Flags</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/css/intlTelInput.css"/>
        <script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    </head>
    <body>

        <input name="phone" type="text" id="phone"/> 

        <script>
            var input = document.querySelector("#phone");
            window.intlTelInput(input, {
                separateDialCode: true,
                excludeCountries: ["in", "il"],
                preferredCountries: ["ru", "jp", "pk", "no"]
            });
        </script>
    </body>
</html>

        Click to Load Comments
    

		HTML Select Country Dropdown List With Flags HTML Select Code snippet for all the countries in the World with thei...
		Simple JavaScript Tabs (Horizontal) 1 Tabs are great to present different pieces of information in same spa...
		Free Simple HTML CSS Login Form Template 1 Download Free HTML & CSS simple and clean login form template. This t...
		Free 360 Product Viewer Using a 360 degree image viewer for products on websites offers numer...
		TypeWriter Effect JavaScript Typing text or typewriter effect is a great and appealing effect. In ...
		CKEditor Example CKEditor 5 is a cutting-edge rich text editor built using JavaScript ...
		Free HLS Player HTML5 HTTP Live Streaming or HLS Player is a media streaming protocol that ...
		PowerShell Get Hash Of All Files In Directory Code Snippet to traverse a folder and calculate hash of each file. Se...

HTML Select Country Phone Code List with Flags

Complete Code

Subscribe YouTube

Related Posts