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

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) 

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.

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?

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.

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. 

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"

      onDISABLEDload="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.

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  onDISABLEDload="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!)

 

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)

 

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

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.

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" onDISABLEDload="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.

 

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 )

 

 

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.

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.

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!

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.

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

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

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

 

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.