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

    Form not displaying properly when viewed on iPad 4 Mini in landscape

    Asked by travelvillage on December 01, 2015 at 06:55 AM

    When I turn my iPad from portrait to landscape or visa versa the form starts flashing like it cant decide what width to be! It works fine on an iPhone.

    I have the Mobile Responsive Widget installed too.

    Any ideas?

    Page URL:
    http://travelvillagegroup.com/index.phtml#contact

    ipad landscape Mobile mobile responsive
  • Profile Image

    Answered by victor on December 01, 2015 at 09:50 AM

    Sorry for this inconvenience. I have just tested your form in my iPad (first generation) and in online simulators. I was not able to replicate the issue you are having. If you are still experiencing this issue, please let us know and we will be glad to take another look.

  • Profile Image

    Answered by travelvillage on December 01, 2015 at 09:59 AM

    Hi

    Yes i'm still having the issue, i'm using an iPad mini 4.

    When you view the form in portrait it looks perfect, but once you turn the screen to landscape it starts flashing and you cannot use the form at all.

  • Profile Image
    JotForm Support

    Answered by Charlie on December 01, 2015 at 11:59 AM

    I was able to replicate the problem, however, it seems like it is related to the scripts in your form that auto resizes the iFrame.

     

    Could you try the following instead:

    1. First, remove the mobile responsive widget and make your form responsive by following this guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive 

     

    2. Try re-embedding your form using the default embed script, I see you are using the iFrame embed code.

     

    3. If the default embed script does not work for you, you can use the iFrame embed code again, BUT we will remove the script code that was included on it.

    Example:

    This is my iFrame embed code.

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:786px;

          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>

     

    I will remove the script code included on it, in this case, it's the code highlighted bold above. The final code would be something like this:

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:786px;

          border:none;"

          scrolling="no">

        </iframe>

     

    However, the iFrame won't be mobile responsive anymore if we do this. Please also note that you need to adjust the height value to match the form's length.

     

    I hope any of the above solution works.

  • Profile Image

    Answered by travelvillage on December 01, 2015 at 12:09 PM

    Hi

    I followed your steps and once I re-embedded it using the script it seems to have worked.

    Thanks for your help.

  • Profile Image

    Answered by victor on December 01, 2015 at 01:34 PM

    On behalf of my colleague, you are very welcome. If you have any other question or issue, please do not hesitate contacting us. We will be glad to assist.