reCAPTCHA in Modal Forms

+1

captcha-image works with contact form and Modal Forms version 7.x-1.2

CAPTCHA and Image CAPTCHA work, confirmed! But the size of the windows is not correct, it always gets scroller for me.

In the other hand Image CAPTCHA Refresh and reCAPTCHA but I think are because of an AJAX issue that must be reported to each module developer. The first one display the image but if you try to refresh the image the modal window try to reload but it won't make it. The second simply displays nothing.

Hi,
If you want to hide scroll you need configure module "modal form" and set width and height coefficients(please see my screenshot attached).

Also about Image CAPTCHA Refresh see my comment here.

Dmitry.

Thanks DmtryDrozdik! To solved it I have to modify: Modal popup medium -> Fixed (550x550)

Marking #1872442: Modal forms + reCAPTCHA issue as duplicate of this.

Captcha image is not appearin on my modal webform...
How can i solve this?Should I do anything special?
thanks

The issue appears to be that the Google javascript code defined in Recaptcha - drupal_add_js('https://www.google.com/recaptcha/api/js/recaptcha_ajax.js', array('type' => 'external'));

is not loaded before the modal form opens. If you put this into a preprocess page hook (so that it loads the script in the main page and not the popup), I found it works fine.

Recaptcha (using Ajax API at least) only loads the javascript when the captcha is called, which for the modal popup is too late for the javascript to be available. You should see a javascript error saying that 'Uncaught ReferenceError: Recaptcha is not defined', which is a giveaway that this is happening.

For the moment I only see a workaround by forcing reCaptcha to load on the page load - not probably something worth doing in the module. CTools does, I think, allow calling of javascript from within the popup (ctools_ajax_command_attr), but I don't really understand that yet I'm afraid. That may be a possible route.

I think there is not actually CTools problem.
This problem is in the fact of the CTools download necessary code like objects for Drupal.settings (Drupal.settings.recaptcha, Object {theme: "white", lang: "en", public_key: "some key", container: "recaptcha_ajax_api_container"})
but bug is in that the Drupal.behaviors.recaptcha.attach() called BEFORE (before CTools made a merge of Drupal.settings) and Recaptcha object isn't exist at that time.

so I did a hack on my side and do next thing:

WAS

recaptcha.js 
(function ($) {
  Drupal.behaviors.recaptcha = {
    attach: function (context) {
      Recaptcha.create(Drupal.settings.recaptcha.public_key, Drupal.settings.recaptcha.container, {theme: Drupal.settings.recaptcha.theme});
    },
    detach: function (context) {}
  };
}(jQuery));

after my changes:

(function ($) {
  Drupal.behaviors.recaptcha = {
    attach: function (context) {
      if(typeof Recaptcha == 'undefined'){
        setTimeout("Drupal.attachBehaviors()", 500);
        return;
      }
      Recaptcha.create(Drupal.settings.recaptcha.public_key, Drupal.settings.recaptcha.container, {theme: Drupal.settings.recaptcha.theme});
    },
    detach: function (context) {}
  };
}(jQuery));

I know that this is bad (really bad spike) but I'm working on fix for this issues.

The problem it in the race effect.

drupal_add_js('https://www.google.com/recaptcha/api/js/recaptcha_ajax.js', array('type' => 'external'));
this like in code load Recaptcha object, but while loading is in progress, form loaded and behaviors executed. That's why js execution break with error "Uncaught ReferenceError: Recaptcha is not defined"

one solution is in previous comment - to add setTimeout

But it's bad solution because of timings.

I suggest to use library to solve that "race effect", here is my solution.

P.S. I created libraries/recaptcha folder with
libraries/recaptcha/recaptcha_ajax.js file - I got it from https://www.google.com/recaptcha/api/js/recaptcha_ajax.js page.

This looks very risky to me. How does a webmaster know when to update their local copy of recaptcha_ajax.js? I don't see how this is a robust fix anyway: Downloading recaptcha_ajax.js from the local web site is not sure to be faster than downloading it from Google.

I can rewrite module and add option to use recaptcha_ajax from server or via CDN.

I would like to avoid any solution which involves making a copy of the Google-hosted JS files. We never know when they would change.

Added make-compliant patch file for the race conditions.

I am using the DEV version as it now works with Google reCaptcha. Google reCaptcha works great on webform, but does not show up in cTools modal. the above patch seems to be for the previous version. Anyone find a solution?

Confirming this problem still exists in 7.x-2.0. The image and math captchas work in modal windows but not recaptcha. I've tried to add the google js file in hook_init but no affect.

Any word on a working solution?

While going through the module's code, I came across this code:

          // @todo: #1664602: D7 does not yet support "async" in drupal_add_js().
          // drupal_add_js(url('https://www.google.com/recaptcha/api.js', array('query' => array('hl' => $language->language), 'absolute' => TRUE)), array('defer' => TRUE, 'async' => TRUE, 'type' => 'external'));
          $data = array(
            '#tag' => 'script',
            '#value' => '',
            '#attributes' => array(
              'src' => url('https://www.google.com/recaptcha/api.js', array('query' => array('hl' => $language->language), 'absolute' => TRUE)),
              'async' => 'async',
              'defer' => 'defer',
            ),
          );
          drupal_add_html_head($data, 'recaptcha_api');

Because it's an ajax request, the recaptcha javascript is never included in the ajax response settings (due to the usage of drupal_add_html_head.

I managed to get it working by commenting all the code that adds the tag and instead uncummenting the drupal_add_js. But the problem is that it only worked once. If I closed the modal and opened it again, then the captcha wouldn't load, which makes sense as by default it only executes once on load.

Doing some manual js calls, I was able to render it again by doing

var el = jQuery('.g-recaptcha'); grecaptcha.render(el.get(0), {sitekey: el.data('sitekey'), theme: el.data('theme')});

From the javascript console.

I have an idea for a patch, which I'm not sure it's gonna work.

* Add a global flag, maybe trough functions with static get / set everytime a form with captcha is used.
* Add a behavior that executes on window.load() (hopefully after recaptcha has loaded the first time) and checks if the captcha element is empty. If so, renders it using the data it has.
* Add a hook_ajax_render_alter that checks if the flag was set. If so, then adds a setting variable or something that can help me identify that I can eventually call the added js behavior.

I will begin on this tomorrow morning,

If someone manages to read this by then, I would appreciate all the feedback regarding this approach or things I should consider.

So, after #20 and some playing around, the solution was simpler than originally planned.

Attached patch should make it work with modal forms.

General changes

• Changed how the recaptcha script is embeded
• Added a js behavior

Patch is to work against 7.x-2.0.

Should work against latest dev, but I didn't test.

Looks like a dupe.

#21 confirmed working for me using Ajax Login-Register

also confirmed, #21 applied against the latest dev fixed it for me.

#21 gives me recaptcha in modal form. But when I check "I'm not a robot" it goes on loading and does not display the other popup of recaptcha.

not for 7.x-2.1 ?
I can't apply for ctool ajax

#21 confirmed working for me on the dev version

#21 apparently working for me too on the dev version.. but after reCaptcha validation completion i'm getting an ajax error which is preventing the contact form to be submitted.

An AJAX HTTP request terminated abnormally.
Debugging information follows.
Path: /modal_forms/ajax/webform/14
StatusText: n/a
ResponseText: SMTP -> get_lines(): $data was ""
SMTP -> get_lines(): $str is "220 smtp.gmail.com ESMTP 32sm8478081wre.15 - gsmtp ...
"

Any hints ?

Ok, i finally solved the AJAX issue applying this other Patch , as long as the one proposed here at #21

I had the same issue as #28 this morning.

Fixed it by changing this

drupal_get_path('module', 'recaptcha') . '/js/recaptcha.js' => array(),

to this

drupal_get_path('module', 'recaptcha') . '/recaptcha.js' => array(),

Just remove js from the path.

Could any one share proper working code or patch of recaptcha version - 7.x-2.0 .

#21 works but so does https://www.drupal.org/node/2493183#comment-12178132. Since that issue is still open and getting some D8-love, I would suggest folks go there as it's more up to date.

#21 works, however, due to an incorrect external script declaration the JS gets aggregated by Drupal's built-in 'Aggregate JavaScript files' function.

As a result, captcha stops working in a month or so (since recaptcha's JS expires for security reasons).

Attaching fixed patch + cleanup of old code.
The patch may be useful for people using #21.

https://www.drupal.org/project/recaptcha/issues/2493183#comment-12178132

fixed the issue

#32 works perfect for modal dialogue box, but not working on Colorbox. Please refer this patch https://www.drupal.org/files/recaptcha_ajax_1119086.patch for colorbox and check this can be merged and make it work at both places.

Patch from #32 successfully was applied to recaptcha 7.x-2.2 and helped to fix recapatcha in modal using dialog module. Thanks!

Patch from #32 is working. Thanks!

#32 worked for me except that it broke multi-lingual support. I re-rolled it with the language support preserved.

Here's an interdiff between 32 and 38 for reference.

#32 didn't work for me.

#38 works for me when using modal_forms

I fixed using https://www.drupal.org/project/recaptcha/issues/2493183#comment-10199569.

Drupal 7.60
captcha 1.5
recaptcha 2.2

#38 and the linked comment from #45 look very similar FYI

This seems really similar to #2875698: Drupal 7.x: Ajax support / Use behaviors for 2.x doesn't it? Does that patch address this issue for anyone?

FYI #38 needs a re-roll.

Hi, patch 49 works fine. Thanks :-)

Hi, it's december 2022, patch on 49 works fine. Thanks :-)