My Jotform on Tablet is not responsive

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?

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.

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.

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"

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