@denism300

Как прикрутить Invisible reCaptcha к AjaxForm + FormIt?

Пытаюсь прикрутить к формам Invisible reCaptcha, использую дополнение recaptchav2
Вызов формы
[[!AjaxForm? 
    &form=`tplContactForm` 
    &snippet=`FormIt` 
    &hooks=`recaptchav2,email,FormItSaveForm`
    &emailSubject=`Сообщение с сайта [[++site_url]] (страница "Контакты")`
    &emailTo=`тут_почта_получателя`
    &emailFrom=`тут_почта_отправителя`
    &emailTpl=`tplMailForm`
    &validate=`name:minLength=^2^:stripTags, email:email:required:stripTags, message:minLength=^10^, g-recaptcha-response:required`
    &validationErrorMessage=`В форме содержатся ошибки!`
    &successMessage=`Ваша заявка принята, спасибо за обращение!`
]]

чанк формы
<form id="contact-page-form" action="" method="post" class="ajax_form">
    <div class="form-group">
        <input type="text" name="name" required="" class="form-control" placeholder="Ваше имя*" value="[[+fi.name]]">
        <span class="error error_name">[[+fi.error.name]]</span>
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control" placeholder="Ваш email*" value="[[+fi.email]]">
        <span class="error error_name">[[+fi.error.email]]</span>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="phone" name="phone" required="" placeholder="Ваш телефон*" value="[[+fi.phone]]">
        <span class="error error_name">[[+fi.error.phone]]</span>
    </div>
    <div class="form-group">
        <textarea rows="4" name="message" required="" class="form-control word-count" data-maxlength="200" data-info="textarea-words-info" placeholder="Сообщение*"></textarea>
        <span class="error error_name">[[+fi.error.message]]</span>
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="privacyCheck" required="">
        <span class="error error_name">[[+fi.error.opd]]</span>
        <label class="form-check-label" for="privacyCheck">Согласен на обработку персональных данных</label>
    </div>
    <p class="text-small">Ставя отметку, я даю свое согласие на обработку моих персональных данных в соответствии с законом №152-ФЗ «О персональных данных» от 27.07.2006 и принимаю условия <a href="[[~70]]" rel="nofollow" target="_blank">Пользовательского соглашения</a></p>
    <div class="text-center">
        [[!recaptchav2_render? &tpl=`recaptchav2_invisible_html` &form_id=`contact-page-form`]]
        [[!+fi.error.recaptchav2_error]]
    </div>
    [[+fi.success:is=`1`:then=`<div class="alert alert-success">[[+fi.successMessage]]</div>`]]
    [[+fi.validation_error:is=`1`:then=`<div class="alert alert-error">[[+fi.validation_error_message]]</div>`]]
</form>

чанк recaptchav2_invisible_html
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    function recaptchaV2SubmitForm(response) {
        return new Promise(function() {
            document.getElementById('[[+form_id]]').submit();
        })
    }
</script>
<button type="submit" class="btn btn-landcad big-btn g-recaptcha" data-sitekey="[[+site_key]]" data-callback="recaptchaV2SubmitForm">Отправить</button>

после нажатия отправить получаю ошибку
Please select the checkbox in the ReCaptcha image.
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы