Jetformbuilder form, A custom code for auto detect country and land code phone.

gistfile1.txt

UPDATED
__________________

Jetformbuilder form, A custom code for auto detect country and land code phone.
This code works for all Jetformbuilder.

The provided custom code is a PHP function for WordPress that adds international telephone input functionality to a website. 
It includes CDN links for the necessary CSS and JavaScript files, applies custom styles for the phone input field, 
and uses jQuery for dynamic behavior. The JavaScript part initializes the international telephone input with features 
like auto-detecting the user's country using their IP address and updating the input field with the full phone number 
including the country dial code. The function is then attached to WordPress's footer, ensuring it loads on every page.

Create two field in Jetformbuilder, and a CSS classname.
1. Phone field by name: phone, and a css classname; phone-class
2. Country field by name: country
3. Create a token key for free: https://ipinfo.io/
4. Add your token key here : $api_key = 'YOUR TOKEN KEY'; // Replace with your actual API key
5. Add your page slug name.



function get_client_country() {
    $api_key = 'YOUR TOKEN KEY'; // Replace with your actual API key

    $client_ip = $_SERVER['REMOTE_ADDR']; // Get the client IP address
    $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);
        wp_send_json_success($data['country']);
    }

    wp_die(); // Terminate the execution of the script
}

function include_intl_tel_input_scripts() {
    // Check if the current page slug is 'YOUR SLUG PAGE NAME'
    global $post;
    if (is_a($post, 'WP_Post') && $post->post_name === 'YOUR SLUG PAGE NAME') {
        ?>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
        <style>
            .iti__selected-flag {
                border-radius: 6px !important;
                padding: 0px 14px 0 14px !important;
            }
            .phone-class {
                width: 100% !important;
               
            }
            .jet-form-builder .field-type-text-field:nth-child(9) .jet-form-builder__field-wrap {
                border-radius: 6px !important;
                border-style: solid;
                border-color: #bdc3c7;
                border-width: 1px;
            }
        </style>
        <script>
            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=e34cf8ab3541c7')
                                .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();
                    });
                }
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'include_intl_tel_input_scripts');