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.

92 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
  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
  29. Both recaptcha not displaying. Can any one help me?

    ReplyDelete
  30. I got it. Did small mistake.

    ReplyDelete
  31. What about invisible recaptcha?

    ReplyDelete
  32. Thank you so much! For a non-coder, this was a lifesaver.

    ReplyDelete
  33. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.

    selenium Training in Chennai

    amazon web services Training in Chennai

    rpa Training in Chennai

    ReplyDelete
  34. Thank you for taking the time and sharing this information with us. It was indeed very helpful and insightful while being straight forward and to the point.

    java training in marathahalli | java training in btm layout

    java training in jayanagar | java training in electronic city

    java training in chennai | java training in USA

    selenium training in chennai

    ReplyDelete
  35. Really very nice blog information for this one and more technical skills are improve,i like that kind of post.
    python training in pune
    python online training
    python training in OMR

    ReplyDelete
  36. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.
    Devops training in velachery
    Devops training in annanagar
    Devops training in sholinganallur

    ReplyDelete
  37. You’ve written a really great article here. Your writing style makes this material easy to understand.. I agree with some of the many points you have made. Thank you for this is real thought-provoking content
    Blueprism training in marathahalli

    Blueprism training in btm

    Blueprism online training

    ReplyDelete
  38. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 

    angularjs Training in chennai
    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    angularjs-Training in velachery

    ReplyDelete
  39. Howdy, would you mind letting me know which web host you’re utilizing? I’ve loaded your blog in 3 completely different web browsers, and I must say this blog loads a lot quicker than most. Can you suggest a good internet hosting provider at a reasonable price?
    Amazon Web Services Training in OMR , Chennai | Best AWS Training in OMR,Chennai


    Amazon Web Services Training in Tambaram, Chennai|Best AWS Training in Tambaram, Chennai

    ReplyDelete
  40. Hi, Your post is quite great to view and easy way to grab the extra knowledge. Thank you for your share with us. I like to visit your site again for my future reference.
    SEO Training in Chennai
    SEO Training Center in Chennai
    SEO Institutes in Chennai
    SEO Course Chennai
    SEO Training near me

    ReplyDelete
  41. Excellent tutorial buddy. Directly I saw your blog and way of teaching was perfect, Waiting for your next tutorial.
    best rpa training institute in chennai | rpa training in velachery | rpa training in chennai omr

    ReplyDelete
  42. Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work

    DevOps is currently a popular model currently organizations all over the world moving towards to it. Your post gave a clear idea about knowing the DevOps model and its importance.

    Good to learn about DevOps at this time.


    devops training in chennai | devops training in chennai with placement | devops training in chennai omr | devops training in velachery | devops training in chennai tambaram | devops institutes in chennai | devops certification in chennai | trending technologies list 2018

    ReplyDelete
  43. Your way of approach on this increase the curosity for this topic. Requesting you to please sharing such type of information on Blueprism too beacuse many of people also searching such a great information on Blueprism too.
    Thanks and Regards,
    Blue prism training in chennai
    Best Blue prism training in chennai
    Blue prism training cost in chennai

    ReplyDelete
  44. I think things like this are really interesting. I absolutely love to find unique places like this. It really looks super creepy though!! R Programming institutes in Chennai | R Programming Training in Chennai | R Programming Course Fees

    ReplyDelete
  45. Great post! I am actually getting ready to across this information, It's very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well. hadoop developer skills Set | hadoop training course fees in chennai | Hadoop Training in Chennai Omr

    ReplyDelete
  46. This is most informative and also this post most user friendly and super navigation to all posts... Thank you so much for giving this information to me..
    apple service center chennai
    apple service center in chennai
    apple mobile service centre in chennai
    apple service center near me

    ReplyDelete
  47. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

    devops online training

    aws online training

    data science with python online training

    data science online training

    rpa online training

    ReplyDelete
  48. I really appreciate this post. I’ve been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thx again!
    Microsoft Azure online training
    Selenium online training
    Java online training
    Python online training
    uipath online training

    ReplyDelete
  49. cool stuff you have and you keep Python classes in pune overhaul every one of us

    ReplyDelete
  50. The article is so informative. This is more helpful.
    software testing training courses
    selenium classes Thanks for sharing

    ReplyDelete
  51. Hey, would you mind if I share your blog with my twitter group? There’s a lot of folks that I think would enjoy your content. Please let me know. Thank you.
    blue prism training in chennai | blue prism course in chennai | best blue prism training institute in chennai | blue prism course in chennai | blue prism automation in chennai | blue prism certification in chennai

    ReplyDelete
  52. Really nice post. Provided a helpful information. I hope that you will post more updates like this

    AWS Online Training

    AI Training

    Big Data Training

    ReplyDelete
  53. Thanks a lot for writting such a great article. It's really has lots of insights and valueable informtion.
    If you wish to get connected with AI world, we hope the below information will be helpful to you.
    Python Training Institute in Pune
    Python Interview Questions And Answers For Freshers
    Data -Science
    ML(Machine Learning) related more information then meet on EmergenTeck Training Institute .
    Machine Learning Interview Questions And Answers for Freshers
    Thank you.!

    ReplyDelete