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

gistfile1.txt

UPDATED 28/04/2024
__________________

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. Create text field and set it as TEL: The form field name for phone is: phone, and a css classname; phone-class
2. Create text field set is as Text for Country. The form field name is: 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. And add your token key here too: fetch('https://ipinfo.io?token=YOUR API KEY')
6. Dont forget to change the page slug name. In my case its : contact
_________________________________________________________________________


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

    // Ensure that the client IP address is sanitized before use
    $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(); // Terminate the execution of the script
}

function include_intl_tel_input_scripts() {
    // Check if the current page slug is 'contact'
    global $post;
    if (is_a($post, 'WP_Post') && $post->post_name === 'contact') {
        ?>
        <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: 30px !important;
                padding: 0px 10px 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-style: solid;
                border-color: #bdc3c7;
                border-width: 1px;
            }
        </style>
        <script>
            jQuery(document).ready(function($) {
                var input = document.querySelector("#phone");
                if (input) {
                    input.removeAttribute('id'); // Changed ID to class for better CSS management
                    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;
                            // Also store the ISO code in a hidden field or use it as needed
                            document.getElementById('country_iso').value = iti.getSelectedCountryData().iso2;
                        }
                    }

                    input.addEventListener('countrychange', updateCountryField);
                    updateCountryField(); // Ensure the country field is updated on load
                    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');

Is it also possible to output whether the IP is a VPN on another JFB field? I have tried reworking using ChatGPT to no avail.