Recaptchav2 AjaxForm

Hello. Captcha not working. The message can be sent without it. I don’t understand where I missed something.
chunk

content_copy

share

<form id="f1" action="" method="post" class="default-form">
<div class="row clearfix">
<input type="hidden" name="pagetitle" value="[[*pagetitle]]">
<div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_name">[[%af_label_name]]</label>
        <div class="controls">
            <input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="" class="form-control"/>
            <span class="error_name">[[+fi.error.name]]</span>
        </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_email">[[%af_label_email]]</label>
        <div class="controls">
            <input type="email" id="af_email" name="email" value="[[+fi.email]]" placeholder="" class="form-control"/>
            <span class="error_email">[[+fi.error.email]]</span>
        </div>
    </div>
 <div class="col-lg-6 col-md-6 col-sm-12 form-group">
 <label class="control-label" for="af_phone">Телефон</label>
        <div class="controls">
            <input type="text" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="" class="form-control"/>
            <span class="phone">[[+fi.error.phone]]</span>
        </div>
                                    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_message">[[%af_label_message]]</label>
        <div class="controls">
            <textarea id="af_message" name="message" class="form-control" rows="5">[[+fi.message]]</textarea>
            <span class="error_message">[[+fi.error.message]]</span>
        </div>
    </div>
	<div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
        									<span class="error">[[!+fi.error.soglasie]]</span>
<label class="custom-control material-checkbox"><input type="checkbox" class="material-control-input" value="" name="soglasie[]" x>
        <input type="checkbox"  name="soglasie[]" value="согласие" [[!+fi.soglasie:FormItIsChecked=`soglasie`]] onclick="showHide('soglasie-input')">
        <span class="description"> С условиями <a href="[[~17]]" target="_blank" title="Ознакомтесь с Согласие на обработку персональных данных"> ознакомлен и даю свое согласие.*</a></span></label>
    </div>
	 <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
    [[!recaptchav2_render]]
  [[!+fi.error.recaptchav2_error]]
  </div>
	 <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
        <div class="controls">
            <button type="reset" class="theme-btn style-one">[[%af_reset]]</button>
        </div>
    </div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
<button type="submit" class="theme-btn style-one">[[%af_submit]]</button>
</div>

    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
	 </div>
</form>

[[!AjaxForm?
&form=tpl.AjaxForm.example
&snippet=FormIt
&hooks=recaptchav2,FormItSaveForm,email,spam
&emailSubject=Новое сообщение с сайта [[++site_url]]
&emailTo= &emailFrom=
&emailTpl=tpl.email
&validationErrorMessage=В форме содержатся ошибки!
&successMessage=<h2>Сообщение успешно отправлено</h2>
]]
[[!+fi.successMessage]]

Are there any relevant error messages in the error log?

Maybe try simplifying the process to debug it.
Does it work if you call FormIt directly without using AjaxForm?
Does it work with the sample form that the extra ReCaptchaV2 provides (chunk “sample_formit_contact_form”)?

Hello.
Worked on this article. Now it doesn’t show any errors at all.

// найти в файле default.js ajaxform следующие строки
AjaxForm.Message.success(response.message);
form.find('.error').removeClass('error');
form[0].reset();
// и вставить после них следующее
if (typeof $('#recaptcha') != "undefined") {
  grecaptcha.reset(); //добавляем сброс сессии для капчи
}

So if you worked on this article, then maybe add this in again

&validate=`g-recaptcha-response:required`

and maybe this <span class="error_g-recaptcha-response error"></span> also to display error messages.


By the way this spam hook at the end doesn’t make any sense. This hook gets executed when the mail is already sent and the data saved.

&hooks=`recaptchav2,FormItSaveForm,email,spam`
[[!AjaxForm?
  &form=`tpl.AjaxForm.example`
  &snippet=`FormIt`
  &hooks=`recaptchav2,FormItSaveForm,email,spam`
  &emailSubject=`Новое сообщение с сайта [[++site_url]]`
  &emailTo=``
  &emailFrom=``
  &emailTpl=`tpl.email`
  &validate=`name:minLength=^2^,
             email:email:required,
             message:minLength=^10^,
             g-recaptcha-response:required`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`<h2>Сообщение успешно отправлено</h2>`
  &frontend_js=`/assets/components/ajaxform/js/default2.js`
]]
[[!+fi.successMessage]]
  1. /assets/components/ajaxform/js
// найти в файле default.js ajaxform следующие строки
AjaxForm.Message.success(response.message);
form.find('.error').removeClass('error');
form[0].reset();
// и вставить после них следующее
if (typeof $('#recaptcha') != "undefined") {
  grecaptcha.reset(); //добавляем сброс сессии для капчи
}

<form id="f1" action="" method="post" class="default-form">
<div class="row clearfix">
<input type="hidden" name="pagetitle" value="[[*pagetitle]]">
<div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_name">[[%af_label_name]]</label>
        <div class="controls">
            <input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="" class="form-control"/>
            <span class="error_name">[[+fi.error.name]]</span>
        </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_email">[[%af_label_email]]</label>
        <div class="controls">
            <input type="email" id="af_email" name="email" value="[[+fi.email]]" placeholder="" class="form-control"/>
            <span class="error_email">[[+fi.error.email]]</span>
        </div>
    </div>
 <div class="col-lg-6 col-md-6 col-sm-12 form-group">
 <label class="control-label" for="af_phone">Телефон</label>
        <div class="controls">
            <input type="text" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="" class="form-control"/>
            <span class="phone">[[+fi.error.phone]]</span>
        </div>
                                    </div>
    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
        <label class="control-label" for="af_message">[[%af_label_message]]</label>
        <div class="controls">
            <textarea id="af_message" name="message" class="form-control" rows="5">[[+fi.message]]</textarea>
            <span class="error_message">[[+fi.error.message]]</span>
        </div>
    </div>
	<div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
        									<span class="error">[[!+fi.error.soglasie]]</span>
<label class="custom-control material-checkbox"><input type="checkbox" class="material-control-input" value="" name="soglasie[]" x>
        <input type="checkbox"  name="soglasie[]" value="согласие" [[!+fi.soglasie:FormItIsChecked=`soglasie`]] onclick="showHide('soglasie-input')">
        <span class="description"> С условиями <a href="[[~17]]" target="_blank" title="Ознакомтесь с Согласие на обработку персональных данных"> ознакомлен и даю свое согласие.*</a></span></label>
    </div>
	 <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
    [[!recaptchav2_render]]
  [[!+fi.error.recaptchav2_error]]
  <span class="error_g-recaptcha-response error"></span>
  </div>
	 <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
        <div class="controls">
            <button type="reset" class="theme-btn style-one">[[%af_reset]]</button>
        </div>
    </div>
<div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
<button type="submit" class="theme-btn style-one">[[%af_submit]]</button>
</div>

    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
	 </div>
</form>

Sends without captcha

content_copy

share

Works. There is a moment left. I have to redirect to another page of the site after a successful form submission. It works after clicking on “Submit”, but in the form there is an error - I don’t click the captcha.

I’m having a hard time understanding what you’re writing here.

Is the problem that it redirects to another page, even if there was an error in the form and the form wasn’t processed?

Maybe check the value of response.success first before doing the redirect.

$(document).on('af_complete', function(event, response) {
    if (response.success) {
        //redirect 
        window.location.href = "...";
    }
});

posted your code.
sending doesn’t work.
I’ll post my version. maybe I’ll remove the redirect.
thank you