What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Page seems to jump when next button is clicked in iframe form on Wix website

    Asked by goquote on March 18, 2015 at 05:16 AM

    You can see best here:

    http://www.gotreequotes.com.au

    Click the button on the form to go the the next page of the form and the whole page jumps up. It is very annoying and I feel could be costing me conversions.

    How can I fix this?

    By the way I have tried this on the 4 big browsers Chrome, IE, Safari. Firefox and all have the same issue. I have cleared the chase on all. I have spoken to several users and all have experienced the same so you should have no trouble reproducing it.

    best regards

    Ben

    Page URL:
    www.gotreequotes.com.au

    jump iframe embed Wix website Wix next button
  • Profile Image

    Answered by Ben on March 18, 2015 at 11:22 AM

    I see that it jumps to the parent iframe start - which is at the start of the entire form

    Once it gets there, you can go back and forth and it will not move.

    Is this the same what you are experiencing?

    This happens so that everything is shown to the person filling the form out, but you should be able to turn it off by adding ?noJump at the end of the link in the iframe code.

    The change would be from this:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 467px; border: medium none;" src="//form.jotformpro.com/form/50697893931976" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe>

    to this:

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

    Do let us know if that works for you.

  • Profile Image

    Answered by goquote on March 18, 2015 at 12:28 PM

    Hi there,

     

    Thanks for your reply.

    I have tried adding ?noJump to the code to no avail. This is what my code looks like...

     

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

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Just to confirm I changed the code being entered into the iframe on the wix site.. is that right? Id did nothing to the actual code in jotform..

    Is there something else you can see above with the code that I should change to fix it?

    I don't know CSS but this stands out to be a little sus:

    {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if 

    I appreciate your timely response

    Best regards
    Ben

  • Profile Image

    Answered by goquote on March 18, 2015 at 12:29 PM

    Just to confirm:

    "I see that it jumps to the parent iframe start - which is at the start of the entire form. Once it gets there, you can go back and forth and it will not move. Is this the same what you are experiencing?"

    This is what I am experiencing.

    Cheers

  • Profile Image

    Answered by Ben on March 18, 2015 at 02:10 PM

    The code above seems right Ben and your question about that part of code is well based, so lets try using the following code to see if it helps:

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

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    I just removed that part: case "scrollIntoView":iframe.scrollIntoView();

    If that does not resolve the issue for you, please consider using js embed option with ?nojump parameter.

  • Profile Image

    Answered by goquote on March 18, 2015 at 02:44 PM

    Unfortunately that did not work either,... All I got was a nav bar down the side.

     

    My website is a WIX site. As far as I am aware all I can use is the iframe to embed.

     

    Can you suggest something else. I need to get this resolved.

     

    Regarsds

    Ben

  • Profile Image

    Answered by Ben on March 18, 2015 at 04:49 PM

    I am not quite sure why it would show a scrollbar on the right Ben.

    I see it for a brief moment, but it is removed afterwards.

    Looking at the code, I am still however seeing as if your iframe is calling the entire script:

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight &gt; window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Notice the bold part that should have been removed. - Did you restore this back by some chance?

    If it still continues to do that, let us know and we will raise it to our developers for inspection.

  • Profile Image

    Answered by goquote on March 19, 2015 at 03:07 AM

    That has done the trick!!

    I had not taken out ALL of the code. This time I did and it worked.

    Many thanks for your advise and patience

     

    Best regards

    Ben

  • Profile Image
    JotForm Support

    Answered by EltonCris on March 19, 2015 at 09:24 AM

    On behalf of my colleague, you're welcome!

    Feel free to contact us again should you have more questions.

    Thank you!