scroll to top of form when form submitted

jc

jcalvert 07 Jan, 2015

Hi,

Here's a sample of the kind of page I'm interested in improving the usability of:
http://smvhs.org/building-fund

When the form is filled out, and submit is clicked, custom code is run that
shows the visitor a dollar total and a PayPal donate button. The problem is
that this information and button is shown down the page and the user must
scroll down to see it. Likewise, if there's an error in the form (e.g. Re-Captcha
entered wrong), then the error message will also be down the page.

I would like to change this so that when the form is submitted, the page is
auto-scrolled to the point of the top of the form, if you understand my meaning.

thanks,
JC

ca

calculus00 07 Jan, 2015

Hello jcalvert,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How to post information from a Chronoform to ZoHo
What are the 'Easy Form' and 'Form' Wizards?
How can I add a mask to format a form input?
How can I stop spam from my form?
Why does Joomla! Cache stop my form working?
P.S: I'm just an automated service😉

jc

jcalvert 07 Jan, 2015

Possible solution, can you help me find the spot in the source code to make the hack?

If I add an anchor at the point of the form, then off course this works: http://smvhs.org/building-fund#form

Where do I need to hack the code such that URLs of this form,

http://smvhs.org/building-fund?chronoform=buildingFund&event=submit

Become:

http://smvhs.org/building-fund#form?chronoform=buildingFund&event=submit

thanks,
JC

jc

jcalvert 07 Jan, 2015

I tried the fix shown in this post: http://www.chronoengine.com/forums/posts/f5/t90853.html

I added this code to a Load Javascript action in the On Submit:


window.addEvent('domready', function() {
$('chonoform_form_name').scrollIntoView();
});

This didn't work.

JC

jc

jcalvert 07 Jan, 2015

Forgot to mention... in the code above, I replaced "form_name" with the form name. This javascript appears to have no affect on submit.

JC

BN

BNDragon 08 Jan, 2015

Hi jcalvert,

Try it onLoad, first before the Html render and if won't work, after it.

If either not work, we'll something else😉

BN

BN

BNDragon 08 Jan, 2015

Hello again JC,

I just found this FAQ, take a look, looks exactly what you need😉

BN

Max_admin 08 Jan, 2015

1 Likes

in v5 you may use this code in a "load javascript" action:


jQuery(document).ready(function($){
$('html, body').animate({
        scrollTop: $("#form_id_here").offset().top
    }, 1000);
});

Regards,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

jc

jcalvert 09 Jan, 2015

FYI, I am using verson 5.0 RC4.1.

Max: I tried your code and can't get it to work. First I tried in the Load Javascript as first action in On Submit. Then I tried same in On Load. Where you have "#form_id_here" I tried both the form name and the form's numeric id. For both, I kept the "#" as the prefix.

Addition of this code didn't change the behavior after the submit – the browser still is showing the top of the page and doesn't scroll down.

thanks,
JC

BN

BNDragon 09 Jan, 2015

Hi JC,

Did you take a look on the Faq I had suggest?

BN

Gr

GreyHead 09 Jan, 2015

Hi JC,

You can see the form ID by looking at the form HTML - it is inside the <form . . .> tag and normally is set to chronoform-form_name so it is not the same as the form name, nor the ID in the Forms Manager. So Max's code would be like

jQuery(document).ready(function($){
$('html, body').animate({
        scrollTop: $("#chronoform-form_name").offset().top
    }, 1000);
});

Bob

Max_admin 09 Jan, 2015

One more note, if you want to scroll to a thanks message after the form is submitted, then the form will not be present, you need to display the message inside a "div" element, and assign an id for that div and use it.

Regards,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

jc

jcalvert 09 Jan, 2015

BN: Thanks, but I don't see how to make the FAQ code work for my case.

I am waiting for a response from Max.

JC

jc

jcalvert 09 Jan, 2015

Answer

GreyHead and Max: Thanks for suggesting the jQuery code.

I have found a solution ... works like a charm for both cases of the form submitted without error, and with error (e.g. bad Re-Captcha). What I actually needed was to place an HTML anchor just above the form, and then have the jQuery code placed in the On Submit, Load Javascript. The jQuery code makes the page scroll to the point just above the form.

Here's the code**:

$(document).ready(function() {
function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
scrollToAnchor('myform');
});

Replace "myform" with the name of your anchor.

[** Thanks to Brad Knutson. http://bradsknutson.com/blog/smooth-scrolling-to-anchor-with-jquery]

Maybe this should be the default behavior after submit, or at least selectable through the UI.

best,
JC

Max_admin 10 Jan, 2015

Thanks for sharing the final solution!!🙂

Regards,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

ls

lselbach 04 Jan, 2016

Jcalvert, thanks for sharing - it worked for me too!
(Maybe could be posted inside a FAQ)
=)

Check the new Joomla Extension Builder

scroll to top of form when form submitted