1

I have some custom form in a page ( sign/signup),first I try render them with google API instruction

Paste this snippet before the closing tag on your HTML template:

<script src='https://www.google.com/recaptcha/api.js'></script>>

Paste this snippet at the end of the where you want the reCAPTCHA widget to appear:

<div class="g-recaptcha" data-sitekey="key_api"></div>

everything was ok for only one form, but recaptcha in another form not rendered.

I search for a solution and found How do I show multiple recaptchas on a single page

Then I'm trying to implement it with Drupal structure.what I do is

part of mytheme_libraries.yml file

global-script:
  js:
    https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit: { type: external, minified: true ,attributes: { defer: true, async: true} }
    js/myload-recaptcha.js: {}

and myload-recaptcha.js file

Drupal.behaviors.myrecaptcha = {
    attach: function (context, settings) {
        (function ($) {
            alert('Hello,I am fine');
            var CaptchaCallback = function () {
                $('.g-recaptcha').each(function (index, el) {
                    grecaptcha.render(el, {'sitekey': 'my_key'});
                });
                console.log(grecaptcha);
            };
        })(jQuery);
    }
};

and some part of header.html.twig

                <div class="form-group">
                    <div class="g-recaptcha" id="recaptcha-signup" ></div>
                </div>
                 <div class="form-group">
                    <div class="g-recaptcha" id="recaptcha-signin" ></div>
                </div>

alert fire correctly and it mean file loaded correctly, I take look and js files, also https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explici exists in loaded js files.

where is the problem and how can I render two Captcha in Drupal 8 theme programmatically ?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.