In this tutorial, we will add Google reCAPTCHA v3 to a PHP form and submit it without leaving the page, utilizing Ajax. If you have had a contact form or any such form on your website, you know how annoying it is to receive spam contents from bots. Google reCAPTCHA protects you from spam and other automated mistreat. To follow along this tutorial, you need to have some basic knowledge of HTML, jQuery and PHP.
Millions of Fonts, Themes, Graphics: Starting at ONLY $ 16.50 per Month
Web Fonts 8,000+ Fonts
WordPress Themes 1,200+ Themes
Graphic Asset 32,000+ Graphics
Why Google reCAPTCHA v3?
We have all had the frustrating experience of trying to quickly submit some information through a form only to be faced by a Captcha challenge in the end. We’ve had to type in random characters and wondered, “Is that two Vs or a W? ”, “Should I add that space or not? ”.
And then we’ve had to select all the images that have zebra intersecting or bridges is proof that we are humans. Thankfully, these days, a lot of websites have added Google reCAPTCHA v2 which merely displays a checkbox- “I’m not a Robot”.
However, in 2018, Google liberated the next version- reCAPTCHA v3 which doesn’t need any consumer interaction at all. It runs behind the scenes observing the user’s behavior. This version provides us( developers) with a rating that indicates how suspicious an interaction is. We could use that score and prevent spam. Read how it works at Google’s official webmaster blog.
Now let’s learn how to add this is something that a simple form.
Register reCAPTCHA v3 keys
You it is necessary first register your website and get the keys here- https :// www.google.com/ recaptcha/ admin/ establish. Add a label, select reCAPTCHA v3, kind your domain name( s) and submit.
This will generate a “site key” and a “secret key”. Copy both and keep them safe. We will need them soon.
Let’s take a simple contact form with Full name, Email and Message fields
For the sake of simplicity of this tutorial, merely the HTML code is displayed below. For CSS used in the above screenshot, download the full informant code at the end of this tutorial.
Ajax Form Submission
Let’s work on the shape submission using Ajax before we add the reCAPTCHA, for which we need the jQuery library. Load it employing a CDN. Paste this cable before the closing body label in your HTML.
With this code, if you hit “Submit”, you will get a 404 correct displayed because contact.php doesn’t exist yet. Let’s do that next.
11,000+ Icons 20,000+ Illustrations
14,000+ UI& UX Kits
16,000+ Web Templates
Create contact.php. On the server side, we need to validate the data received and send a JSON response. We will integrate reCAPTCHA in a while.
‘success’ =>$ success_output ); // Output needs to be in JSON format echo json_encode ($ output );
Perfect! We have the complete pour of shape submission using Ajax. Now it’s time to integrate reCAPTCHA v3 and you will see how simple it really is, if you carefully follow along.
Patron Side Integration