Forums

I need to add some javascript to load the top of the form at the top of the page on success and fail events.

Users are having issues not realizing the form has sent or failed because the form on event or fail message does not load to the top of the page. (It appears "below the fold" off screen)

In Chronoforms 5 we had added the code shown below to the "On Success" and "On Fail" events of the forms using a "Load Javascript Event". I am not finding a way to accomplish this in Chronoform 6>

jQuery(document).ready(function(){
var scrollPos = jQuery(".platform-content h3.g-title").offset().top;
jQuery(window).scrollTop(scrollPos);
});

How can I force the form to load to the top of the page on success or fail?

Thanks

Hi tjhaas,

Your form is using AJAX ? AJAX will keep the form at the same place, otherwise you can set the form action url to {url:} in the "Display section" settings.

Best regards,
Max

Hi Max,

I have the same problem here. Both solutions you suggest, don't fit in my case.

So, is it possible to fire an js-Event on fail/success?

Regards,
Marc

Hi Marc,

Your form is using AJAX or not ?

Best regards,
Max

Hi Max,

in case I set the Ajax Submit to yes and try to sending the form without filling the google captcha, the catpcha disappears and the whole page loaded twice inside the place where the plugin load the form.

Combine Ajax Submit and action {url:} only the captcha disappears without an error message.

see https://preview.infolink.website/apus/leistungen/arbeitsmedizin

Do you have an idea.

Regards,
Marc

Hi Marc,

Currently you do not have the {url:} string in the action url setting, correct ?

Best regards,
Max

Hi Max,

yes, you are right. Only Ajax Submit is set to 'yes'.

Regards,
Marc

Hi Marc,

Ok, what happens when you add {url:} ? it should work fine, but the Google reCaptcha may not work correctly in this case, which is a known limitation.

Best regards,
Max

Hi Max,

when I combine Ajax Submit and action {url:} the captcha disappears without an error message.

Only change the action to {url:} the form captcha error or success message loads on site without the content above, which could be a bit confusing for users, because the context gone?!

So do you have an idea how to focus on the form with the captcha or success message? Fire an javascript scroll event?

Regards,
Marc

Hi Marc,

Apologies for the late reply!

You can do that, add the following js code inside a "JavaScript" element under a new section in the deisgner:
$.G2.scrollTo("#message_id");
make sure the "add dom ready" setting is enabled.
Add a message area and inside an HTML element with your thanks message, set the area id to "message_id".

Now go to the "Setup" section and drag a "Display section" action to the "submit" event, then open the settings and set the "sections" to the name of the new section you have created under the designer.

That should scroll the form after its submitted to the message box.

Best regards,
Max

Hi Max,

thank you for that hint. But I get the following js error

0f4cd8fee6fb8ac51d6f7046ee199ffc_2.js:2 Uncaught TypeError: Elem.offset is not a function

But the section is shown after submitting the form.

Regards,
Marc

Hi Marc,

Please try the following then:
$.G2.scrollTo($("#message_id"));

Best regards,
Max

Hi Max,

this works! Thank you. :-)

Do you have an idea how to realize the scrolling when the form shows the verification fail message (in case the user doesn't fill out the captcha).

Regards,
Marc

Hi Marc,

Same way, but you can use the form id instead, which you can set in the "Display section" action.

Best regards,
Max

Hi Max,
​
again a question how to handle the on fail event.
​
I hide my form via the toogle function (uikit3) until the visitor click on a link.
Now when the event loop runs into the onfail event (for example google recaptcha failed) the form/page reloads and the form is hiding again.
​
I've tried the ajax submit, but this won't work. Do you have an idea how to fire the toogle function of uikit in the onfail event?
​
Regards,
Marc

Hi Marc,
​
I am not familiar with uikit3 but would expect that you can do this by setting a variable in the user session after the first submit and checking for that in the Load event. If it is not there hide the form, if it is found, show the form.
​
Bob

Hi Bob,
​
thank you for that hint.
​
I have solved it, with checking the url parameters via js.
​
Regards,
Marc