Huzaifa Rasheed

Huzaifa Rasheed

Software Engineer


Add Google reCAPTCHA v2 to plain HTML

Posted on February 13, 2022

Repost of

What is it?

A CAPTCHA is a test that helps to tell the difference between a bot and a human.

The reCAPTCHA is Google’s implemenation of a CAPTCHA. Its very easy to integrate, without any third party libraries.

What’s The Purpose?

A reCAPTCHA can keep malicious software/bots from engaging in abusive activities on your website while allowing legitimate users access to your site.

How to Integrate?

We will be using the v2 version.

1. Create a site key

You can create a site key from Google reCAPTCHA Admin Page.

You also will need to add a site domain, where you would deploy the site. For testing you can add localhost and use the loopback address ( or use a key from reCAPTCHA automated tests guide. One of those keys is


which we will use in our example.

2. Add Widget to Markup

The only thing we will need to add to our HTML is


this can be added to a form or used without one, depending on the use case. Source

We will also need to add a cdn link to the head tag.

<script src="" async defer>

We can listen to callbacks from the widget and register our own handlers.


these callbacks can be used to validate or invalidate our form or whatever we want to do.

I made a simple form that submits successfully when the reCAPTCHA validates successfully, its here. I also added some basic styling to have a decent look and feel.

Hope this helps you in your Projects. Thanks for reading 😉.