What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    My Jotform on Tablet is not responsive

    Asked by jongross 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?

    JotForm jotform on tablet Mobile site www
  • Profile Image
    JotForm Support

    Answered by BJoanna 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

    Answered by jongross 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
    JotForm Support

    Answered by Charlie 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.