How do I show multiple recaptchas on a single page

Question

I have 2 forms on a single page   One of the forms has a recaptcha displaying all the time   The other should display a recaptcha only after a certain event such as maxing out login attempts   So there are times when I would need 2 recaptchas to appear on the same page   Is this possible   I know I could probably use a single one for both  but the way I have the layout  I would much prefer to have 2   Thanks   Update  well I guess it may not be possible   Can anybody recommend another capture library to use side by side with reCaptcha   I really want to be able to have 2 captchas on the same page   Update 2  What if put each form in an iframe   Would this be an acceptable solution

User · Answer

I have contact form in footer that always displays and also some pages, like Create Account, can have captcha too, so it's dynamically and I'm using next way with jQuery:

html:

<div class="g-recaptcha" id="g-recaptcha"></div>

<div class="g-recaptcha" id="g-recaptcha-footer"></div>

javascript

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit&hl=en"></script>
<script type="text/javascript">
  var CaptchaCallback = function(){        
      $('.g-recaptcha').each(function(){
        grecaptcha.render(this,{'sitekey' : 'your_site_key'});
      })
  };
</script>

User · Answer

This is easily accomplished with jQuery s clone   function   So you must create two wrapper divs for the recaptcha  My first form s recaptcha div    lt div id  myrecap  gt       lt  php         require once  recaptchalib php             publickey    XXXXXXXXXXX-XXXXXXXXXXX           echo recaptcha get html  publickey         gt   lt  div gt    The second form s div is empty  different ID   So mine is just    lt div id  myraterecap  gt  lt  div gt    Then the javascript is quite simple     document  ready function            Duplicate our reCapcha          myraterecap   html     myrecap   clone true true          Probably don t need the second parameter with a true value in clone    but doesn t hurt to have it    The only issue with this method is if you are submitting your form via ajax  the problem is that you have two elements that have the same name and you must me a bit more clever with the way you capture that correct element s values  the two ids for reCaptcha elements are  recaptcha response field and  recaptcha challenge field just in case someone needs them

User · Answer

This answer is an extension to  raphadko s answer   If you need to extract manually the captcha code  like in ajax requests  you have to call   grecaptcha getResponse widget id    But how can you retrieve the widget id parameter   I use this definition of CaptchaCallback to store the widget id of each g-recaptcha box  as an HTML data attribute    var CaptchaCallback   function         jQuery   g-recaptcha   each function index  el            var widgetId   grecaptcha render el    sitekey     your code             jQuery this  attr  data-widget-id   widgetId                Then I can call   grecaptcha getResponse jQuery   your recaptcha box id   attr  data-widget-id       to extract the code

User · Answer

A similar question was asked about doing this on an ASP page  link  and the consensus over there was that it was not possible to do with recaptcha  It seems that multiple forms on a single page must share the captcha  unless you re willing to use a different captcha  If you are not locked into recaptcha a good library to take a look at is the Zend Frameworks Zend Captcha component  link   It contains a few

User · Answer

This is a JQuery-free version of the answer provided by raphadko and noun   1  Create your recaptcha fields normally with this    lt div class  g-recaptcha  gt  lt  div gt    2  Load the script with this    lt script src  https   www google com recaptcha api js onload CaptchaCallback amp render explicit  async defer gt  lt  script gt    3  Now call this to iterate over the fields and create the recaptchas   var CaptchaCallback   function         var captchas   document getElementsByClassName  g-recaptcha        for var i   0  i  lt  captchas length  i              grecaptcha render captchas i     sitekey     YOUR KEY HERE

User · Answer

It is possible  just overwrite the Recaptcha Ajax callbacks  Working jsfiddle  http   jsfiddle net Vanit Qu6kn   You don t even need a proxy div because with the overwrites the DOM code won t execute  Call Recaptcha reload   whenever you want to trigger the callbacks again   function doSomething challenge           input name recaptcha challenge field    val challenge          img recaptcha   attr  src      www google com recaptcha api image c   challenge        Called on Recaptcha reload   Recaptcha finish reload   function challenge b c       doSomething challenge        Called on page load Recaptcha challenge callback   function        doSomething RecaptchaState challenge     Recaptcha create  YOUR PUBLIC KEY

User · Answer

With the current version of Recaptcha  reCAPTCHA API version 2 0   you can have multiple recaptchas on one page   There is no need to clone the recaptcha nor try to workaround the problem  You just have to put multiple div elements for the recaptchas and render the recaptchas inside them explicitly   This is easy with the google recaptcha api  https   developers google com recaptcha docs display explicit render  Here is the example html code    lt form gt       lt h1 gt Form 1 lt  h1 gt       lt div gt  lt input type  text  name  field1  placeholder  field1  gt  lt  div gt       lt div gt  lt input type  text  name  field2  placeholder  field2  gt  lt  div gt       lt div id  RecaptchaField1  gt  lt  div gt       lt div gt  lt input type  submit  gt  lt  div gt   lt  form gt    lt form gt       lt h1 gt Form 2 lt  h1 gt       lt div gt  lt input type  text  name  field3  placeholder  field3  gt  lt  div gt       lt div gt  lt input type  text  name  field4  placeholder  field4  gt  lt  div gt       lt div id  RecaptchaField2  gt  lt  div gt       lt div gt  lt input type  submit  gt  lt  div gt   lt  form gt    In your javascript code  you have to define a callback function for recaptcha    lt script type  text javascript  gt      var CaptchaCallback   function             grecaptcha render  RecaptchaField1     sitekey     6Lc your site key             grecaptcha render  RecaptchaField2     sitekey     6Lc your site key             lt  script gt    After this  your recaptcha script url should look like this    lt script src  https   www google com recaptcha api js onload CaptchaCallback amp render explicit  async defer gt  lt  script gt    Or instead of giving IDs to your recaptcha fields  you can give a class name and loop these elements with your class selector and call  render

User · Answer

I would use invisible recaptcha   Then on your button use a tag like   formname  yourformname    to specify which form is to be submitted and hide a submit form input     The advantage of this is it allows for you to keep the html5 form validation intact  one recaptcha  but multiple button interfaces   Just capture the  captcha  input value for the token key generated by recaptcha    lt script src  https   www google com recaptcha api js  async defer  gt  lt  script gt    lt div class  g-recaptcha  data-sitekey  yours  data-callback  onSubmit  data-size  invisible  gt  lt  div gt   lt script gt  var formanme         button   on  click   function      formname         this  attr  formname        if     formname  0  checkValidity      true    grecaptcha execute          else     formname  find  input type  submit     click              var onSubmit   function token          formname  append   lt input type  hidden  name  captcha  value    token      gt           formname  find  input type  submit     click           lt  script gt    I find this FAR simpler and easier to manage

User · Answer

Here is a nice guide for doing exactly that   http   mycodde blogspot com ar 2014 12 multiple-recaptcha-demo-same-page html  Basically you add some parameters to the api call and manually render each recaptcha     lt script src  https   www google com recaptcha api js onload myCallBack amp render explicit  async defer gt  lt  script gt   lt script gt          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                              lt  script gt    PS  The  grecaptcha render  method receives an ID

User · Answer

Here s a solution that builds off many of the excellent answers  This option is jQuery free  and dynamic  not requiring you to specifically target elements by id    1  Add your reCAPTCHA markup as you normally would    lt div class  g-recaptcha  data-sitekey  YOUR KEY HERE  gt  lt  div gt    2  Add the following into the document  It will work in any browser that supports the querySelectorAll API   lt script src  https   www google com recaptcha api js onload renderRecaptchas amp render explicit  async defer gt  lt  script gt   lt script gt      window renderRecaptchas   function             var recaptchas   document querySelectorAll   g-recaptcha            for  var i   0  i  lt  recaptchas length  i                  grecaptcha render recaptchas i                     sitekey  recaptchas i  getAttribute  data-sitekey                                    lt  script gt

User · Answer

Simple and straightforward   1  Create your recaptcha fields normally with this    lt div class  g-recaptcha  data-sitekey  YOUR KEY HERE  gt  lt  div gt    2  Load the script with this    lt script src  https   www google com recaptcha api js onload CaptchaCallback amp render explicit  async defer gt  lt  script gt    3  Now call this to iterate over the fields and create the recaptchas    lt script type  text javascript  gt    var CaptchaCallback   function         jQuery   g-recaptcha   each function index  el            grecaptcha render el                 sitekey    jQuery el  attr  data-sitekey                 theme    jQuery el  attr  data-theme                 size    jQuery el  attr  data-size                 tabindex    jQuery el  attr  data-tabindex                 callback    jQuery el  attr  data-callback                 expired-callback    jQuery el  attr  data-expired-callback                 error-callback    jQuery el  attr  data-error-callback                             lt  script gt

User · Answer

I know this question is old but in case if anyone will look for it in the future  It is possible to have two captcha s on one page  Pink to documentation is here  https   developers google com recaptcha docs display Example below is just a copy form doc and you dont have to specify different layouts    lt script type  text javascript  gt    var verifyCallback   function response        alert response          var widgetId1    var widgetId2    var onloadCallback   function            Renders the HTML element with id  example1  as a reCAPTCHA widget         The id of the reCAPTCHA widget is assigned to  widgetId1       widgetId1   grecaptcha render  example1            sitekey     your site key          theme     light              widgetId2   grecaptcha render document getElementById  example2             sitekey     your site key              grecaptcha render  example3            sitekey     your site key          callback    verifyCallback         theme     dark                lt  script gt

User · Answer

To add a bit to raphadko s answer  since you have multiple captchas  on one page   you can t use the  universal  g-recaptcha-response POST parameter  because it holds only one captcha s response   Instead  you should use grecaptcha getResponse opt widget id  call for each captcha  Here s my code  provided each captcha is inside its form    HTML    lt form       gt    lt div id  RecaptchaField1  gt  lt  div gt    lt div class  field  gt     lt input type  hidden  name  grecaptcha  id  grecaptcha    gt   lt  div gt    lt  form gt    and   lt script src  https   www google com recaptcha api js onload CaptchaCallback amp render explicit  async defer gt  lt  script gt    JavaScript   var CaptchaCallback   function        var widgetId           id  RecaptchaField    each function index  el              widgetId   grecaptcha render el id    sitekey     your site key                 el  closest  form   submit function  event                  this grecaptcha value           index         gt        grecaptcha getResponse widgetId                                     Notice that I apply the event delegation  see refresh DOM after append element   to all the dynamically modified elements  This binds every individual captha s response to its form submit event

User · Answer

A good option is to generate a recaptcha input for each form on the fly  I ve done it with two but you could probably do three or more forms    I m using jQuery  jQuery validation  and jQuery form plugin to post the form via AJAX  along with the Recaptcha AJAX API -   https   developers google com recaptcha docs display recaptcha methods  When the user submits one of the forms    intercept the submission - I used jQuery Form Plugin s beforeSubmit property destroy any existing recaptcha inputs on the page - I used jQuery s   empty   method and Recaptcha destroy   call Recaptcha create   to create a recaptcha field for the specific form return false      Then  they can fill out the recaptcha and re-submit the form   If they decide to submit a different form instead  well  your code checks for existing recaptchas so you ll only have one recaptcha on the page at a time

User · Answer

x000D   x000D  var ReCaptchaCallback   function     x000D            g-recaptcha   each function    x000D        var el     this   x000D        grecaptcha render el get 0     sitekey    el data  sitekey      x000D              x000D             x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   www google com recaptcha api js onload ReCaptchaCallback amp render explicit  async defer gt  lt  script gt  x000D   x000D   x000D  ReCaptcha 1 x000D   lt div class  g-recaptcha  data-sitekey  6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw  gt  lt  div gt  x000D   x000D  ReCaptcha 2 x000D   lt div class  g-recaptcha  data-sitekey  6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw  gt  lt  div gt  x000D   x000D  ReCaptcha 3 x000D   lt div class  g-recaptcha  data-sitekey  6Lc8WQcUAAAAABQKSITdXbc6p9HISCQhZIJwm2Zw  gt  lt  div gt  x000D   x000D   x000D

User · Answer

The grecaptcha getResponse   method accepts an optional  widget id  parameter  and defaults to the first widget created if unspecified  A widget id is returned from the grecaptcha render   method for each widget created  it is not related to the attribute id of the reCAPTCHA container    Each reCAPTCHA has its own response data   You have to give the reCAPTCHA div an ID and pass it to the getResponse method   e g    lt div id  reCaptchaLogin       class  g-recaptcha required-entry       data-sitekey   lt  php echo  this- gt helper  recaptcha  - gt getKey      gt        data-theme   lt  php echo  this- gt helper  recaptcha  - gt getTheme       gt        style  transform scale 0 82  -webkit-transform scale 0 82  transform-origin 0 0 -webkit-transform-origin 0 0   gt   lt  div gt     lt script type  text javascript  gt    var CaptchaCallback   function         jQuery   g-recaptcha   each function index  el            grecaptcha render el                 sitekey    jQuery el  attr  data-sitekey                 theme    jQuery el  attr  data-theme                 size    jQuery el  attr  data-size                 tabindex    jQuery el  attr  data-tabindex                 callback    jQuery el  attr  data-callback                 expired-callback    jQuery el  attr  data-expired-callback                 error-callback    jQuery el  attr  data-error-callback                             lt  script gt    lt script src  https   www google com recaptcha api js onload CaptchaCallback amp render explicit  async defer gt  lt  script gt      Access response   var reCaptchaResponse   grecaptcha getResponse 0     or   var reCaptchaResponse   grecaptcha getResponse 1

User · Answer

Looking at the source code of the page I took the reCaptcha part and changed the code a bit  Here s the code   HTML    lt div class  tabs  gt       lt ul class  product-tabs  gt           lt li id  product tabs new  class  active  gt  lt a href     gt Detailed Description lt  a gt  lt  li gt           lt li id  product tabs what  gt  lt a href     gt Request Information lt  a gt  lt  li gt           lt li id  product tabs wha  gt  lt a href     gt Make Offer lt  a gt  lt  li gt       lt  ul gt   lt  div gt    lt div class  tab content  gt       lt li class  wide  gt           lt div id  product tabs new contents  gt               lt  php   description    this- gt getProduct  - gt getDescription      gt               lt  php if    description     gt                   lt div class  std  gt                       lt h2 gt  lt  php echo  this- gt     Details     gt  lt  h2 gt                       lt  php echo  this- gt helper  catalog output  - gt productAttribute  this- gt getProduct      description   description     gt                   lt  div gt               lt  php endif    gt           lt  div gt       lt  li gt        lt li class  wide  gt           lt label for  recaptcha  gt Captcha lt  label gt           lt div id  more info recaptcha box  class  input-box more info recaptcha box  gt  lt  div gt       lt  li gt        lt li class  wide  gt           lt label for  recaptcha  gt Captcha lt  label gt           lt div id  make offer recaptcha box  class  input-box make offer recaptcha box  gt  lt  div gt       lt  li gt   lt  div gt    jQuery    lt script type  text javascript  src  http   www google com recaptcha api js recaptcha ajax js  gt  lt  script gt   lt script type  text javascript  gt      jQuery document  ready function             var recapExist   false           Create our reCaptcha as needed         jQuery   product tabs what   click function                 if recapExist    false                    Recaptcha create   lt  php echo  publickey    gt     more info recaptcha box                    recapExist    make offer recaptcha box                 else if recapExist     more info recaptcha box                     Recaptcha destroy       Don t really need this  but it s the proper way                 Recaptcha create   lt  php echo  publickey    gt     more info recaptcha box                    recapExist    make offer recaptcha box                                     jQuery   product tabs wha   click function                 if recapExist    false                    Recaptcha create   lt  php echo  publickey    gt     make offer recaptcha box                    recapExist    more info recaptcha box                 else if recapExist     make offer recaptcha box                     Recaptcha destroy       Don t really need this  but it s the proper way  I think                    Recaptcha create   lt  php echo  publickey    gt     make offer recaptcha box                    recapExist    more info recaptcha box                                      lt  script gt    I am using here simple javascript tab functionality  So  didn t included that code    When user would click on  Request Information    product tabs what  then JS will check if recapExist is false or has some value  If it has a value then this will call Recaptcha destroy    to destroy the old loaded reCaptcha and will recreate it for this tab  Otherwise this will just create a reCaptcha and will place into the  more info recaptcha box div  Same as for  Make Offer   product tabs wha tab

[php] How do I show multiple recaptchas on a single page?

Examples related to php

Examples related to captcha

Examples related to recaptcha