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

Thank you for this code.

This code is not working properly.
It is shown in the footer of the web site

If anyone knows please help

If anyone knows please help

Hello,

Sorry for the delay; I haven't been active in the Facebook group. I have now updated the code today, and it works—I have tested it on two different websites. It's important that you follow the instructions I've written in the description, and do not forget to add your API KEY in two places in the code, as noted in the description.

Don't forget to add the code as a PHP snippet to your snippet plugins. Save it as "Everywhere," and it should work. Once you have tested it, please comment back here.

Error in Cors

Hi, I am using the new version of the code and I have an error in the footer. Do you know if I am doing something wrog? My web

I fixed it was my fault. In the plugin WP Code I have to check PHP fragment.

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.