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

    How to make JotForm mobile responsive when using Iframe embed

    Asked by spokanebodybuilding on March 12, 2015 at 07:53 AM
    One question in relation to the iFrame:  I notice that the height is specified and works perfectly on my PC but when I view the form on a phone (Android) as responsive, the bottom quarter gets cut off due to the height specifications.  I've adjusted the height to make sure the full form is displayed on the phone but it leaves a lot of blank space between my form and footer on the PC (Changed from 2190 height to 2890 on the Big Sky form).  Is there a simple solution to this?
    css responsive iframe mobile responsive iframe embed
  • Profile Image

    Answered by Ben on March 12, 2015 at 10:52 AM

    Usually that <script></script> part in the iframe embed code is in charge of that, unless there is something on that page that makes it not work properly.

    We can however still style if using CSS, but we would need to see the page where the jotform is embedded on to know how to properly set the CSS rules, but the idea would be:

    @media screen and (max-width: 768px)
    {
         iframe {
              min-height: 2890px;
         }
    }

    and set the iframe code back to to height: 2190 in its style parameter.

    As mentioned, once we have a link to your website page where the jotform is, we can add the required details to work.

  • Profile Image

    Answered by spokanebodybuilding on March 12, 2015 at 01:35 PM

    Sorry, forgot to include those links.  My forms are:

    http://www.spokanebodybuilding.com/big-sky-championships/big-sky-entry-form/

    http://www.spokanebodybuilding.com/empire-classic/entry-form/

    I tried that CSS but couldn't seem to get it to work, not that I necessarily know what I'm doing.  With the iframe height specified as Jotform provides it the phone will display it properly in landscape but cuts the form off in portrait.

     

  • Profile Image

    Answered by Ben on March 12, 2015 at 03:12 PM

    Thank you for the links.

    Could you please try adding this code to your website:

    <style type="text/css">
      @media screen and (max-width: 360px)
    {
         iframe#JotFormIFrame {
              min-height: 2930px;
         }
    }
    </style>
    <iframe frameborder="0" scrolling="no" style="width:100%; height:2100px; border:none;" src="//form.jotformpro.com/form/50648760142959" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>
    <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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    That would be for this page: http://www.spokanebodybuilding.com/big-sky-championships/big-sky-entry-form/

    Now for this other page (http://www.spokanebodybuilding.com/empire-classic/entry-form/) please try adding this code:

    <style type="text/css">
      @media screen and (max-width: 360px)
    {
         iframe#JotFormIFrame {
              min-height: 2930px;
         }
    }
    </style>
    <iframe frameborder="0" scrolling="no" style="width:100%; height:2470px border:none;" src="//form.jotform.us/form/50645420585152" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>
    <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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Do let us know how it goes.

  • Profile Image

    Answered by spokanebodybuilding on March 13, 2015 at 02:36 PM

    That worked perfectly!  Thank you so much for all of your help.

  • Profile Image

    Answered by Ben on March 13, 2015 at 03:47 PM

    Great to hear that :)

    You are welcome, do let us know if you happen to have any questions or need our assistance and we would be happy to assist. :)