My Jotform on Tablet is not responsive

  • Profile Image
    jongross
    Asked on May 12, 2016 at 11:43 AM

    Hello, My Jotform on my site www.jongrossbuildingarts.com is having display issues in tablet view. Desktop and mobile are fine. The form gets cut off at the footer. Any thoughts?

  • Profile Image
    BJoanna
    Answered on May 12, 2016 at 12:55 PM

    I have tested your embedded form on my tablet and I was able to replicate mentioned issue. 

    To resolve this issue, please open your Form Designer and check "Make this form responsive" option. 

    You can also check this guides to see how to make mobile responsive forms:

    https://www.jotform.com/help/311-How-to-Make-Forms-Mobile-Responsive 

    https://www.jotform.com/help/322-How-to-Make-Mobile-Friendly-Forms-on-JotForm 

    Hope this will help. Let us know if you need further assistance.

  • Profile Image
    jongross
    Answered on June 01, 2016 at 10:26 AM

    Hmmm. Made that change but still having the same issues. Form functions well on phone and desktop. Site is built in PageCloud which is adaptive vs responsive.

  • Profile Image
    Charlie
    Answered on June 01, 2016 at 11:21 AM

    Upon checking your website, I see that the form is embedded using the iFrame embed code BUT it's missing the script code that is responsible for the iframe to be mobile responsive. May I know if you have removed it on purpose? Here's a guide on how to get your form's iframe embed code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    Here's an example of an iframe embed code:

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:539px;

          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>

     

    Green highlight is the code wrapped in the <iframe> tags. Please note that you cannot set % value on the height attribute. It only accepts "px", which means the iframe will have a fixed height.

    Yellow highlight is responsible for the responsiveness of the iframe element, the iframe height is fixed so this script is the one that will adjust the height value to make it more responsive. If this script is removed, then the iframe will stay on a fixed height and might cause the form to be cut off on certain parts of your web page.

    Let us know if re-embedding the form using your latest iframe embed code fixes the problem.