Form submission - scroll to top of page

Form submission - scroll to top of page

Thanks to Sanford Whiteman​ I was able to add a thank you message after form submission.

The script works beautifully. What I would like to add is a scroll to the top of the page after submission but could not figure out how to do this.

I would appreciate it if someone could help me here.

Script used is:

<script src="//EnterYourReferenceHere.marketo.com/js/forms2/js/forms2.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script>// <![CDATA[

MktoForms2.whenReady(function (form) {

    //Add an onSuccess handler

form.onSuccess(function(values, followUpUrl) {

     var email = form.vals().Email,

       firstName = form.vals().FirstName,

lastName = form.vals().LastName,

     html = "<h4 style='text-align: left;'>Thank you $firstName $lastName ($email) for your submission!<br/>Please check your email for a confirmation</h4>";

     html = html.replace("$firstName", firstName);

     html = html.replace("$email", email);

     html = html.replace("$lastName", lastName);

     // Get the form's jQuery element and hide it

     form.getFormElem().hide();

     // Return false to prevent the submission handler from taking the lead to the follow up url

     form.getFormElem().after(html);

     return false;

   });

});

// ]]></script>

2 REPLIES 2

Re: Form submission - scroll to top of page

Have you tried adding the following to the end of your script:

window.scrollTo(0, 0);

Sanford Whiteman​ will know better though.

Where is the form located on your page? Does the message replace the form?  If its below the fold then as soon as the form is submitted the scroll will also kick in, not really leaving enough time to see the message. You might need to add a delay but I am not sure about the user experience of adding this feature.

Thanks,

Gerard

Re: Form submission - scroll to top of page

Thanks for the hint. I added the code snippet to the end of the script and it does the trick. Maybe a bit abrupt (no smooth scrolling) but its better than nothing 🙂

Cheers again.

Here is the final script that wroked for me:

<script src="//EnterYourReferenceHere.marketo.com/js/forms2/js/forms2.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<script>// <![CDATA[

MktoForms2.whenReady(function (form) {

//Add an onSuccess handler

form.onSuccess(function(values, followUpUrl) {

var email = form.vals().Email,

firstName = form.vals().FirstName,

lastName = form.vals().LastName,

html = "<h4 style='text-align: left;'>Thank you $firstName $lastName ($email) for your submission!<br/>Please check your email for a confirmation</h4>";

html = html.replace("$firstName", firstName);

html = html.replace("$email", email);

html = html.replace("$lastName", lastName);

// Get the form's jQuery element and hide it

form.getFormElem().hide();

window.scrollTo(0, 0);

// Return false to prevent the submission handler from taking the lead to the follow up url

form.getFormElem().after(html);

return false;

});

});

// ]]></script>