ReCaptchaV2 and Formit Error

Support Extras
1

Modx 2.7.3
PHP 7.3
ReCaptchaV2 - V2 Tickbox method.
I get the error message: Please select the checkbox in the ReCaptcha image.
ReCaptchaV2 is working with quip on the same site.
No errors i nlog and no form sent.
What am I getting wrong?..

[[!FormIt?
&hooks=`recaptchav2,email,redirect`
&emailTpl=`flex_email_chunk`
&emailFrom=`[[$mainemail]]`
&emailTo=`[[$mainemail]]`
&redirectTo=`5`
&emailUseFieldForSubject=`1`
&validate=`name:required,
email:email:required,telephone:required,consent:required,
text:required:stripTags`]]

<div class="form-item">
            [[!recaptchav2_render]]
            [[!+fi.error.recaptchav2_error]]
        </div>
2

I think the recaptchav2 snippets need to be inside the form tags. From the markup you’ve shown it doesn’t look like they are…

3

Sorry I didn’t post the whole form but it is within the form tags - here’s the whole thing:

[[!FormIt?
    &hooks=`recaptchav2,email,redirect`
    &emailTpl=`flex_email_chunk`
    &emailFrom=`[[$mainemail]]`
    &emailTo=`[[$mainemail]]`
    &redirectTo=`5`
    &emailUseFieldForSubject=`1`
    &validate=`name:required,
    email:email:required,telephone:required,consent:required,
    text:required:stripTags`]]
<p>[[%All fields are required...]]</p>
<div class="callout">
<fieldset>
  <div class="row">
    <div class="small-12 medium-6 columns">
<form id="mainform" action="[[~[[*id]]]]#message" method="post" class="form">
    <label for="name">
        [[%Name]]
        [[!+fi.error.name:notempty=`<span class="alert label">This is a required field.</span>`]]
    </label>
    <input type="text" name="name" id="name" value="[[!+fi.name]]" />
    <label for="email">
        [[%Email]]
        [[!+fi.error.email:notempty=`<span class="alert label">This is a required field.</span>`]]
    </label>
    <input type="text" name="email" id="email" value="[[!+fi.email]]" />
    <label for="telephone">
        [[%Telephone]]
        [[!+fi.error.telephone:notempty=`<span class="alert label">This is a required field.</span>`]]
    </label>
    <input type="text" name="telephone" id="telephone" value="[[!+fi.telephone]]" />
            <label>
        <label>
        [[%Contact us about...]][[+fi.error.subject]]
    </label>
 <select name="subject" value="[[!+fi.subject]]">
     <option value="General"[[!+fi.subject:FormItIsSelected=`General`]]>General</option>
    <option value="Feedback"[[!+fi.subject:FormItIsSelected=`Feedback`]]>Feedback</option>
        </select>
    </div>
    <div class="small-12 medium-6 columns">
                [[%Please tick the box to confirm your consent to us contacting you:]][[!+fi.error.consent:notempty=`<span class="alert label">This is a required field.</span>`]]
        <input type="hidden" name="consent[]" value="" />
    </label>
    <ul>
      <li>
        <label><input type="checkbox" name="consent[]" value="Yes" [[!+fi.consent:FormItIsChecked=`Yes`]] /> Yes</label>
      </li>
    </ul>
        <label>
        [[%How do you want to hear back from us?<span class="xred">&#42;</span>]][[+fi.error.coms]]
    </label>
        <select name="coms" value="[[!+fi.coms]]">
            <option value="Any"[[!+fi.coms:FormItIsSelected=`Any`]]>Any</option>          
            <option value="Phone"[[!+fi.coms:FormItIsSelected=`Phone`]]>Phone</option>        
            <option value="Email"[[!+fi.coms:FormItIsSelected=`Email`]]>Email</option>
        </select>
    <label for="text">
        [[%Brief description of help needed]]
        [[!+fi.error.text:notempty=`<span class="alert label">This is a required field.</span>`]]
    </label>
    <textarea name="text" id="text" cols="55" rows="3" value="[[!+fi.text]]">[[!+fi.text]]</textarea>
    <br class="clear" />
<div class="form-item">
                [[!recaptchav2_render]]
                [[!+fi.error.recaptchav2_error]]
            </div>
    <br class="clear" />
    <div class="form-buttons text-right">
        <input class="button hollow" type="submit" value="[[%Send Contact Inquiry]]" />
        </div>
    </div>
</form>
</div>
<div class="row">
    <div class="small-12 columns">
 <p>To understand how we will store and use your details please see our <a href="[[~37]]">privacy policy and notice.</a></p>       
    </div>
</div>
</fieldset>
</div>
4

It may be because your form tag begins inside this div: <div class="small-12 medium-6 columns"> but that div closes and the closing form tag is outside of the div so I think the entire form is not being rendered as such.

You also have a stray open label tag (just below the telephone input), and I think select tags are not supposed to have a value attribute – although these are unlikely to affect the Recaptcha checkbox…

1 Like
5

Thank you for spotting that stray label tag Lucy. That wasn’t the issue as such but it did prevent the error message showing, that led me to realise that the client had sent me a non-existent email address. I’d previously checked the form with my own email address and it worked fine. What a pain!