Add Google reCaptcha v3 to HTML Form with PHP

Last Updated on March 8, 2023 by Roshan Parihar

Learn how to add Google reCaptcha V3 to HTML form with PHP. It is the latest version that makes your forms secure from spam and bot attacks.

The previous version of Google reCaptcha is V2 which uses the checkbox to identify humans and bots. However, this system was replaced with the invisible captcha in the latest version V3.

Add Google reCaptcha v3 to HTML Form with PHP

The latest version V3 does not require users’ interaction with the captcha to confirm that they are not robots. It returns the score of the users based on their interaction with your website. After that, you check the score to make your form secure from spam and attacks.

In this post, you will learn a step-by-step process on how to integrate Google reCaptcha V3 into your forms. You will also learn to send emails after getting success response from reCaptcha.

So, let’s get started.

How to Add Google reCaptcha v3 to HTML Form with PHP

Here are the step-by-step process on how to add Google reCaptcha V3 to HTML form with PHP:-

Step 1: Generate Google reCaptcha V3 API Keys

You have to first generate the Google reCaptcha V3 API keys to make the captcha work on your website forms. To get the API keys, visit the Google reCaptcha admin panel and log in to your Google account.

After that, you will get a settings page where you have to make the Captcha settings as given below:

  • Label: Enter a label for the Captcha. Use a different label for each captcha to easily identify them.
  • reCaptcha type: Select version 3 (reCaptcha v3)as we have to use the Google reCaptcha V3.
  • Domains: Enter a domain name here without https and press enter to make it selected. This should be the domain where you want to use Google reCaptcha.
  • Owners: Your Google email address already showing selected here.

After that, click all the checkboxes to agree that you accept reCaptcha terms of service and get an alert as an owner. Now, click the ‘Submit’ button to save your settings.

google recaptcha enter setting details click submit

You will get your Google reCaptcha API Site key and Secret key as shown in the image below.

google recaptcha get site keys How to Use Contact Form 7 Plugin in WordPress

Now, let’s move further to use these keys and add the Google reCaptcha to your website HTML forms.

Step 2: Bind Google reCapcha V3 to Your HTML Form Button

Binding reCaptcha to your form button is the easiest way to add the Google reCaptcha widget to your forms. You have to just add the javascript API and a callback function to the <head> section of your page.

The Javascript library API is given below.

The function is required to handle the reCaptcha token submission.

Now, to bind the Google reCaptcha widget to your form button, you just have to add some data attributes to it as given below. You just have to add your site key in the data-sitekey attribute of the button.

The Google reCaptcha widget will display at the bottom right corner of the screen where you have the form on your website.

Let’s create an HTML structure of the form in the next step and add the above button to the form.

Step 3: Create HTML Form Structure with reCaptcha Submit Button

To add Google reCaptcha version 3, you have to create an HTML form structure of the form. Let’s take a simple example of a contact form that requires a few important fields like Name, Email, and Message. You can read our post on the simple HTML contact form. However, you just need to change the button with the previous step button of Google reCaptcha.

Below is the simple HTML form code with a button element that contains useful attributes required to display Google reCaptcha widget.

Also, change the attribute data-sitekey with your obtained Google reCaptcha API keys in the 1st step above. The site key should be placed in the <button> element.

If you want to make your design looks better to your website, you have to add some CSS code as shown in the below code. It can change the appearance of your form as shown in the image below.

You will get the first lookup at the form as shown in the image below. It also displays the Google reCaptcha widget at the bottom right corner of the screen.

Add Google reCaptcha v3 to HTML Form with PHP

Let’s add some PHP code to verify the response of the Google reCaptcha and send emails.

Step 4: Add PHP Code to Verify reCaptcha and Send Emails

To verify Google reCaptcha, you have to first store its secret key in a PHP variable, After that, get all the users entered data using the global variable $_POST.

Now, to validate the email address, you can use the regular expression and preg_match() to match the user’s entered email address.

You also have to use the $_POST global variable to get the Google reCaptcha responsive with g-recaptcha-response and g-recaptcha-response. After the response is validated, you have to use the curl request to check and verify the response is valid.

When the curl response is a success, your form will get submitted and you can use the PHPMailer to send the form data via email. See the PHP code given below to learn the method.

Google reCaptcha is the most useful API to make your forms secure from bot attacks without the need to interact with them. The old version V2 require you to click the checkbox to identify human and bots. However, the latest version V3 does not require clicking any checkbox or any other interaction with the widget.

You May Also Like to Read

Join the Conversation

1 Comment

  1. Thanks! This is definately the most clear tutorial and simple one to use reCaptcha v3! Great job!

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.