Formit, RecaptchaV3 issues

Support
,
1

Summary

I have been trying to implement Googles ReCaptcha V3 using the ReCaptchaV2 (version 3.2.2) extra by Sepia River. I have created the keys on google cloud, which forces me to Enterprise (not sure if this is part of the issue), and put them in the relevant parts of system settings.

I have added the call to recaptcha in the hook to Formit and added both the renderer and error snippets to the end of my form.

Initially I found that if I put the snippet calls anywhere other than last in the form the result would be that no html would render and the page would be blank, which seemed odd, however in last position it’s there and I can verify that it puts the scripts in the page output.

I can now fill in the form and submit. However the page just reloads, I can see that the remaining hooks are not firing. There are no logs in the error logs. There are no error messages populating the placeholder. But it must be returning false for the remaining hooks not to pass.

When I check on the google cloud side of things it says that I am registering requests but not assessments. I have gone round in circles trying to work it out, and I find the google cloud stuff bewildering, it’s not at all easy to know whether you have configured correctly.

Any ideas as to where I have gone wrong. Seems like it should be something that is relatively easy to get working, but it’s just not.

I’m on MODX 3.03. Below is my form:

      <form id="signup" post="[[~[[*id]]]]" class="form mulish-light" enctype="multipart/form-data">

            [[+fi.success:is=`1`:then=`
                <div class="form-notification success-main">
                    <span class="form-notification-title caveat-brush-regular">[[+fi.successMessage]]</span>
                    <span class="form-notification-body">Thanks for joining.</span>
                    <!--Quick, your email needs some "you-time". Your freebie awaits!-->
                </div>
            `]]
            
            [[+fi.validation_error:is=`1`:then=`
                <div class="form-notification error-main">
                    <span class="form-notification-title caveat-brush-regular">[[+fi.validation_error_message]]</span>
                    <span class="form-notification-body">Something's not right! Check over your details again so we can get you signed up quicker than it takes Word to launch!</span>
                </div>
            `]]

            [[+fi.success:is=`1`:then=`
            `:else`
                <input type="hidden" name="nospam:blank" value="[[+fi.nospam]]" />
                

                <section id="form-body">
    
                    <p [[!+fi.error.first-name:notempty=`class="has-error"`]]>
                        <label>
                            <span>First Name:</span>
                            [[!+fi.error.first-name:notempty=`<span class="error">Letters and letters only please.</span>`]]
                            <input type="text" class="mulish-light" name="first-name" id="first-name" value="[[!+fi.first-name]]" placeholder="Your first name" autocomplete="given-name" required />
                        </label>
                    </p>
        
                    <p[[!+fi.error.last-name:notempty=`class="has-error"`]]>
                        <label>
                            <span>Last Name:</span>
                            [[!+fi.error.last-name:notempty=`<span class="error">Do you have punctuation in your name? I didn't think so.</span>`]]
                            <input type="text" class="mulish-light" name="last-name" id="last-name" value="[[!+fi.last-name]]" placeholder="Your last name" autocomplete="family-name" required />
                        </label>
                    </p>
      
                    <p[[!+fi.error.email:notempty=`class="has-error"`]]>
                        <label>
                            <span>E-mail:</span>
                            [[!+fi.error.email:notempty=`<span class="error">Well, this doesn't look like an email address. Best check it.</span>`]]
                            <input type="email" class="mulish-light" name="email" id="email" placeholder="someone@something.com" value="[[!+fi.email]]" autocomplete="email" required />
                        </label>
                    </p>
      
                </section>
  
                <input type="submit" class ="air-button-blue" name="submit" id="submit" value="Mac Buddy Me"/>
            `]]
            
            [[recaptchav3_render?
                &tpl=`recaptchav3_html`
                &form_id=`signup`
            ]]
            [[!+fi.error.recaptchav3_error]]
        </form>

And my Formit call:

[[!FormIt?
&form=sign-up-form
&hooks=spam,recaptchav3,FormItSaveForm,create-user
&formName=Mac Buddies
&successMessage=Hey there, Mac Buddy!
&validationErrorMessage=Oops!
&customValidators=V-alpha
&validate=nospam:blank, first-name:V-alpha:required, last-name:V-alpha:required, email:email:required
]]

2

Maybe try to “debug” the snippet recaptchav3 to find out what exactly happens when you submit the form.

You could for example change modX::LOG_LEVEL_DEBUG to modX::LOG_LEVEL_ERROR in this line

to see the response from Google in the MODX error log.

Or you could add other log messages to the code:
For example $modx->log(modX::LOG_LEVEL_ERROR, 'Checks failed.'); on line 124 to see if the variable $resp is null for some reason.

3

Interestingly it appears I can put a $modx->log(modx::LOG_LEVEL_ERROR, call on any line in the snippet and I get no response in the log. Would that suggest it’s never getting called?

4

Nope, it’s me being a numpty. I had made an edit to the top of my form and screwed it up. It had no action attribute. As soon as I corrected it there, I got the expected response.

5

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.