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.
2 Comments
Nikesh
October 11, 2020 at 8:06 pmCan this be used on a CDN with the php mailing script on a different server than the form hosted .
discussdesk
November 12, 2020 at 9:28 amThis tutorial is really good with an explanation. You can also check another article to add Google reCAPTCHA V3 in PHP contact form with a live demo and can download complete code.
https://www.discussdesk.com/add-google-recaptcha-v3-in-php-contact-form-with-live-demo.htm