Captcha / Recaptcha are used to prevent spam and automated account creation.

Please provide the posibility to use captcha / recaptcha inside modal forms.

Currently no captcha image is displayed inside the modal form although it is displayed when using standard log in/register functionality.

Related modules:
http://drupal.org/project/captcha
http://drupal.org/project/recaptcha

Comments

arekanderu’s picture

+1

Alice Heaton’s picture

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

warmth’s picture

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.

DmitryDrozdik’s picture

StatusFileSize
new8.38 KB

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.

warmth’s picture

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

Liam Morland’s picture

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

pinkonomy’s picture

Version:7.x-1.x-dev» 7.x-1.2
Category:feature» bug

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

christoph’s picture

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.

qwertmax’s picture

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.

qwertmax’s picture

Assigned:Unassigned» qwertmax
StatusFileSize
new1.42 KB

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.

qwertmax’s picture

Project:Modal forms (with ctools)» reCAPTCHA
Version:7.x-1.2» 7.x-1.x-dev
Component:Code» reCAPTCHA Captcha
Liam Morland’s picture

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.

qwertmax’s picture

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

Liam Morland’s picture

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.

Liam Morland’s picture

Title:Compatibility with Captcha and reCaptcha» reCAPTCHA in Modal Forms
Issue summary:View changes
eyeless’s picture

StatusFileSize
new520 bytes

Added make-compliant patch file for the race conditions.