How to land at top of page after submitting form to see the Thank You message?

  • Profile Image
    youngivyacademy
    Asked on August 08, 2019 at 11:38 AM

    I already have a Thank You message set up on the Thank You page. 

    Since my form is on the longer side, once a user submits the form at the bottom of the page, they aren't able to see the Thank You message located at the top of the page (they have to scroll up, which is not user-friendly). 

    Attached is a screenshot of what a user sees immediately after submission. 

    The background of the form is black (hence the black background), and it can cause confusion for users who may think that the form didn't submit properly and are faced with a blank page. 

    Screenshot
  • Profile Image
    stevenmarshall
    Answered on August 08, 2019 at 12:10 PM

    Hi @youngivyacademy,

    I cloned your Form ID: 92145202672148 and did a few test submissions via desktop and mobile but was not able to duplicate the issue. I was shown the Thank you page.

    1565280190Screen Shot 2019-08-08 at 9.00

    From Mobile device:

    1565280231Screen Shot 2019-08-08 at 9.00

    Is your Form Embedded on your website? If so, we might need to add some code to have that page scroll to top after submission.

    Can you tell us how you are embedding your form and send us the URL link as well?

    Waiting for your response.


  • Profile Image
    youngivyacademy
    Answered on August 08, 2019 at 12:50 PM

    Hi @StevenMarshall, 

    I followed the embedding instructions here (we use WiX): https://www.jotform.com/help/70-Adding-a-Form-to-Your-Wix-Site

    And here is the form on our site: https://www.youngivyacademy.com/online-form-after-school

    The Thank You Page works fine when submitting on Jotform directly, but on the website, the user stays at the bottom of the page after completion without seeing the Thank You message at the top. 


  • Profile Image
    stevenmarshall
    Answered on August 08, 2019 at 01:51 PM

    Hi @youngivyacademy,

    Thank you for the additional information.

    This issue is usually associated to script conflict when using JS script embed code of the form.

    I took a look your embedded form and one suggestion is to embed your form using IFrame code instead to see if this resolves the issue you are experiencing with the form not scrolling to the top of Form after submission.

    Guide: https://www.jotform.com/help/148

    Waiting for your response.

  • Profile Image
    youngivyacademy
    Answered on August 08, 2019 at 03:34 PM

    Hi @StevenMarshall,

    Just tried the iFrame code instead. While it allows submissions just fine, the form is still not scrolling to the top after submission. 

    I'm still stuck at the bottom of the page, with the Thank You message all the way up to.

  • Profile Image
    Richie_P
    Answered on August 08, 2019 at 04:21 PM

    Using the Iframe code, we can try adding the  onload="self.scrollTo(0,0)" code.

    Your iframe code should look like this:

     <iframe onload="self.scrollTo(0,0)" id="JotFormIFrame-92145202672148" title="FINAL After School Registration Form"  allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/92145202672148" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

    Please give it a try and let us know how it goes.

  • Profile Image
    youngivyacademy
    Answered on August 08, 2019 at 08:06 PM

    Hi @Richie_P and @StevenMarshall, 

    The additional snippet of code still didn't do the trick. Do you have any other ideas? 

  • Profile Image
    jherwin
    Answered on August 08, 2019 at 08:49 PM

    Hello @youngivyacademy - Have you tried embedding the form using the stripped iFrame embed code only? If not, please get the embedded code provided by my college and see if it works.

    Here:
    <iframe onload="self.scrollTo(0,0)" id="JotFormIFrame-92145202672148" title="FINAL After School Registration Form"  allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/92145202672148" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" ></iframe>

    Please use the embed code above and let us know how it goes.

  • Profile Image
    youngivyacademy
    Answered on August 08, 2019 at 09:56 PM

    @jherwin, @Richie_P, and @StevenMarshall, 

    That still doesn't work. I used the iFrame embed code with the snippet he added. 

  • Profile Image
    roneet
    Answered on August 08, 2019 at 10:35 PM

    What I can suggest to you is to try embedding your form using the form URL and paste it on the Website Address section.

    https://form.jotform.com/92145202672148

    Let us know how it goes.

    Thanks.

  • Profile Image
    youngivyacademy
    Answered on August 09, 2019 at 01:28 AM

    Hi @roneet, 

    That didn't work either.

    But I found another solution: instead of expanding the form to its full size on the site, I made it smaller. The result is two pairs of scoll bars (one for the form itself and one of the WiX website), but now the Thank You message is legible after submission. 

    I think this could be something you or another support specialist could include in Jotform's help documentation. If a form created is particularly long, then it should be noted that the form itself shouldn't be fully lengthened on a web page, so that it lands at the Thank You message after submission. OR Jotform's development team could figure out another way to make the form jump to the top after submission. 

    In any case, thank you all for your proposed solutions! 

  • Profile Image
    roneet
    Answered on August 09, 2019 at 01:39 AM

    Thanks for providing this information. We would definitely take a note of it.

    Thanks.