How to Add International Phone Input Field Using JavaScript

In this tutorial, you will learn how to create an International Phone Input Field using JavaScript with the intl-tel-input library. This solution supports auto country detection, country flags, dial codes, real-time formatting, and validation, making it perfect for modern contact and registration forms.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>International Phone Number Field</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<!-- intl-tel-input CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
</head>
<body>


<div class="phone-box">
<label for="phone">Phone Number</label>
<input id="phone" type="tel" placeholder="Enter phone number">
<button onclick="getNumber()">Submit</button>
</div>

</body>
</html>

CSS Styling

body {
font-family: Arial, sans-serif;
background: #101010;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}


.phone-box {
max-width: 400px;
background: #fff;
padding: 25px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}


input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid lightgray;
border-radius: 5px;
}


input:focus {
outline: none;
box-shadow: none;
}


button {
margin-top: 15px;
width: 100%;
padding: 12px;
background: #42a5f5;
color: #fff;
border: 2px solid #42a5f5;
font-size: 17px;
font-weight: 700;
border-radius: 6px;
cursor: pointer;
}


button:hover {
background: transparent;
color: #000;
}

JavaScript Initialization

<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"></script>


<script>
const phoneInput = document.querySelector("#phone");


const iti = window.intlTelInput(phoneInput, {
initialCountry: "auto",
separateDialCode: true,
nationalMode: true,
formatOnDisplay: true,
autoPlaceholder: "polite",


geoIpLookup: function (callback) {
fetch("https://ipapi.co/json")
.then(res => res.json())
.then(data => callback(data.country_code))
.catch(() => callback("ru"));
},


utilsScript:
"https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js"
});


function getNumber() {
if (iti.isValidNumber()) {
alert("International: " + iti.getNumber());
} else {
alert("Invalid phone number");
}
}
</script>

Conclusion

Using intl-tel-input, you can easily create a professional international phone input field with minimal code. This solution improves user experience, reduces invalid entries, and works perfectly for global audiences.