<tutorialjinni.com/>

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>


imgae