Form not pushing to the top after page break

  • Verge
    Asked on September 3, 2014 at 3:05 PM

    Hi. I have a long form I've embedded into a Wordpress site with multiple page breaks. However, if I've scrolled down the page to read the form and then click the next button, it doesn't kick me up to the top of the form, it takes me to the same page area on the next portion of the form? Is there anyway to fix that? Thanks!

  • Kiran Support Team Lead
    Replied on September 3, 2014 at 4:23 PM

    I understand that clicking on next button is not scrolling to top of the form section on the next page. As I checked your form on Chrome v37 and Firefox v31, it seems to be working fine since it scrolls to the top of the form section when clicked on next.

    Could you let let us know on which browser it is getting effected? Could you try embedding the form using the Wordpress-Plugin? If the issue still persists or different, please get back to us so that we can look into this further.

    Thank you!!

  • Verge
    Replied on September 4, 2014 at 5:54 PM

    I'm having the issue in Firefox specifically when viewing the form embedded into my site on a smaller screen size, like a laptop size. I've installed the Wordpress plugin you recommended with the form ID and am still getting the same problem.

  • Elton Support Team Lead
    Replied on September 4, 2014 at 11:47 PM

    @Verge 

    Try to use iframe embed code, this might help resolve the problem. Iframe embed code comes with the supporting script for pagebreak, this should pull up the form when clicking page break buttons.

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Let us know if this doesn't make any difference. Thanks!

  • Verge
    Replied on September 5, 2014 at 8:36 AM

    Hi, I've switched the form to the iFrame version, and what I'm noticing is that when I click the "next" button, I'm taken to the top of the first option under the question, but the question gets cut off? See screenshot: http://note.io/1qthrXN

    Thanks for your help on this.

  • KadeJM
    Replied on September 5, 2014 at 11:05 AM

    I checked this on my laptop that I normally use as well as in FireFox and I do believe that I am able to see the problem you are speaking about.

    I think you are probably referring to how your page jumps places when the form is being used. So because of that it is giving the false sense of being cut off even though it really is not.

    Screenshot of Problem:

    Form not pushing to the top after page break Image 1 Screenshot 20

    inspected this problem but I don't think it's the form causing this issue because if you look at your form by itself then that doesn't happen whatsoever yet on your site it is clearly a problem because of how and where your form has been placed.

    You may want to try using the ?nojump script to see if that works at all.

    nojump? (add this to the end of your src form url inside the embedded script)

    Example:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotformpro.com/form/42375571393965?nojump" frameborder="0" style="width:100%; height:1480px; border:none;" scrolling="no"></iframe>

     

  • Verge
    Replied on September 5, 2014 at 4:38 PM

    I just added the ?nojump tag to the iframe and I don't see a difference unfortunately. This is a simple Wordpress site using the native 2012 theme? Is this something you've seen before?

  • KadeJM
    Replied on September 5, 2014 at 5:19 PM

    Yes we've had a few reports about similar problems like that before. It's one of those things that tends to be of an inconvenience, but we'll try to do what we can to help get it fixed so that your form works as you need it where it is.

    When you embedded your iframe did you try embedding just the iframe part and leaving out the script?

    Usually the form should stay within the iframe container without moving too much.

    Another way is by adjusting it's location -

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/42476523201144" frameborder="0" style="width:100%; height:14096px; border:none;" scrolling="no"></iframe> 

    Let us know if it's still a problem and we'll see what else we can figure out for it.