How to Auto-Detect Country and Phone Dial Code in JetFormBuilder
How to Auto-Detect Country and Phone Dial Code in JetFormBuilder

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.


What This Code Does

  • Adds an international telephone input to your form.
  • Auto-detects the visitor’s country using their IP address.
  • Inserts the correct country dial code into the phone field.
  • Updates a second field with the detected country name.
  • Uses WordPress hooks so the scripts load only where needed (like your Contact page).


Create Fields in JetFormBuilder

Inside your JetFormBuilder form:

  1. Phone Field
    • Type: Text → set as TEL
    • Field name: phone
    • CSS class: phone-class
  2. Country Field
    • Type: Text
    • Field name: country

👉 These two fields will work together to capture both the number and the detected country.


Get Your Free API Key

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:

  • In PHP ($api_key = 'YOUR TOKEN KEY';)
  • In JavaScript (fetch('https://ipinfo.io?token=YOUR API KEY'))


Add the Custom Code

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');

				
			

Change the Page Slug

In the code, look for:

if ($post->post_name === 'contact')

Replace contact with the slug of the page where your form lives.

Final Result

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.

Faqs