The bottom part of the embedded form is not showing

  • Profile Image
    kaptainsa
    Asked on November 21, 2017 at 01:37 PM

    Thank you for your response, unfortunately the bottom of the form is not showing. 

    There are fields that are not seen on a computer or mobile device. The parents email and submit button are cut off on the computer and even more is cut off on the mobile version. 

  • Profile Image
    Jan
    Answered on November 21, 2017 at 02:42 PM

    I was able to replicate the issue on both desktop and mobile devices.

    Please try to re-embed the form using the whole iFrame code. The purpose of the script tag below the iFrame code is to automatically resize the height of the form. 

    151129285311-22-64vcp.png

    You may also try using the normal embed script code.

    151129316211-22-8at0r.png

    Hope that helps. Let us know if the issue persists. Thank you.

  • Profile Image
    kaptainsa
    Answered on November 21, 2017 at 10:12 PM

    Thank you, here is the code I entered, but unfortunately it is still not scrolling to the bottom to let people enter their credit card info or email address.

     <iframe

          id="JotFormIFrame-32578690630864"

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

          allowtransparency="true"

          src="https://form.jotform.co/32578690630864"

          frameborder="0"

          style="width: 1px;

          min-width: 100%;

          height:6751px;

          border:none;"

          scrolling="yes">

        </iframe>

        <script type="text/javascript">

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

          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) {

            var args = e.data.split(":");

            if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } 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;

            }

            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
    amy
    Answered on November 22, 2017 at 02:07 AM

    I am able to see the whole form. I tried it on more than one devices and I am unable to replicate the issue. Please check my result:

    1511334329form_cut_off.gif

    I would like to recommend you to refresh your browser's cache and try it again: How to refresh your browser's cache

    If your problem persists, please let us know. 

  • Profile Image
    kaptainsa
    Answered on November 22, 2017 at 11:35 AM

    There is an important difference, on Jotform's website, it works properly and scrolls down all the way to the bottom:

    https://www.jotform.com/build/32578690630864

    but when you embed the jotform code into my website, then it wont scroll all the way to the bottom:

    http://www.santamonicawaterpolo.com/splashball-water-polo-gear/ 


  • Profile Image
    Jan
    Answered on November 22, 2017 at 11:57 AM

    I checked your webpage again and I can see that the script element is not present at the bottom of the iFrame code. Here's a screenshot:

    151136977311-23-5b0cd.png

    Please try to re-embed the code using the code below:

    <iframe id="JotFormIFrame-32578690630864" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.co/32578690630864" frameborder="0" style="width: 1px; min-width: 100%; height:6751px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-32578690630864"); 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) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } 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; } 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>


    Hope that helps. Thank you.