Today, we're gonna learn How to implement reCaptcha using HTML and JavaScript in our website.



1. Create a new site in reCaptcha

First of all, visit recaptcha admin console at https://www.google.com/recaptcha/admin/


Now click on "+" icon and register new site. Make sure reCaptcha type is set to reCaptcha v2 and "I am not a robot" checkbox.
Then create site.

2. Write the code

Open a text editor, like notepad, I recommend using Visual Studio code on Windows, Linux, Mac or Acode on Android.

Type in or copy paste this code:

<html>

  <head>

    <title>reCAPTCHA demo: Simple page</title>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

  </head>

  <body>

    <form action="?" method="POST">

      <div data-callback="onSuccess" class="g-recaptcha" data-sitekey="your_site_key"></div>

      <br/>

      

    </form>

  </body>

</html>
Replace your_site_key with the site key you got from reCaptcha website.

Now, the captcha should be working. But we want to detect when user has successfully completed captcha. Next, we'll do it.

3. Detecting when user has completed captcha

It's kinda simple. Just insert this line in the code:

      <script>

        var onSuccess = function(response) {

          setTimeout(function() {

            parent.location.href = "https://nicesapien.blogspot.com";

          }, 800);

        };</script>

      <br/>
When verification is complete, nicesapien.blogspot.com will open.