Multiple reCAPTCHA Implementation on Same Page [Sample]

Page with multiple forms always need multiple reCAPTCHA for spam validation.

With Google new reCAPTCHA library "I'm not a robot" and Javascript parameter you can simply implement this multiple validation.

                           View Demo  |   Download Code

Needables:

1) Google reCAPCTHA Javascript URL
2) Following Implementation steps.

The difference between automatic reCAPTCHA loading and explicit manual loading is the following script with onload callback funtion.

For Manual (or Multiple reCAPTCHA's in a page)

<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>

You need to mention the following in above URL

• onload = your local javascript callback function
• render = explicit

Multple reCAPTCHA loaded on same Page

Html Form Code

    <div class="container">
      <div class="col-md-6">
          <form class="form-signin" role="form" action="validateform.php" method="POST">
                <div id="status">
                </div>
            <h2 class="form-signin-heading">Please sign in</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
            <div id="recaptcha1"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div>
      <div class="col-md-6">
          <form class="form-signin" role="form" action="validateform.php" method="POST">
                <div id="status">
                </div>
            <h2 class="form-signin-heading">Sign Up Form</h2>
            <label for="inputEmail" class="sr-only">Email address</label>
            <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
            <label for="inputPassword" class="sr-only">Password</label>
            <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
        <div id="recaptcha2"></div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
          </form>
      </div>
    </div> <!-- /container -->

Javscript Code

    <script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
    <script>
      var recaptcha1;
      var recaptcha2;
      var myCallBack = function() {
        //Render the recaptcha1 on the element with ID "recaptcha1"
        recaptcha1 = grecaptcha.render('recaptcha1', {
          'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
          'theme' : 'light'
        });
        
        //Render the recaptcha2 on the element with ID "recaptcha2"
        recaptcha2 = grecaptcha.render('recaptcha2', {
          'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
          'theme' : 'dark'
        });
      };
    </script>

Thats it.