Form submission - scroll to top of page | Community
Skip to main content
M
MoritzTr
Level 3
February 12, 2018
Question

Form submission - scroll to top of page

  • February 12, 2018
  • 1 reply
  • 4387 views

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>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Gerard_Donnell4
Gerard_Donnell4
Level 9
February 12, 2018

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

M
MoritzTrAuthor
Level 3
February 12, 2018

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>

Terms & ConditionsAccessibility statement

Loading footer...