ReCaptchaV2: How to better control the error message location and styling

Support Extras
1

I’ve implemented ReCaptcha 2 on a form site, and while is does prevent submission of the contact form without completing the reCaptcha… I am having trouble understanding how or where to control the error message when the form is not completed.

My site is a single page site with the form near the footer of the page. If the ReCaptcha is not completed, the page reloads in the browser, and then the error message appears in two locations on the page, in essentially unformatted text, or text. Once directrly above the form, and then again at the bottom of the form below the recaptcha.

Since the page reloads to the top of the page, as user ‘might’ assume the form was submitted and move on.

MODx 2.7.3

2

I have figured out that I can wrap the error… and style that portion of the type by wrapping in tags or divs.
[[!+fi.error.recaptchav2_error]]

I still am perplexed by why the error message also appears at the top of my form.

I have this code in the mix at the top.
[[!+fi.error_message:notempty=<p>[[!+fi.error_message]]</p>]]

Is this causing the ReCaptcha error message to appear in this section?

3

The fact that that message is showing up suggests that the form is being submitted in spite of the ReCaptcha error. I’m not sure what the fix would be.

4

Hi Bob. Hope you’re doing well.
The form as far as I can tell is not getting submitted… which is good. It’s just that the error message is popping up in two location.
I’ve figured out how to control the styling of the one down by the button. I have not had time to rework yet, but I suspect it is related to the ‘workemail’ hidden form field trick that was in the MODx FormIt docs from a long time ago. That’s actually where the second instance of the error message is occurring. If I can resolve I will post back the solution I discover.
Best,

5

What do the error messages actually say? Can you paste the form code here? I’ve had a few problems with RecaptchaV2 recently due to stuff I got in the wrong place so I might be able to help.

6

It’s not an error message per say… it’s just the message that appears for the user notifying them that they need to complete the captcha. I remove a bit of code that I thought pertained to the hidden field…to trick the bots… as in if it’s filled out then the form does not submit? However, now error messages for incomplete required fields does not appear to be working. I will grab code and post here shortly. Thank you for your feedback.

7

I truly appreciate any feedback here. I am running MODx 2.7.3, and have all Extras up to date. Here is a shortened version of my form, with just the required fields. What I am now noticing is that my error messages for any incomplete fields does not appear. This happens regardless of the ReCaptcha being in place. Might be a Zurb Foundation issue overriding my html? If the required fields are not completed, the form does not get sent… which is good! When the ReCaptcha is in place… and not completed… the error message appears in two places… At the top of the form… about where ‘[[!+fi.error_message:notempty=<p>[[!+fi.error_message]]</p>]]’ is located, and again at the bottom where the Recaptcha error html is located. I wrapped in h3 tags for now, but guessing this is where I could style. The Recaptcha does appear to work though. If not completed, the form does not sumbit. The awkward thing is that if not completed, the page reloads back to the top of the page, which is a bit disorienting.

Having big trouble trying to insert code.

8

Any tips for inserting code without typing 4 spaces in front of every line of code?

9

To insert code, put lines with three back-ticks a the start and at the end of your code.

```//line with 3 back-ticks at the beginning
//your code here
```//line with 3 back-ticks at the end
10

You could add an anchor to the action of your form. On reload the browser will then jump to the form section of your page.

<form id="myform" action="[[~[[*id]]]]#myform" method="post">
   ...
</form>
1 Like
11 
<div class="cell bkgMainBlue bump_both_big">

<div id="form-content-section" data-magellan-target="form-content-section">

[[!FormIt?
&hooks=`recaptchav2,spam,FormItSaveForm,email,redirect`
&formName=`insiderForm`
&formFields=`firstName,lastName,email`
&emailTpl=`registrationFormEmailChunk`
&emailFrom=`administrator@mydomain.com`
&emailTo=`info@mydomain.com`
&emailCC=`info2@mydomain.com`
&emailSubject=`Signup From: [[+firstName]] [[+lastName]]`
&emailReplyTo=`[[+email]]`
&redirectTo=`2`
&validate=`firstName:required,
lastName:required,
email:email:required,
workemail:blank,
text:stripTags`
]]

[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]

<div class="grid-container bump_both_big">
<div class="grid-x grid-padding-x">
<div class="cell small-12 medium-8 large-8 medium-offset-2 large-offset-2">

<div class="grid-x grid-padding-x">
<div class="cell text-center">
<h2 class="smallLetterSpacing textColor_white leadingTight">SIGN UP TO FOR INFO</h2>
</div>
</div>


<form name="insiderForm" id="insiderForm" action="[[~[[*id]]]]" method="post" class="form">
    <input type="hidden" name="workemail" value="" />

<div class="grid-x grid-padding-x">

<div class="cell">
<fieldset class="fieldset">

<legend>CONTACT DETAILS</legend>
<div class="cell">
<label>First Name*
<input type="text" name="firstName" id="firstName" required value="[[!+fi.firstName]]"/>[[!+fi.error.firstName:notempty=`<span class="form-error">Please enter first name</span>`]]
    </label>
</div>

<div class="cell">
<label>Last Name*
<input type="text" name="lastName" id="lastName" required value="[[!+fi.lastName]]"/>[[!+fi.error.lastName:notempty=`<span class="form-error">Please enter last name.</span>`]]
</label>
</div>

<div class="cell">
<label>Email Address*
<input type="text" name="email" id="email" required value="[[!+fi.email]]"/>[[!+fi.error.email:notempty=`<span class="form-error">Please enter email address.</span>`]]
</label>
</div>

</fieldset>
</div>
</div>



<div class="grid-x grid-padding-x">
<div class="cell">
<input type="submit" form="insiderForm" class="secondary button expanded" value="SEND">
</div>
</div>

<div class="grid-x grid-padding-x">
<div class="cell form-item">
   [[!recaptchav2_render]]
    <h3>[[!+fi.error.recaptchav2_error]]</h3>
</div>
</div>

</form>

</div>
</div>
</div><!--3 closing divs to close out master wrap-->

</div><!--closes out the magellan wrap-->

</div>
</div>````
12

I believe [[!+fi.error_message]] is just a generic placeholder for all the errors that occur in the different hooks. You can use it, if you want to show all possible errors at the same place in your code.

[[!+fi.error.recaptchav2_error]] on the other hand is a specific placeholder only for errors that occur in the recaptchav2-hook.

1 Like
13

I’d also try it without the hidden field and without the ‘spam’ hook

14

Do you have a password manager (e.g., LastPass) that might be filling the hidden spam field? You could try adding autocomplete="off".

It can be used on the form tag or the input tag.

15

I am experimenting with omitting the hidden spam field. Essentially… the ReCaptcha V2 seems to be working. Spam form submissions have pretty much come to a halt. This is good! I’m using the Foundation 6 framework… and finally making some progress with the alerts. Finally got the errors to display when required fields are not completed. Still struggling with the page reloading to the very top, rather that simply holding in place and displaying the error alerts. The page only reloads to the top when ReCaptcha is not completed. If a required field is not completes, the page reloads to the top of the form. Will post back once I have more of a solution. Thank you for all the feedback and suggestions.

16

To keep the form in view after page reload, dId you add an anchor to the action URL of your form as halftrainedharry suggested?

17

Thank you for responding: Not yet. I need to figure out how or where exactly to implement. Oddly… when I hit submit without completing required fileds… and without completing the reCaptcha, the form remains in view… even though the required field alerts are displaying at the top of the form. If then I complete those fields… but still do not complete the reCaptcaha yet hit submit… the page gets scrolled to the very top of the page. As it stands now… the UI is just not so great. Ideally… the alert needs to be front and center or even in a overlay so that the user immediately knows what the problem is. I will keep plugging a way on this.

18

https://docs.modx.com/current/en/extras/formit/formit.tutorials-and-examples/form-and-anchors

1 Like
19

The usual way to keep the page from reloading is to use nothing but JavaScript validation. The JS can prevent the form from actually being submitted when the input fails the JS validation test. Otherwise, the submit button is going to tell the server to reload the page (or forward to another page).

In your case, the page doesn’t reload when the JS validation spots a problem, but does whenever the JS validation passes the inputs.

If the page re-directs to itself and fits on the screen, the browser may be smart enough to keep the screen from flashing even when the form gets submitted normally.

If the page doesn’t reload, the tag-based FormIt error messages will never appear because in order for them to show up, the page has to be re-parsed in a new request.

In a lot of FormIt forms, people use JS validation, but leave the Formit error messages in there for people who have JS turned off, and/or for any checks that can’t be performed until after submission.

20

I can’t really tell if the page is truly reloading… or if ReCaptchaV2 is simple scrolling the page to the top. Problem is… the alert message stating that the ReCaptcha needs to be completed… is not in view because there is other content at the top of the page. The ReCaptcha alert message is also duplicated at the bottom of the form SEND button, where I inserted the ReCaptchaV2 html.

[[!recaptchav2_render]]

[[!+fi.error.recaptchav2_error]]

I inserted the h4 just to get the message stand out more.

All in all… it functions… but the user interface aspect is awkward.