Multi-page form jumps down my web page everytime I click "Next"

  • Profile Image
    BIRAdmin
    Asked on August 29, 2018 at 07:40 PM

    Hi - check out the multi-page form I created here: https://bainbridgerowing.org/juniors-registration/. It's the one that has 11 pages. Every time someone ticks the answers and then "Next" it jumps down the web page when loading the next form page rather than just staying on the form. Very bad UX. How can I correct that?

  • Profile Image
    Jed_C
    Answered on August 29, 2018 at 09:55 PM

    Please replace all the script embed code on your site with the iframe code below.

    <iframe id="JotFormIFrame-82394669284169" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82394669284169?nojump" frameborder="0" style="width: 620px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> 

    <iframe id="JotFormIFrame-82396062684162" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82396062684162?nojump" frameborder="0" style="width: 620px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

    <iframe id="JotFormIFrame-82395905284163" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82395905284163?nojump" frameborder="0" style="width: 620px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

    Let us know how it goes.    

  • Profile Image
    BIRAdmin
    Answered on August 31, 2018 at 11:23 AM

    That did not fix it. In fact it made it so that some of the text and the “Next” button are not visible. See this screenshot below. The text in the first form is not scrollable at all.

    Also, the lower two forms now have a bunch of unwanted space below them:


  • Profile Image
    BIRAdmin
    Answered on August 31, 2018 at 11:26 AM

    I'm uploading the screenshots referenced in my response above, since they did not seem to paste into the answer box. 1535729160BIRFormScreen1.png1535729171BIRFormScreen2.png

  • Profile Image
    BDAVID
    Answered on August 31, 2018 at 12:56 PM

    Please remove the following line onload="window.parent.scrollTo(0,0)" from the Iframes, and set the scrolling property to "yes":

    <iframe id="JotFormIFrame-82394669284169" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82394669284169" frameborder="0" style="width: 620px; min-width: 100%; height:539px; border:none;" scrolling="yes" > </iframe> 


    <iframe id="JotFormIFrame-82396062684162" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82396062684162" frameborder="0" style="width: 620px; min-width: 100%; height:539px; border:none;" scrolling="yes" > </iframe>


    <iframe id="JotFormIFrame-82395905284163" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/82395905284163" frameborder="0" style="width: 620px; min-width: 100%; height:539px; border:none;" scrolling="yes" > </iframe>

     

    Let us know if that helps.