2 Replies Latest reply on Feb 12, 2018 8:11 AM by Moritz Trollmann

    Form submission - scroll to top of page

    Moritz Trollmann

      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>

        • Re: Form submission - scroll to top of page
          Gerard Donnelly

          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

           

          1 of 1 people found this helpful
            • Re: Form submission - scroll to top of page
              Moritz Trollmann

              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>