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

    Fixed header is hiding the form on the page so scrolling into view does not seem to work properly

    Asked by tgbam on October 13, 2015 at 04:03 AM

    I have a Jotform embed via iFrame on my website: http://www.tgbam.nl/#!reserveren/cezu.

    If i have my browser window in a small size (e.g. quarter of the screen) and i fill in the first page of the form, when i press the next button the next page of the form will automatically scroll to the bottom of the form. In my case this means that the questions on the top of the form are not visible, creating confusion and failure with customers who are trying to fill it in.

    What can i adjust in the code to remedy this?

     

    (attached a picture of how the first page is presented, then how the second page is presented after clicking next, and how I want it to show up after clicking next) 

    iframe form form on JotForm size uploads next
  • Profile Image
    JotForm Support

    Answered by beril on October 13, 2015 at 08:10 AM

    Hi,

    Thank you for contacting us.

    Can you change the IFrame code below?

    Form:

    https://form.jotform.com/52852652261960

    To:

    http://www.jotform.com/form/52852652261960?nojump

    I hope it works.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by tgbam on October 13, 2015 at 08:31 AM

    Hi Beril,

    thanks for your response. Unfortunately it doesn't seem to be working. When i replace the src, it displays a whole mess of code instead of the form.

    Do you have any other suggestions?

  • Profile Image
    JotForm Support

    Answered by beril on October 13, 2015 at 09:57 AM

    Hi,

    I am sorry for confusion.

    Update:

    http://www.jotform.com/form/52852652261960?nojump

    If it is not a solution for you I will workaround and inform you as soon as possible.

    Thank you for your understanding.

  • Profile Image

    Answered by tgbam on October 13, 2015 at 10:14 AM

    Hi Beril,

    Again it does not seem to do the trick. It still jumps to the bottom of the page when you press next. It only ads this button with an "up" arrow. Funnily enough: when you click it it scrolls to the BOTTOM of the parent page. Something seems to be messed up. It thinks up is down or something. 

  • Profile Image
    JotForm Support

    Answered by Charlie on October 13, 2015 at 12:31 PM

    Hi,

    I can't seem to replicate the problem. I presume you are using Wix.com as your website builder. I tried it in my end, I cloned your form and embedded it on my website, here it is: http://charmiequino.wix.com/jotformtestsite#!iframe/c1oha.

    However, the problem seems to be related to the fixed menu you have at the top, it actually covers almost 1/3 of the page. I believe the form jumps at the very top of the page, just like how my form works. 

    However, could you try embedding this form instead, this came from directly in your form builder:

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/52185446734965"

          frameborder="0"

          style="width:100%;

          height:514px;

          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;

            }

            var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

            if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

              var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

              iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

            if(ifr && get.length > 0) {

              var src = ifr.src;

              src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

              ifr.src = src;

            }

          }

          </script>

     

    If I am not mistaken, the page tries to position your form at the top so that it can easily be read from top to bottom, but because the page has an overlay menu, what happens is that it displays at the back of it.

     

    See if the above embed code works, if not, please let us know and we'll try to find a workaround, but I believe this is more related to the overlay menu.

  • Profile Image

    Answered by tgbam on October 13, 2015 at 03:17 PM

    Hi,

    indeed that seems to be the problem! However the new script doesn't solve it. But isn't it possible to enter something other than '0,0' in the  onload="window.parent.scrollTo(0,0)" part? Thereby making sure it jumps to just below the header?

    Before i didn't use the iFrame code, but just the standard embed. I didn't have this issue then. But there were some other issues with different browsers.

    So there should be a fix somewhere in the code i guess. Too bad I don't know what more than half of it means. (btw: thanks so much for your thorough and quick responses: You guys are the best!)

     

  • Profile Image

    Answered by tgbam on October 13, 2015 at 03:38 PM

    Ok, so I kind of solved it by leaving out the

      switch (args[0]) {

              case "scrollIntoView":

                iframe.scrollIntoView();

    part.

    Now it doesn't scroll it behind the header anymore. I am now stuck with 2 other problems.

    1) on the 4th page of the form (the longest page) i need to scroll down in the iframe to reach the next button. However, once i click it, it now doesn't automatically scroll to the top of the iframe window, leaving the "Send" option invisible. People might think they're done and simply exit the browser. I would prefer for the site to adjust to the length of the form (longest is about 600 px). And/or that it jumps to the top within the iframe (not the parent window)

     

    2)How do i get rid of the ugly button with the 'up' arrow?
  • Profile Image

    Answered by tgbam on October 13, 2015 at 04:00 PM

    btw: i moved it to http://www.tgbam.nl/#!jotform/lynhq because the embeded form is not documenting entrants any more for some reason

  • Profile Image

    Answered by Carina on October 13, 2015 at 06:39 PM

    I will make further tests and will get back to you later.

    I moved the arrow question to a new thread:

    http://www.jotform.com/answers/680741 

    If you need further assistance please let us know as we're here to help.

  • Profile Image

    Answered by Carina on October 13, 2015 at 06:46 PM

    Still with the previous issue of the fixed position menu, I added a position option to the iFrame code so that the iframe would be positioned 190 px from the top (so that it didn't get covered by the fixed menu):

      <iframe style="position:relative; top:190px;" id="JotFormIFrame" onload="window.parent.scrollTo(0,0)"

    You can test it here:

    https://shots.jotform.com/carina/exp_html/scroll_to_top.html 

    Let us know if it works.

     

  • Profile Image

    Answered by tgbam on October 14, 2015 at 08:04 AM

    Ok,

    So I've reimplemented the iFrame in the original page (http://www.tgbam.nl/#!reserveren/cezu.) since it's now properly working again.

    I've resolved the issue of the forced 'jump to the bottom(/top)' by leaving out this piece of code:

      switch (args[0]) {

              case "scrollIntoView":

                iframe.scrollIntoView();

    However, this doesn't resolve the fact that when I have to scroll down myself, to reach the next button on a 'long' page, that it doesn't scroll back up after clicking next (not in the iFrame AND not in the parent window - that's the browser, right?). Which means that the "Send button", in certain unfortunate conditions (small browser window/scrolled way down), is left invisible once you've pressed next. (I have now resolved this slightly by rearranging the layout of my jotform and an added picture. This is far from ideal)

    Carina, your solution was promising. However, when I implemented it in my website it messed up the entire layout from the start: it shoved the start of the form 190 px BELOW the header (so there was a large blank space). Further more it also reduced the forms visibility. It looked like the margins of the form had somehow expanded dramatically.

    I now have a workable solution, but what i would really like is this:

    When you press a next button on the form, it should automatically scroll both the browser window AND the iFrame window to the top. Is this at all possible? (I guess the solution probably means reimplementing the code i left out somehow :P )

     

     

  • Profile Image
    JotForm Support

    Answered by beril on October 14, 2015 at 10:51 AM

    Hi,

     

    Upon further investigation and made a couple of test. Unfortunately, I couldn’t find any solution for this issue.

    I will forward this issue to our developers. We will inform you as soon as possible, when we solve the problem.

    Thank you for your understanding.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by Ben on October 15, 2015 at 05:46 PM

    I took a look at your replies on this thread and would like to let you know that since you have removed this:

      switch (args[0]) {
       case "scrollIntoView":
       iframe.scrollIntoView();

    You have caused multiple issues happening inthe js part of your form - very likely impacting some other functionality on your website.

    Please do note that this part: switch (args[0]) is needed in order for the js code to be valid and not causing any errors on your page.

    My suggestion would be to apply the same code that my colleague Charlie mentioned above, but to remove only this part:

    case "scrollIntoView":
       iframe.scrollIntoView();
       break;

    Doing so, the scroll into view will not work as it was before.

    Once you do that, please do let us know and we will be happy to check and try a different approach, at this time the same can not be done because of the errors - so please do update us here once you do.

    Please do note that the specific issue here is that your header is big, which is why it is loaded like that and since you are using Wix there are other issues - mainly Wix creates an iframe around the jotforms iframe, so we might need to write a code that would go around this and to take into account the header size.

  • Profile Image

    Answered by tgbam on October 16, 2015 at 04:24 AM

    I've moved it again to  http://www.tgbam.nl/#!jotform/lynhq  because indeed: it seems to be malfunctioning again. However, this seems to be a Jotform problem now, because even when i copy de code exactly from the iFrame embed options. It gives an error. I have not yet been able to test your solution Ben, but I will as soon as this bug is fixed.

    I've added a direct link to the form on http://www.tgbam.nl/#!reserveren/cezu so people can still fill it out. But this is also malfunctioning!

  • Profile Image

    Answered by Sammy on October 16, 2015 at 08:29 AM

    I have tested both URLs and the forms seem to load fine on both.

    Could you kindly confirm if you are still facing the issues on your end.

  • Profile Image

    Answered by tgbam on October 16, 2015 at 08:35 AM

    Both seem to be functioning again... I'll keep an eye out

  • Profile Image
    JotForm Support

    Answered by Charlie on October 16, 2015 at 09:43 AM

    Thank you for the confirmation. Please do update us if the problem persists or went back.

  • Profile Image

    Answered by tgbam on October 16, 2015 at 09:45 AM

    Yes: Couldn't find this thread. The problem is still very much a problem on firefox, for example

     

  • Profile Image

    Answered by Carina on October 16, 2015 at 10:26 AM

    I tested the form on Firefox and it loaded normally and I could successfully submit the form:

    Both versions.

    Please let us know if the problem still persists and let us know more details of the issue that now is happening.

    Thank you.