PHP Contact Form with Google reCAPTCHA V3

Google reCaptcha is a security service that prevents bots from sending you automatic emails on your public forms, reCaptcha used for human verification owned by Google. Google reCAPTCHA v3 is invisible you won’t see it in your forms create your form without adding a captcha checkbox it’s integrate with your submit button.

Step 1:

Create your captcha app from here: https://www.google.com/recaptcha/admin/create

Once you create your app it will give you Site Key and Secret Key.

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

Use the secret key for communication between your site and reCAPTCHA.

Now create HTML Form available here

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="container">
    <div class="row justify-content-center">
		<div class="col-12 col-md-8 col-lg-6 pb-5">


                    <!--Form with header-->

                    <form action="send.php" method="post" id="submitForm">
                        <div class="card border-primary rounded-0">
                            <div class="card-header p-0">
                                <div class="bg-info text-white text-center py-2">
                                    <h3><i class="fa fa-envelope"></i> Contact Form</h3>
                                    <p class="m-0">Google reCaptcha Example</p>
                                </div>
                            </div>
                            <div class="card-body p-3">

                                <!--Body-->
                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-user text-info"></i></div>
                                        </div>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group mb-2">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-envelope text-info"></i></div>
                                        </div>
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
                                    </div>
                                </div>

                                <div class="text-center">
                                <button data-sitekey="reCAPTCHA_site_key" data-callback="onSubmit" data-action="submit"  class="g-recaptcha btn btn-info btn-block rounded-0 py-2">Send</button>	
                                    
                                </div>
                                <div id="message"></div>
                            </div>

                        </div>
                    </form>
                    <!--Form with header-->


                </div>
	</div>
</div>

This button code will submit the form through JavaScript

<button data-sitekey="reCAPTCHA_site_key" data-callback="onSubmit" data-action="submit" class="g-recaptcha btn btn-info btn-block rounded-0 py-2">Send</button>

You have to add your site key in the place of reCAPTCHA_site_key

Load JavaScript API

<!-- captcha -->
<script src="https://www.google.com/recaptcha/api.js"></script>

Load jQuery

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Callback function to handle form

<script>
    function onSubmit(token) {
        var formData = $("#submitForm").serialize();
        $(".has-error").removeClass("has-error");
        if ($("#name").val() == "")
        {
            $("#message").html("Enter Name.");
            return false;
        }
        if ($("#email").val() == "")
        {
            $("#message").html("Enter Email.");
            return false;
        }
        $.ajax({
            url: "send.php",
            type: "POST",
            data: formData,
            success: function (data) {
                $("#submitForm")[0].reset();
                // console.log(data)
                $("#message").html(data)
            },
            error: function() {
                alert("error handling here");
            }
        });
    }
</script>

This JavaScript function submits your data to send.php.

<?php
$captchaSecretKey = "Your_Secret_key";
//reCAPTCHA validation
if (isset($_POST['g-recaptcha-response'])) {

	$postData = array(
		'secret' => $captchaSecretKey,
		'response' => $_POST['g-recaptcha-response']
    );
    $url = "https://www.google.com/recaptcha/api/siteverify";

	$curl = curl_init();
	curl_setopt($curl, CURLOPT_URL, $url);
	curl_setopt($curl, CURLOPT_POST, true);
	curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($postData));
	curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
	$serverResponse = curl_exec($curl);

	if(json_decode($serverResponse,true)['success'] == 1)
	{
		echo '<b>Captcha</b> Validated!';
		exit;
	}
	else
	{
		echo '<b>Captcha</b> Validation Required!';
		exit;
	}	
}
?>

Your_Secret_key replace with your Secret Key

This file verifies your submitted captcha and responds accordingly.