If you’re using JetFormBuilder to build forms in WordPress, you may want your phone field to automatically detect a visitor’s country and apply the correct international dialing code. This not only improves user experience but also ensures you collect properly formatted phone numbers for leads or customers.
In this guide, I’ll walk you through a working solution using custom PHP + JavaScript code that integrates seamlessly with JetFormBuilder.
Inside your JetFormBuilder form:
phonephone-classcountry👉 These two fields will work together to capture both the number and the detected country.
To detect user location by IP, sign up at ipinfo.io and grab a free token.
You’ll need to replace it in two places in the code:
$api_key = 'YOUR TOKEN KEY';)fetch('https://ipinfo.io?token=YOUR API KEY'))Add this code to your functions.php (child theme) or a custom plugin:
function get_client_country() {
$api_key = 'YOUR API KEY'; // Replace with your actual API key
$client_ip = filter_var($_SERVER['REMOTE_ADDR'], FILTER_VALIDATE_IP);
if (!$client_ip) {
wp_send_json_error('Invalid IP address');
wp_die();
}
$response = wp_remote_get("https://ipinfo.io/{$client_ip}?token=$api_key");
if (is_wp_error($response)) {
wp_send_json_error('Failed to retrieve country info');
} else {
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (!isset($data['country'])) {
wp_send_json_error('Country information not available');
} else {
wp_send_json_success($data['country']);
}
}
wp_die();
}
function include_intl_tel_input_scripts() {
global $post;
if (is_a($post, 'WP_Post') && $post->post_name === 'contact') { // Change 'contact' to your form page slug
?>
.iti__selected-flag {
border-radius: 30px !important;
padding: 0 10px !important;
}
.phone-class {
width: 100% !important;
border: none !important;
}
.jet-form-builder .field-type-text-field:nth-child(9) .jet-form-builder__field-wrap {
border-radius: 30px !important;
border: 1px solid #bdc3c7;
}
jQuery(document).ready(function($) {
var input = document.querySelector("#phone");
if (input) {
input.removeAttribute('id');
input.classList.add('phone-class');
var iti = intlTelInput(input, {
initialCountry: "auto",
separateDialCode: true,
geoIpLookup: function(callback) {
fetch('https://ipinfo.io?token=YOUR API KEY')
.then(response => response.json())
.then(data => callback(data.country))
.catch(() => callback('US'));
},
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
});
function updateCountryField() {
var countryInput = document.getElementById('country');
if (countryInput) {
countryInput.value = iti.getSelectedCountryData().name;
}
}
input.addEventListener('countrychange', updateCountryField);
updateCountryField();
input.addEventListener('countrychange', function() {
input.value = iti.getNumber();
});
input.addEventListener('change', function() {
input.value = iti.getNumber();
});
}
});
<?php
}
}
add_action('wp_footer', 'include_intl_tel_input_scripts');
In the code, look for:
if ($post->post_name === 'contact')
Replace contact with the slug of the page where your form lives.
When users type their phone number, the system automatically applies the correct country code. A second field fills in the detected country name. Numbers are stored in full international format (e.g., +44 7123 456789). This makes your JetFormBuilder forms smarter and ensures you always capture accurate international phone data.
Powered by Webspires © Boost My Croco 2025. All Rights Reserved.