Move where failed captcha verification code message displays

When a site visitor enters the wrong verification code on a form it displays within the form itself. This is a problem when the form does not appear near enough to the top of the page.

The page reloads with the error message, but it is unseen as the page reloads at the top of the page leaving the form with the error message unseen. Visitors that submit using the wrong code think the form submitted successfully when it did not.

How can we force the page to reload displaying the form and resulting message where the visitor can readily see it instead of reloading at the top of the page?

Hi tjhaas,

Unless you have a file upload in the form you can use Ajax submission - enable it in the form HTML (Render form) action. That should leave the form displayed.

Otherwise there are several threads here with JavaScript to scroll the page to the form.

Bob

Thanks for the input. It does have a file upload.

I tried the following from another post I found (Apparently, it solved the issue for them):

Added the class to a custom field at the top of the form.
class="myformanchor"

Then added the Load JavaScript function at the bottom of the form in the set up tab. The code is placed in the box titled "JS Code" The code is listed below.

jQuery(document).ready(function($){
$('html, body').animate({ scrolltop: $("#myformanchor").offset().top }, 'slow');
});

It does not work. I checked the anchor by adding it to the custom CSS file for the site and changed the text color. The anchor seems to working fine. I must be missing something with implementing the JavaScript.

Do you see what may be wrong?

Hi tjhaas,

Maybe a JavaScript error? Can you post a link to the form?

Bob

It is the form on any of the interior pages.

http://wehaulrvtransport.com/transport-services/travel-trailer

Thanks

403: Access Forbidden
Your location (FR) has been blacklisted.

Sorry, I forgot about that. It is a security thing. It is now open for you to view the site.

Hi tjhaas,

There is a JavaScript error "Uncaught TypeError: Cannot read property 'top' of undefined" and the undefined is $("#myformanchor") so I guess that you don't have an element with the id='myformanchor' for the page to scroll to.

Bob

PS Spotted a couple of typos in the form: Axles, and Acceptable

I am grasping at straws.

I added an element and tried the Field ID as myformanchor and 'myformanchor' with no success.
I also added a custom element and added code <span class="myformanchor"></span>

I had the Load JavaScript event at the bottom of the page under setup. I moved it to be under the Event Loop in both "On Fail" events. Is this where it should be?

This is the url for the source of the code I am using.

https://www.chronoengine.com/forums/posts/t99834/anchor-to-form-on-a-long-page.html?keywords=scroll%20page%20to%20forms

Hi tjhaas,

Please check your HTML - you will see that the ID is still not set to myformanchor but has some extra quotes:

<input name="myformanchor" value="" id="'myformanchor'" type="hidden" class="form-control A">

Bob

Hi Bob,

I was sidetracked on another project for a bit. Here is what I am seeing in the HTML

<input name="myformanchor" id="myformanchor" value="" type="hidden" class="form-control A" />

Still not working for me.

Hi tjhaas,

Checking on the form

$("#myformanchor").offset().top - returns 0 (zero) - possibly because the element is hidden.

$(".myformanchor").offset().top - returns 1098 which is probably the offset you need (this is coming from the span I think, not the hidden input as the span comes first in the page.

Bob