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

Web Fonts 8,000+ Fonts

WordPress Themes

WordPress Themes 1,200+ Themes

Graphic Assets

Graphic Asset 32,000+ Graphics

DOWNLOAD NOW Envato Elements

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? ”.

Google Recaptcha

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”.

Google reCAPTCHA v2

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.

Google reCAPTCHA v3

This will generate a “site key” and a “secret key”. Copy both and keep them safe. We will need them soon.

HTML Form

Let’s take a simple contact form with Full name, Email and Message fields

Contact Form without Google reCAPTCHA

The HTML

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.

Full Name*

Email*

Message*

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 Envato Elements

DOWNLOAD NOW

14,000+ UI& UX Kits

16,000+ Web Templates

PHP

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.

“$ error_output,

‘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

First step is to load the JavaScript API with your sitekey. Paste this below your jQuery CDN link.