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

    Form embedded via iFrame: Page jumps or scrolls at the top or bottom after clicking submit

    Asked by 2ezy on March 30, 2015 at 01:29 AM
    One last question my form height is just over a desktop screen in height.

    When I submit it on the desktop the vertical scroll bar goes to the bottom of the page and I can see the thank you message at the top of the screen. But on mobile all I see is the footer and not the message unless I scroll up.

    So my question is after submitting the form can the screen (no matter what device the person is using) be centred on the thank you message.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2015 at 01:56 AM

    Hi,

    May I know if this happens using the direct link of the form or is it embedded on a website?

    I've tested it on a Android device and I can't seem to replicate the scroll problem. Also, could you tell us to which device this happens so that we can further check.

     

    We'll wait for your response.

    Kind regards.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2015 at 03:01 AM

    Hi Mark,

    It seems like you embed it using iFrame, is that right?

    <iframe id="JotFormIFrame" style="width: 100%; height: 1700px; border: none;" src="//form.jotformpro.com/form/50878115520958" width="300" height="150" frameborder="0" scrolling="no"></iframe>

    It seems like there's a redundancy in the width and height attributes. Could you try removing the excess ones and the form is also quite long. Here's how I would edit it:

    <iframe id="JotFormIFrame" style="width: 100%; height: 1600px; border: none;" src="//form.jotformpro.com/form/50878115520958?nojump" frameborder="0" scrolling="no"></iframe>

    I added a "?nojump" that should prevent the form to scroll inappropriately, also I adjusted the height to 1600px to avoid excess space, it is possible that it scrolls to the footer because it has an excess space.

    You can also try defining a specific max height or width in your "Thank You" message page.

     

    Please see if the following solutions work.

    Kind regards

  • Profile Image

    Answered by 2ezy on March 30, 2015 at 07:44 AM

    Hi Charlie,

    Ok did all those things but doesn't seemed to of helped and yes the form is embed by an iframe.

    Ipad portrait is alright but landscape it sits at the bottom of screen and all you can see is the footer.

    On mobile it is now chopping off the bottom of the form so the capcha and submit button are hidden. See attached

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2015 at 11:10 AM

    Hi Mark,

    Could you try setting the iFrame code again the height to 1900px, to avoid the form being cut down.

    Also, just to confirm, are you still getting the jumping of the form to the footer when you're on the thank you message page?

    After you set it back again I'll try to test open the website on my mobile device to make a test submission.

    We'll wait for your response

    Kind regards.

  • Profile Image

    Answered by 2ezy on March 31, 2015 at 12:51 AM

    Hi Charlie,

    I have converted some of the radio button fields to drop down fields so I have kept the height at 1600px and this fits the whole form on mobile view.

    Yes after submission the scroll bar goes hard to the bottom which means only the footer is seen on mobile.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Jan on March 31, 2015 at 09:27 AM

    Hi there,

    On you iFrame code please remove the script code below <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>

    It means that you should only use this code.

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

    As you can see, I included onload="window.parent.scrollTo(0,0) attribute. The 0,0 is equals to X and Y of the page. X is for the horizontal grid and Y is for vertical.

    Please try this one and see if it works for you.

    Hope this helps. Thank you.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 01, 2015 at 02:19 AM

    Hi Mark,

    In line with my colleague's suggestion, could you try removing the onload or ?nojump attribute of the embed form and see which one works better in your end. 

    Example:

    1)

    <iframe id="JotFormIFrame"  allowtransparency="true" style="width: 100%; height: 1600px; border: none;" src="//form.jotformpro.com/form/50878115520958?nojump" frameborder="0" scrolling="no"></iframe>

    2)

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

    After this changes, do let us know which one shows better result then we'll test it in our end.

    Kind regards.

  • Profile Image
    JotForm Support

    Answered by Charlie on April 01, 2015 at 09:51 AM

    Hi Mark,

    I made a test submission in your form to verify the problem, and you should receive a notification on it. It seems like none of our solutions seems to work. I'll need to escalate this to our back end team so that they can further check, my best guess is that the iFrame code has some issues on jumping parts of the form when embedded on a website.

    While the back end team is testing the iFrame, could you try embedding to iFrame code in your website:

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotformpro.com/form/50878115520958" frameborder="0" style="width:100%; height:1417px; 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>

     

    See if that displays a better output.

    Kind regards.

  • Profile Image

    Answered by 2ezy on April 02, 2015 at 05:40 AM

    Hi Charlie,

    I had a thought about your option 1 above with this code

    <iframe id="JotFormIFrame"  allowtransparency="true" style="width: 100%; height: 1600px; border: none;" src="//form.jotformpro.com/form/50878115520958?nojump" frameborder="0" scrolling="no"></iframe>

    This worked in keeping the scroll bar in the same spot but because the form is a fair bit longer than the thank you message we couldn't see it. What if we added some spacing to the top of the thank you message so it brings it down into view.

    If that worked all we would have to do is fix the capcha not loading issue.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Charlie on April 02, 2015 at 09:30 AM

    Hi,

    I'm testing again the form, although this is already reported to the back end team, I'll make a follow up on the captcha, it seems that the problem is more frequent now.

    Regarding the jumping of page, could you try embedding this iframe code:

    <iframe id="JotFormIFrame" allowtransparency="true" src="//form.jotformpro.com/form/50878115520958?nojump" frameborder="0" style="width:100%; height:1417px; 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>

    It's almost the same with option 1 but we added the <script> and it has the ?nojump code at the end. See if that works. 

    If you would like to add some spacing on the "Thank You" message, then you can add this styling in your HTML style attribute in your thank you message:

    padding-top or padding-bottom.

     

    But before that, try the new embed code that I mentioned above, if that didn't work try the padding attribute to position the thank you message.

    Kind regards.

  • Profile Image
    JotForm Support

    Answered by Jan on April 03, 2015 at 05:38 AM

    Hi Mark,

    I understand that the captcha problem is already fixed. This issue was already escalated to our developers so that they can take a look at it. 

    However, if you want to try this and tell us if this works for you. I copied the code that Charlie posted above and added the onload attribute with a value of 630px for the vertical space. The problem with this is that when you visit the webpage, it will immediately jump 630px downwards where your form is. The same thing will happened once hit you hit submit.

    <iframe id="JotFormIFrame"  onload="window.parent.scrollTo(0,630)" allowtransparency="true" src="//form.jotformpro.com/form/50878115520958?nojump" frameborder="0" style="width:100%; height:1417px; 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>

    If this won't work for you then please let us know so that we can notify our developers.

    Thank you.

  • Profile Image

    Answered by 2ezy on April 03, 2015 at 08:58 AM

    Hi Jan,

    This won't work as I need the visitors to see info at the top of page before filling in the form.

    If it could only be applied after the submission that would be the best option.

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Charlie on April 03, 2015 at 09:57 AM

    Hi,

    I made another test submission in your form and now it jumps to the bottom page of the form, it seems like we'll need to wait for the developers to have it fixed. I see someone is already working on it and I'll update the bug report for them to be aware of the changes we're doing.

    We'll update you as soon as we get a fix on this.

    Apologies for the inconvenience and thank you for your patience and understanding.

    Kind regards.

  • Profile Image
    JotForm Support

    Answered by Jan on April 03, 2015 at 07:31 PM

    We'll notify you via this thread once and update is available. Thank you for your patience.

  • Profile Image

    Answered by 2ezy on April 17, 2015 at 04:43 AM

    Hi had to keep the project moving so

    I have redesigned the form to be wider and not as long and have more or less fixed the issue we were having above. But some issues with the new form are as follows:

    1) The three rows of tab selections through the middle of the form are not responsive even though I have that selected. Also is the font size in these tabs able to be made slightly bigger?

    2) Swap BCC dump vouchers for cash is not responsive either.

    3) Is the suburb drop down box able to be made look like the other text box fields (ie no insert shadow.

    4) In delivery day and pick day calendar fields the icon is creeping inside the input field. This is worse when in mobile view. Also in mobile view when the calendar pops up it displays outside the screen range.

    5) The form seems to be sitting away from the left hand edge of the webpage when I use the iframe method to insert. Can this be made to sit hard to the left.

    Form is here  http://www.jotform.com//?formID=51058577239968#

    Thanks Mark

  • Profile Image
    JotForm Support

    Answered by Jan on April 17, 2015 at 07:45 AM

    Hi Mark,

    In order to assist you properly, I created a new thread for your questions. This is the URL/link of the new thread: http://www.jotform.com/answers/554145

    Thank you for understanding.

  • Profile Image

    Answered by Khan Tabish  on April 18, 2016 at 05:59 AM

    I am facing the same issue on iPhone. when user click on the link it send user on the top. but its fixed with the code which you have provided in the above threads.

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

    But its not working when i make the height=100%. 

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

    please help.