1. Home
  2. /
  3. Web Design & Development
  4. /
  5. Captcha
  6. /
  7. Want to use google ReCaptcha on your Website? here is how you can do so

Want to use google ReCaptcha on your Website? here is how you can do so

Want to use google recaptcha on your Website here is how you can do so

Introduction

In this post I am going to describe the steps you can apply in order to install and configure google captcha on your website.

Source: https://www.google.com/recaptcha/intro/index.html

Install and Configure Google ReCaptcha

You need to have a google account in order to use Google ReCaptcha. Create an account if you don’t have one. And, after you’re done with registering your google account follow the below steps.

Install and Configure google recaptcha
Install and Configure Google ReCaptcha

Step 1: Login into a google account

Step 2: Click on the below link or copy-paste it into a new browser tab

https://www.google.com/recaptcha/admin

Step 3: On the webpage https://www.google.com/recaptcha/admin, you will have to register your website.

Please see the below image for clarification.

Click on the ‘+’ icon and enter your website details.

Now, you will need to enter a label/title, select captcha type (select v3 or v2) and enter your domain name, accept terms, and notification and click on submit button to proceed.

As soon as all details are validated, you will get the “site” key for the client end and the “secret” key for server end verification.

If you have a WordPress website with a Contact Form 7 plugin or any other plugin, you can copy-paste your site and secret key in the plugin configuration and you’re done.

The below steps are for custom integration.

How to do a custom integration?

Step 1: Client-Side Integration

a. Paste this snippet in the <head> or before the closing of <body> tag in your HTML template:

<script src='https://www.google.com/recaptcha/api.js'></script>

b. Paste this snippet at the end of the contact form or before the form submit button.
This is generally placed where you would like the captcha to appear (if its a Google ReCaptcha v2)

<div class="g-recaptcha" data-sitekey="XXXXXXXXXXX"></div>

Detailed description can be found here: https://developers.google.com/recaptcha/

Step-2: Server Side Integration

When your users submit the form where you have integrated reCAPTCHA, you’ll get it as part of the payload a string with the name “g-ReCaptcha-response”.

a. secret (required)
b. response (required)
c. remoteip

Detailed description can be found here :

https://developers.google.com/recaptcha/docs/verify

PHP Example Source Code: https://github.com/google/recaptcha

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now