CF7+Fancybox+reCAPTCHA почему не работает?

Question

[Mikhail Derkach]

Добрый день.
Суть проблемы: не работает каптча в модальном окне (фэнсибокс)
Пробовал такой скрипт в шапке, в функциях относительно формы фенсибокса и т.д.

var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };

Пробовал поместить такой код к фенсибоксу

ajax: {
         complete: function(jqXHR, textStatus) {
            grecaptcha.render('recaptcha', {
                sitekey: [RECAPTCHA_SITE_KEY],
                callback: function(response) {
                    console.log(response);
                }           
            });
        }
      }

И еще несколько вариантов с помещением скриптов в шапку, тело формы - в результате просто пустой div для капчи.
Кто-нибудь сталкивался с подобной проблемой?

Answer 1

[Mikhail Derkach]

Проблема решена следующим:
1) Подключаем в саму форму через интерфейс CF7 скрипт

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
var onloadCallback = function() {
            grecaptcha.render('recaptcha', {
            'sitekey' : 'key'
            });
        };</script>

2) Ставим капчу в нужное место
3) В срипт вызова fancybox добавляем:

onComplete: function(){
                //настройки формы cf7, если необходимо
                var widgetId = grecaptcha.render('conatiner_id');
		grecaptcha.reset(widgetId);
            },

UPD.
В таком варианте в фенсибоксе после закрытия капча выходила с ошибкой "reCAPTCHA has already been rendered in this element"
Применимо к фенсибоксу, решается следующим образом:
1) Убираем скрипт подключения капчи, создаем в форме обертку, например: <div class="captcha_wrapper"></div>
2) Приводим скрипт фенсибокса к примерно такому виду (подтягиваем капчу отсюда же):

$.fancybox({
   $.getScript("https://www.google.com/recaptcha/api.js");
   onComplete: function(){
     $(".captcha_wrapper").append("<div class='g-recaptcha' id='recaptcha' data-sitekey='your_key'></div>");
        var widgetId = grecaptcha.render('recaptcha');
      },
    onCleanup: function(){
      $('#recaptcha').remove();
      }
});

grecaptcha.reset мне не помогало, поэтому использовал .remove();