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:

Members fund testing for the Drupal project. Drupal Association Learn more


arekanderu’s picture


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.

ddrozdik’s picture

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.


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?

christoph’s picture

The issue appears to be that the Google javascript code defined in Recaptcha - drupal_add_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:


(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) {}

after my changes:

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

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

qwertmax’s picture

Assigned: Unassigned » qwertmax
1.42 KB

The problem it in the race effect.

drupal_add_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 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

Added make-compliant patch file for the race conditions.

jasonPivot’s picture

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?

hass’s picture

dczaretsky’s picture

Version: 7.x-1.x-dev » 7.x-2.0

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?

alemadlei’s picture

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('', array('query' => array('hl' => $language->language), 'absolute' => TRUE)), array('defer' => TRUE, 'async' => TRUE, 'type' => 'external'));
          $data = array(
            '#tag' => 'script',
            '#value' => '',
            '#attributes' => array(
              'src' => url('', 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:'sitekey'), theme:'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.

alemadlei’s picture

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.

hass’s picture

Status: Active » Closed (duplicate)
Parent issue: » #2493183: Ajax support / Use behaviors for 2.x

Looks like a dupe.

bredlen’s picture

#21 confirmed working for me using Ajax Login-Register

rovo’s picture

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

sidheswar’s picture

#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.

chinhlc’s picture

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

dieppon’s picture

#21 confirmed working for me on the dev version

jordilopezamat’s picture

#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 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

Mihai Chiriac’s picture

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.

swetavishal’s picture

Component: reCAPTCHA Captcha » General

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

PapaGrande’s picture

#21 works but so does Since that issue is still open and getting some D8-love, I would suggest folks go there as it's more up to date.

abramm’s picture

Version: 7.x-2.0 » 7.x-2.x-dev
Assigned: qwertmax » Unassigned
Status: Closed (duplicate) » Needs review
2.35 KB

#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.

Status: Needs review » Needs work

The last submitted patch, 32: recaptcha-fix_modal-1463768-32-D7.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

gurunathan’s picture