Saturday, December 6, 2014

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.

50 comments:

  1. Thank you for the nice example. The method worked without any problems for me.

    ReplyDelete
  2. it worked, thanks :D

    ReplyDelete
  3. what a nice solution, thanks :)

    ReplyDelete
  4. Awesome. Thanks.

    ReplyDelete
  5. When you verify the second recaptcha, grecaptcha object doesn't fills up with the response, so you can't check if the recaptcha is submitted by doing grecaptcha.getResponse() to validate form before submitting. Any suggestions?

    ReplyDelete
    Replies
    1. hi david i am facing the same problem. did you get any solution?

      Delete
    2. I have the same issue, although it's with grecaptcha.reset() rather than getResponse. I use this with ajax requests so it would be nice to be able to reset the captcha if there was an error on the forum, especially considering the captcha doesn't have a refresh button like the old one did. Considering either using one recaptcha and attempting to display the same one in multiple locations or switch to AYAH since I have been able to use multiple instances at once before, and it still follows the simplicity approach except it's a drag and drop game rather than a simple checkbox.

      Delete
    3. Finally found the answer for this and it seems to be working. Basically when you use the render as above if you want to use the reset or getResponse function, all you need to do is pass the variable the render was assigned to to the first (only) parameter of the function.
      For example, grecaptcha.reset(recaptcha1); would reset the rendered recaptcha on the variable recaptcha1.

      https://developers.google.com/recaptcha/docs/display#js_api

      Delete
    4. You can do like this: grecaptcha.getResponse(recaptcha2)

      This help me

      Delete
    5. Hi,

      I have 2 recaptcha's in one page, first one is correctly validated from google and the second one is not, getting false as a response from google. i have added the below in client side and on submit, i added the code to validate the response from google(which is coming as false for 2nd recaptcha). Please help me out on this.Thanks in advance.


      var recaptcha1;
      var recaptcha2;
      var myCallBack = function () {

      recaptcha1 = grecaptcha.render('recaptcha1', {
      'sitekey': 'site key', //Replace this with your Site key
      'theme': 'light'
      });
      //grecaptcha.reset(recaptcha1);
      //Render the recaptcha2 on the element with ID "recaptcha2"
      recaptcha2 = grecaptcha.render('recaptcha2', {
      'sitekey': 'site key', //Replace this with your Site key

      'theme': 'dark'
      });

      };

      Delete
  6. I'm running Wordpress with a form in my common footer. On certain pages, I have two forms in which your integration works well. However, on the pages where there is only 1 form (footer), it breaks the reCaptcha from appearing. How do I allow it to work when there's only 1 form on the page?

    ReplyDelete
    Replies
    1. The error given on single form page is "Uncaught Type Error: Cannot read property 'children' of null" on recaptcha_en.js which is called in by the api.

      Delete
  7. Thank you very much! I have been looking for a way to do this for several weeks and had given up until a spam storm forced me to search again. Took me about 5 minutes to test it and install it. Now I have another page that has 3 forms - each on a different tab - where I'll be using it next.

    ReplyDelete
  8. Such a nice and straight forward solution, searching for over two hours for the solution. Great article and many many thanks for such a nice solution.

    Thanks & Regards,
    Bhanu

    ReplyDelete
  9. nice...it works fine :) thank you :)

    I have one question...how to make it required with javascript?
    I've tried but only the first one displaying an alert when it's not checked...

    ReplyDelete
  10. Just a heads-up, this does not work if you use Google's recommended and approved reCAPTCHA system.

    ReplyDelete
    Replies
    1. Yes it does, I use this with no issue.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. It's Good but one problem is there when we put validation message if user leave recaptcha code ??

    ReplyDelete
  13. Is there another solution besides rendering both in the callback?

    ReplyDelete
  14. very thanks, mycodde.blogspot

    100% work

    thanks thanks

    ReplyDelete
  15. I have multiple forms and RECAPTCHAs working on a page driven by the Orchard CMS however I cannot get around the problem of multiple verification iframes displaying every time I click the "I'm not a robot" checkbox. Anybody been able to solve a similar issue?

    ReplyDelete
    Replies
    1. Yes! I noticed this yesterday, I click one captcha and both open the puzzle area at the same time, and one of the puzzle areas is a blank white frame.

      Delete
  16. Yes! I noticed this yesterday, I click one captcha and both open the puzzle area at the same time, and one of the puzzle areas is a blank white frame.

    ReplyDelete
  17. It's working. Is there complications when using the same secret key? The second captcha is using the first. Am I correct?

    ReplyDelete
  18. It works but I want to use 3 captchas so I added another var and function but it didnt work.
    Please help.
    Thanks.

    ReplyDelete
  19. hi bro how required captcha it is working the spam msg coming

    ReplyDelete
  20. Really Awesome. Nice Script! Thank you so much

    ReplyDelete
  21. Can some one able to implement no captcha recaptcha in multiple forms in single page. Pls help on it

    ReplyDelete
  22. This comment has been removed by the author.

    ReplyDelete
  23. Very nice...
    but i have one doubt. i am from Brazil and i wold like to used the portuguese language.
    i try change a script src="https://www.google.com/recaptcha/api.js?hl=pt-BRonload=myCallBack&render=explicit" async defer but dont work.

    the language is pt-BR. Anybody can help me?

    ReplyDelete
    Replies
    1. u forgot '&'
      Try this way
      "https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit&hl=pt-BR"

      Delete
  24. I tried to get recaptcha, But i am getting "ERROR for site owner:
    Invalid domain for site key" message.

    ReplyDelete
    Replies
    1. I have generated new site key and i am using that one. still i am facing the same problem

      Delete
  25. very good, thank you so much

    ReplyDelete
  26. Worked like a charm. Thanks mate.

    ReplyDelete
  27. how to validate two captcha with id

    ReplyDelete
  28. I am very inspired to read your post about digital marketing, it will be very helpful for all new learner to learn Digital marketing courses in pune.

    ReplyDelete