javascript - PHP contact form with AJAX and Recaptcha. Error with recaptcha checked

Question

Fairly new to coding so working off of templates for the most part. I've been bashing code and trying different things for several days trying to get my contact form to work with my js/ajax, php, and recaptcha. I've tried different things like changing out the code completely and got it to work, but I would like to get the code I started with to work. I have the recaptcha keys entered correctly and the form does let the user know if a field is missing by echoing the numbers and posting the info on the page, but when the recaptcha is checked and verified, it still says to check the recaptcha. This newbie appreciates all help given. Here's what I have:

HTML

<form method="post" id="contact_form" action="contact.php">
     <input type="text" name="name" id="contact_name" placeholder="Your Name" class="wow fadeInRight">
     <input type="text" name="email" id="contact_email" placeholder="Email" class="wow fadeInRight">
     <input type="text" name="phone" id="contact_phone" placeholder="Phone" class="wow fadeInRight">
     <textarea name="message" id="contact_text" placeholder="Your Message" class="wow fadeInRight"></textarea>
     <br>
     <div class="g-recaptcha" data-sitekey="my public key"></div>
     <br>
     <div id="formresult"> 
        <button type="submit" name="submit" class="bbtn btn-primary wow fadeInRight">Submit</button>
         <button type="reset" name="resetbtn" class="bbtn btn-primary wow fadeInRight"> Reset </button>
     </div>
</form>

PHP

<?php
// Email Setting
//=======================================
$admin_email = "my email";
$from_name   = "from-info";


if ($_SERVER["REQUEST_METHOD"] == "POST") {
    
    $user_name      = strip_tags($_POST['username']);
    $user_email     = strip_tags($_POST['useremail']);
    $user_phone     = strip_tags($_POST['userphone']);
    $comment_text   = strip_tags($_POST['commenttext']);

    if (isset($_POST['g-recaptcha-response'])) {
        $captcha = $_POST['g-recaptcha-response'];
    }

        
    if (!filter_var($user_name)) {
        echo 5;
        exit;
    } elseif (!filter_var($user_email, FILTER_VALIDATE_EMAIL)) {
        echo 6;
        exit;
    } elseif (!filter_var($user_phone)) {
        echo 7;
        exit;
    } elseif (!filter_var($comment_text)) {
        echo 8;
        exit;
    } elseif (empty($captcha)) {
        echo 9;
        exit;
    } else {
        $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret='my_secret_key'&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
        $decoded_response = json_decode($response, true);

        if ($decoded_response['success'] == true)   {
            $to             = "$admin_email"; 
            $subject        = "New Contact Information";
            $message        = "Name: $user_name <br/>";
            $message        .= "Email: $user_email <br/>";
            $message        .= "Phone: $user_phone <br/>";
            $message        .= "Comment: $comment_text <br/>";
            $headers        = "MIME-Version: 1.0
";
            $headers        .= "Content-type: text/html; charset=iso-8859-1
";
            $headers        .= "From:$from_name<$admin_email>";
            $headers        .= "Reply-To: $admin_email
"."X-Mailer: PHP/".phpversion();
            $send           = mail($to, $subject, $message, $headers);
            echo 1;
            exit;
        }
    }
}

script.js

$("#contact_form").on("submit", function (e) {
            e.preventDefault();
            $('#show_contact_msg').html('<div class=gen>Sending Message..</div>');
            var username = $('#contact_name').val();
            var useremail = $('#contact_email').val();
            var userphone = $('#contact_phone').val();
            var commenttext = $('#contact_text').val();
            var formURL = "contact.php";
            var data = {
                username: username,
                useremail: useremail,
                userphone: userphone,
                commenttext: commenttext,
                captcha: grecaptcha.getResponse()
                };
            $.ajax(
                {
                    url: formURL,
                    type: "POST",
                    data: data,
                    success: function (res) {
                        if (res == '1') {
                            $('#show_contact_msg').html('<div class=gen><i class="fa fa-smile-o" aria-hidden="true"></i> Thank you very much, We will notify you when we lunch</div>');
                            $("#contact_form")[0].reset();
                        }
                        if (res == '5') {
                            $('#show_contact_msg').html('<div class=err><i class="fa fa-frown-o" aria-hidden="true"></i> Please enter your Name so I know who you are.</div>');
                        }
                        if (res == '6') {
                            $('#show_contact_msg').html('<div class=err><i class="fa fa-frown-o" aria-hidden="true"></i> Please enter a valid email so I can contact you.</div>');
                        }
                        if (res == '7') {
                            $('#show_contact_msg').html('<div class=err><i class="fa fa-frown-o" aria-hidden="true"></i> Please enter a valid phone number so I can contact you.</div>');
                        }
                        if (res == '8') {
                            $('#show_contact_msg').html('<div class=err><i class="fa fa-frown-o" aria-hidden="true"></i> Please enter your message so I can respond to your question/request.</div>');
                        }
                        if (res == '9') {
                            $('#show_contact_msg').html('<div class=err><i class="fa fa-frown-o" aria-hidden="true"></i> Please complete the Recaptcha.</div>');
                        }
                        if (res == '10') {
                            $('#show_contact_msg').html('<div class=err><i class="fa fa-frown-o" aria-hidden="true"></i> Something went wrong.  Please try again.</div>');
                        }
                    }
                });            
        });

Picture showing recaptcha checked and error message after submit

question from:https://stackoverflow.com/questions/65867692/php-contact-form-with-ajax-and-recaptcha-error-with-recaptcha-checked

Answer 1

Please correct following line, Enter "site-key",which you can get from google-recaptcha account and try again. 
<div class="g-recaptcha" data-sitekey="my public key"></div>

Currently, as per my assumption you get ajax response as 9 for g-recaptch because google-recaptcha-response you got empty. It may be due to invalid site-key identify by google.

if (isset($_POST['g-recaptcha-response'])) {
        $captcha = $_POST['g-recaptcha-response'];
}