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 is cut off at Bottom for Mobile Devices Using an iFrame

    Asked by enbpubliccampus on November 21, 2016 at 09:45 AM

    If I use the provided Publish > Embed > iFrame in my code, my form is cut off at the bottom on mobile devices. I've tried different browsers with the same result.   How can I resolve this (entire code provided below)?

     

     

    <!DOCTYPE html> <HTML> <HEAD> <meta charset="utf-8"> <TITLE> Group Assignment Request </TITLE> </HEAD> <BODY> <iframe id="JotFormIFrame-62944337127156" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62944337127156" 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 = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { 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 = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { 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> </BODY> </HTML>

     

     

    Page URL:
    https://form.jotform.com/63253789859173

    Mobile devices form is cut cut cut off at bottom bottom of form bottom cut off
  • Profile Image
    JotForm Support

    Answered by KadeJM on November 21, 2016 at 10:34 AM

    I see that you're having an issue with your form being cut off at the bottom of the page on mobile devices it seems.

    Please share a link to where you have it embedded so that we can investigate this issue to assist you better with resolving it if possible.

    Additionally, I would like to point out that it is possible to control the height within the iframe:

    <iframe id="JotFormIFrame-62944337127156" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62944337127156" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

  • Profile Image

    Answered by enbpubliccampus on November 21, 2016 at 11:00 AM

    Changing the "height" had no affect on anything.  Here is a link you can go to:

     

    http://enb-jw.org/kh2fsreports/index.html

     

     

     

  • Profile Image
    JotForm Support

    Answered by david on November 21, 2016 at 11:51 AM

    I checked your page and the height is still quite short.  Try increasing the height until the full form is shown.  If you get to around 1500px in height and there is still no change, let us know and we will be happy to have another look. 

  • Profile Image

    Answered by enbpubliccampus on November 21, 2016 at 12:22 PM

    That helped to increase to 1500, however the "Submit" button is still partially cut off so the entire form is still not viewable.

     

  • Profile Image
    JotForm Support

    Answered by david on November 21, 2016 at 12:42 PM

    Try removing the auto height script from the embed code.  Use only this portion:

    <iframe id="JotFormIFrame-62944337127156" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62944337127156" frameborder="0" style="width:100%; height:1500px; border:none;" scrolling="no"> </iframe>

  • Profile Image

    Answered by enbpubliccampus on November 21, 2016 at 01:17 PM

    "Submit" button completely gone...disappeared below the limit of the screen.

     

     

    Although I'm thoroughly confused by "@media" tags, it's in the CSS of this form from a previous problem with fields.  Will using @media help this situation?????

  • Profile Image
    JotForm Support

    Answered by KadeJM on November 21, 2016 at 01:37 PM

    When I look at just your form on my iphone it appears to be working normally as it should even when testing the iframe further on my end.

     

    However, if you look at it in comparison to being on your website I'm actually seeing that's where this problem appears and on my end the form being cut off in is in a very different place.

    Have you tried setting your form as mobile responsive if not already to see if this helps any?

  • Profile Image

    Answered by enbpubliccampus on November 21, 2016 at 02:25 PM

    When I look at the form on MY iPhone, it looks worse than it does on my iPad mini...the "mobile responsive" selection did not help at all.  I cleared browsing data to ensure I was not looking at a cached version.  

     

    YES, it looks just fine when you link to it from a direct URL, but when it's embedded in a web page with an iframe is when it has the problem.

  • Profile Image
    JotForm Support

    Answered by david on November 21, 2016 at 03:37 PM

    Try changing your iframe scrolling attribute from "no" to "yes" that might help. 

    <iframe id="JotFormIFrame-62944337127156" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62944337127156" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe> <script type="text/javascript">

    Change the highlighted no to yes and the full form should be accessible.

  • Profile Image

    Answered by enbpubliccampus on November 21, 2016 at 03:47 PM

    finally.

     

    .....that was a long, confusing one!

     

    Thanks, for hangin' in there David!

  • Profile Image
    JotForm Support

    Answered by david on November 21, 2016 at 04:51 PM

    Glad to hear it!  Very welcome.  Let us know if there is anything else we can help with.