Form changing the page position on clicking Next.

Hi All,

Thanks for taking the time. 

So, I have added the form on the web page but for some reason when you click the 'next' button it seems to move the position of the page down to the top of the form.

You can see what I mean here: http://ub.the-debt-advice-people.co.uk/form-debt-test/

Thanks 

I checked your URL and I see the problem. Could you please try adding the ?nojump at the end of the URL in embed code:

If it is regular script embedded:

<script type="text/javascript" src="//form.jotformpro.com/jsform/1234567890?nojump"></script>

And, if it's iframe, follow this:

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

Just replace the code with your embed code.

Let us know if that helped.

Thank you!

Hi Nik,

Thanks for your time on this.

It is embedded code but I am struggling to find the line of code you mentioned.

Would I just add that line of code to the bottom of the html? 

Thanks, 

You should be able to find the code in your website's source code:

And here is the code of your form that you should put instead:

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

Please check and let us know how it worked.

Thank you!

Hi Nik,

We use unbounce to build our pages. I have the ability to add the code but I don't have the knowledge to edit it. 

I simply copied and pasted the source code into unbounce as custom html. 

Would I add the code that you have above into unbounce or do I edit the source code somewhere? I still can't seem to find the code for editing in the source code.

Thanks 

George

Can you please share to us the URL of your website where we can also test the actual form used. It will help us determine a resolution that will work once we are able to review the actual form in action on your website.

You may also try first re-embedding the form using its iframe publish code and then check if the jumping issue still happens.

We will wait for your response.

Hi Jonathan,

I have tried it as an iframe and it still happens and there seem to be a few other issues that turn nup so I have moved it back to source code.

You can find the page here: http://ub.the-debt-advice-people.co.uk/form-debt-test/

Thanks 

George

I have performed some tests and found that adding "?nojump" will work, since you're using the source code I've tried to pass the variable through the webpage's URL and I could see it works: 

http://ub.the-debt-advice-people.co.uk/form-debt-test/?nojump 

So following the workaround provided by Nik_C should work to avoid the form to jump when navigating through its pages. You will need to get the iFrame code and remove all the JavaScript code, then add the "?nojump" variable in the form's link: 

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

This should help you to avoid conflicts between the form's and your page's codes and also you help to avoid the jump effect. 

If this still does not work, please do not remove  the iFrame code from your webpage and let us know, we  will be glad to further inspect this. 

Hi Kevin,

Thanks for taking the time.

Here is the amended URL: http://ub.the-debt-advice-people.co.uk/form-debt-test/nojump/

That seems to have worked but as mentioned earlier the 'next' button now seems to have taken on a life of its own and moved closer to the bottom question and off to the right. Any thoughts on how I can bring it back to the left as it was with the embedded code? 

Thanks,

George

Thanks for the additional info George. 

I've checked your form now and found what you're reporting, the buttons seem to be closer to the last field when embedded using the iFrame code. 

Upon inspecting the styles of the form  I can see it might be happening due to the iFrame's width, what I would suggest you is to inject the following code to your form through the Form Builder, then when you reload the page you will see the change applied: 

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    [data-type="control_pagebreak"] {

        padding-top: 25px;

        padding-right: 25px;

    }    

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

This should be the result: 

Could you please give it a try and let us know how it goes? 

We'll wait for your response. 

Hi Kevin,

Thanks for the response. 

So I have added the CSS code which sort of fixed it but not quite.

So first, it seems that the problem has no returned where clicking the button drops the page down. Also, the button on the second page seems to be further down than it should be and was.

Any thoughts?  http://ub.the-debt-advice-people.co.uk/form-debt-test/nojump/

Thanks 

George

I have checked the provided web page and see that the form URL is not having ?nojump parameter in the embed code. I have tried adding the ?nojump parameter to the URL from the browser inspector and see that the next button is working fine. Please see the screencast below:

Please edit the web page to change the iframe code by adding the ?nojump to the form URL and let us know how it works.

Thanks!