How to implement Google's Invisible reCAPTCH on my contact form?

[Jynx2120]

I'm trying to implement Google's Invisible reCAPTCH on my contact form. These are the instructions from my Google reCAPTCHA account page.

Adding reCAPTCHA to your site

Site key: Use this in the HTML code your site serves to users. 

6LewMxsUAAAAAA0Cqmgz-5IN6R3Jy3jW72wg4TFf

Step 1: client-side integration - Paste this snippet before the closing < /head > tag on your HTML template: 

<script src='https://www.google.com/recaptcha/api.js'></script>

Paste this snippet at the end of the < form > to create a button protected by the Invisible reCAPTCHA. You will need to create a callback function to handle the result.

 <button
 class="g-recaptcha"
 data-sitekey="6LewMxsUAAAAAA0Cqmgz-5IN6R3Jy3jW72wg4TFf"
 data-callback="YourOnSubmitFn">
 Submit
 </button>

The Invisible reCAPTCHA documentation site provides more details and advanced configuration options.
 
Step 2: Server side integration - When your users submit the form where you integrated reCAPTCHA, you'll get as part of the payload a string with the name "g-recaptcha-response". In order to check whether Google has verified that user, send a POST request with these parameters:

URL: https://www.google.com/recaptcha/api/siteverify

secret (required) - xxxxxxxxx (Keeping it a secret)

response (required) - The value of 'g-recaptcha-response'.

remoteip (Optional) - The end user's ip address.

The reCAPTCHA documentation site describes more details and advanced configurations.

------------------------------------

What I have done so far... 

Step 1. I have completed step one by placing the script in before the end of the </head> tag and I **DO** see the reCAPTCHA badge on my page. However, I don't know if I did the button correctly.

This is my submit button before placing Google's code into it and it works just fine as normal.

<button class="submit_btn btn btn-mod btn-medium btn-round" id="submit_btn">Submit Message</button>

This is the submit button after I integrated Google's code. I'm not sure if it's correct I just guessed where things should go. It seems to work but I'm not sure.

<button class="g-recaptcha submit_btn btn btn-mod btn-medium btn-round" data-sitekey="6LewMxsUAAAAAA0Cqmgz-5IN6R3Jy3jW72wg4TFf" data-callback="YourOnSubmitFn" id="submit_btn">Submit Message</button>

The data-callback="YourOnSubmitFn" I didn't change from Google's example because I don't know what to do from here.

Step 2. This is where I have zero idea as in what to do next. I assume this has something to do with either PHP and/or Javascript? I don't know how to create a callback function to handle the result. I think I have to place something into my javascript file (contact-form.js) and my PHP file (contact_me.php) but I am unfamiliar with both and not sure where to place anything.

This is my contact_me.php file...

   

<?php    
   
    if ($_POST) {
    $to_Email = "ri...@knoxdesigns.co"; //Replace with recipient email address
    $subject = 'Message from website ' . $_SERVER['SERVER_NAME']; //Subject line for emails
   
    //check if its an ajax request, exit if not
    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
   
    //exit script outputting json data
    $output = json_encode(
    [
    'type' => 'error',
    'text' => 'Request must come from Ajax',
    ]
    );
   
    die($output);
    }
   
    //check $_POST vars are set, exit if any missing
    if (!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"])) {
   
    $output = json_encode(['type' => 'error', 'text' => 'Input fields are empty!']);
   
    die($output);
    }
   
    //Sanitize input data using PHP filter_var().
    $user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
    $user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
    $user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
    $user_Message = str_replace("\&#39;", "'", $user_Message);
    $user_Message = str_replace("&#39;", "'", $user_Message);
   
    //additional php validation
    if (strlen($user_Name) < 4) // If length is less than 4 it will throw an HTTP error.
    {
    $output = json_encode(['type' => 'error', 'text' => 'Name is too short or empty!']);
    die($output);
    }
   
    if (!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
    {
    $output = json_encode(['type' => 'error', 'text' => 'Please enter a valid email!']);
    die($output);
    }
   
    if (strlen($user_Message) < 5) //check emtpy message
    {
    $output = json_encode(['type' => 'error', 'text' => 'Too short message! Please enter something.']);
    die($output);
    }
   
    //proceed with PHP email.
    $headers = 'From: ' . $user_Email . '' . "\r\n" .
              'Reply-To: ' . $user_Email . '' . "\r\n" .
              'X-Mailer: PHP/' . phpversion();
   
    $sentMail = @mail($to_Email, $subject, $user_Message . "\r\n\n" . '-- ' . $user_Name . "\r\n" . '-- ' . $user_Email, $headers);
   
    if (!$sentMail) {
    $output = json_encode(['type' => 'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.']);
    die($output);
    } else {
    $output = json_encode(['type' => 'message', 'text' => 'Hi ' . $user_Name . '! Thank you for your email']);
    die($output);
    }
    }
   
    ?>

And this is my contact-form.js file

$(document).ready(function() {
    $("#submit_btn").click(function() {
        var user_name = $('input[name=name]').val();
        var user_email = $('input[name=email]').val();
        var user_message = $('textarea[name=message]').val();
        var proceed = true;
        if (user_name == "") {
            $('input[name=name]').css('border-color', '#e41919');
            proceed = false;
        }
        if (user_email == "") {
            $('input[name=email]').css('border-color', '#e41919');
            proceed = false;
        }
        if (user_message == "") {
            $('textarea[name=message]').css('border-color', '#e41919');
            proceed = false;
        }
        if (proceed) {
            post_data = {
                'userName': user_name,
                'userEmail': user_email,
                'userMessage': user_message
            };
            $.post('contact_me.php', post_data, function(response) {
                if (response.type == 'error') {
                    output = '<div class="error">' + response.text + '</div>';
                } else {
                    output = '<div class="success">' + response.text + '</div>';
                    $('#contact_form input').val('');
                    $('#contact_form textarea').val('');
                }
                $("#result").hide().html(output).slideDown();
            }, 'json');
        }
        return false;
    });
    $("#contact_form input, #contact_form textarea").keyup(function() {
        $("#contact_form input, #contact_form textarea").css('border-color', '');
        $("#result").slideUp();
    });
});

I think all the files need to make this work are shown. The only other thing for me to do after all the code is placed properly is to create a class for the callback, I think.

Any help would be GREATLY APPRECIATED. I have tried solving this on my own now for days but can't figure it out.