If the page is reloading, you should see the animated reload icon at the top of the browser screen. As I said, though, if the [[!+fi.error.recaptchav2_error]] message (not the tab) is appearing, the page must be reloading.
If you examine the code of the RC error message, I suspect that you could use CSS to set a fixed location for it near the top of the page.
You should also take a look at the Console in Dev. Tools (Ctrl-shift-i) when clicking on the submit button to see if there are any JS errors.
Thanks for your feedback Bob. I am very very dusty with all of this. Just tested… and the page is indeed reloading. Alert one at the top of the form is in p tags only. No classes or css. The other alert that appears in just below the ReCaptchaV2 box is in span tags… with a class=“error”. On my form I have an hidden field to prevent bots. If completed… the form should not submit.
//[[!+fi.error_message:notempty=<p>[[!+fi.error_message]]</p>]]
This must be why ReCaptchaV2 puts the message there, because it used fi.error.
I guess it’s OK for the alert to appear in two locations. I see now that I can wrap the top on in divs and style. I guess the trick for me is to apply an anchor… that pops that form right into view… as oppposed to loading to the top of the page. A user might see the top of the page and think that their form has be submitted.
You should be able to use span.error in the CSS to move the ReCaptcha message to the top. It seems unlikely to me that ReCaptcha is using the fi.error code to position its message, but who knows.
You might also be able to hide the span.error span (or a containing div) with JavaScript that looks for the span.error existence and toggles the visibility of the span.error, but the timing would be tricky and it might flash.
The hidden form field is detected by FormIt after the form is submitted, so it can’t prevent the submission (unless you have JavaScript code checking that field and doing the prevention).
Another thought: if you have a password manager, it might be filling in the hidden field.
I don’t have a password manager. I suspect that because the fi.error is in two locations, that accounts for the ReCaptcha alert to appear in the two locations. Unless I am misunderstanding the formit code, I think I at least need the original instance for allowing alerts to appear in required fields that are incomplete.
The form is not getting submitted though, until the ReCaptcha is completed.
I will say… the spam has stopped. I think I just need to figure out how to clean up the interface so that it is more user friendly.
So lets start with the form without ReCaptcha. I have 3 required fields. If those are not completed and the send button is clicked… the form only pushes down slightly—and that is simply because of an alert message that gets inserted just above the form. Ideally… I think something should appear right at the send button — or as someone mentions…use an anchor tag that would truly scroll to the top of the form to the alert, which then is a user friendly way to get the person the complete the missing fields.
So then… with ReCaptcha—no alerts occur with ReCaptcha as a result of incomplete, required form fields. Only after all required fields are complete and the send button clicked does ReCatpcha springs into action.
So far so good… except that the page reloads and the user is viewing the top portion of the page — unable to see any alert messages.
Perhaps an easier solution would be to put the form in an overlay… or on it’s own page. I am comfortable using css to style and position and alert / error message. But, a little less comfortable trying to figure out how to get ReCaptha to re-load the page to an anchor tag that is right where the alert / error mesage is located.
[[!+fi.error.recaptchav2_error]] is just a placeholder.
If you don’t want to see the error message, then don’t put this placeholder in your code.
If you want to see the error message at a different position, then put the placeholder at a different position in your code (even outside the <form> if you want)
If you want to style the placeholder differently or wrap it in different html-elements, either change the value of the &errTpl-property in your FormIt-call or use something like this
There is also an extra “AjaxForm” that is kind of a wrapper for “FormIt” and sends the form data to the server with AJAX. Because of that, your form would never lose its position.
But you would have to change the form-code slightly and wrap your error-message placeholders in elements with a classname of "error_" + name to make it work.
Thank you for the helpful feedback. Relocating the placcholder and styling it with CSS might be just the ticket in this case. Also going to take a look at AjaxForm.
Damm even I am having a similar kind of issue, I have searched all over the internet and even have posted on number of threads on different forum, no solution seems to work. I am really frustrated, can anyone of you here help me resolve this issue, I am very much tired now.
There are several issues mentioned here, so we need to know which one you mean in order to help. Please describe it, and post your code. (Use 3 backticks on new lines before and after code to make a codeblock.)
If your issue is different from the ones mentioned in this thread you should start a new post.