202107/07

International Telephone Input With Flags and Dial Codes

International Telephone Input is a useful JavaScript jQuery plugin that turns the standard input into an International Telephone Input with a national flag drop down list.

When clicking the dropdown list, it lists all the countries and their international dial codes next to their flags. Ideal for international visitors of your website.

How to use it:

1. Insert jQuery JavaScript library and the jQuery ccpicker plugin’s files into your web page.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.ccpicker.js"></script>
<link rel="stylesheet" href="css/jquery.ccpicker.css">

Call the plugin to append the Country Code Picker to your input field

<!-- Use as a Vanilla JS plugin -->
<script src="build/js/intlTelInput.min.js"></script> 
<!-- Use as a jQuery plugin --> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="build/js/intlTelInput-jquery.min.js"></script>

International Telephone Input

What is it?

A JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user’s country, displays a relevant placeholder and provides formatting/validation methods.
https://intl-tel-input.com/