Embedded form doesn't scroll to top after pagebreak

  • Profile Image
    ralf1943
    Asked on October 20, 2019 at 08:00 PM

    After I upgraded to bronze. The box where the JotForm advertisement was located is now left white on my site. I tried several published modified form and even changed form to get rid of the placer but it’s still there and it’s glitching the form for mobile use. It works fine on PC but when switching platforms on tablet and mobile the white box appears and prevents me from scrolling and seeing the question1571615878D94B79E7-15AA-4803-9C94-89B1A1

  • Profile Image
    JohnRex
    Answered on October 20, 2019 at 11:26 PM

    Hi @ralf1943,

    Please try embedding the form using its iframe code. Here's a guide on Getting-the-Form-iFrame-Code

    Please try that and let us know how it goes.

  • Profile Image
    ralf1943
    Answered on October 20, 2019 at 11:37 PM

    Just tried it and nothing changed. 

  • Profile Image
    JohnRex
    Answered on October 21, 2019 at 12:14 AM

    I have tried embedding a clone of your form on my webpage and wasn't able to replicate the issue.

    Let me conduct further tests and get back to you on this thread shortly.

  • Profile Image
    ralf1943
    Answered on October 21, 2019 at 12:25 AM

    I’ve made a couple of tests and it’s primarily on mobile devices running though the website. The form on the JotForm application works good but in my website it’s glitching and the white box still remains affecting both the design and productivity of the page. 
     This is the iframe That’s currently on my site, thank you.

    <iframe id="JotFormIFrame-92916348963168" title="Responsive Survey Form" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/92916348963168" frameborder="0" style=" min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-92916348963168"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { if (typeof e.data === 'object') { return; } var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); 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); } </script>

  • Profile Image
    JohnRex
    Answered on October 21, 2019 at 01:25 AM

    I noticed that the when you clicked the "NEXT" button, the next page doesn't scroll to top, thus the white box appears. And when you scroll it to top manually or click one of the options, it disappears.

    Could you please try embedding only the iframe part and get rid of this code (script part):

    15716354752005519 3.png

    Please try that and let us know how it goes.

  • Profile Image
    ralf1943
    Answered on October 21, 2019 at 01:40 AM

    The white box no longer appears, however it still prevents me from seeing the whole question on some pages unless i select an answer or go back to the question.

  • Profile Image
    ralf1943
    Answered on October 21, 2019 at 01:43 AM

    i think i fixed that issue by enabling scrolling. however, when i select an answer and go to the next page the next page starts at the bottom creating the inconvenience of having to scroll up after every question

  • Profile Image
    JohnRex
    Answered on October 21, 2019 at 01:45 AM

    We're glad that you were able to resolve it already. 

    Let us know if you need further assistance with this.

  • Profile Image
    ralf1943
    Answered on October 21, 2019 at 01:49 AM

    yes actually, I have encountered another inconvenience where every time i go to the next page on the form it starts off at the bottom creating the trouble of having to scroll up after every question. Think you can take a look at that? 

  • Profile Image
    ralf1943
    Answered on October 21, 2019 at 02:04 AM

    The scrolling becomes an issue when I log in on the PC more than the on mobile making it annoying for anyone visiting the site. 

  • Profile Image
    Jed_C
    Answered on October 21, 2019 at 02:50 AM

    Please use the embed code below:

    <iframe

          id="JotFormIFrame-92916348963168"

          title="Responsive Survey Form"

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

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.com/92916348963168?nojump"

          frameborder="0"

          style="

          min-width: 100%;

          height:539px;

          border:none;"

          scrolling="no"

        >

        </iframe>

    That should prevent it from jumping to the bottom for your form when clicking "Next" button. I added the ?nojump parameter at the end of the form URL to prevent it.

    I just tested that embed code and that works for me. Please try that and let us know how it goes.