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

    The form only shows half on some Macs / OS X / iPads

    Asked by abteilung on August 12, 2015 at 02:21 AM

    I have a problem with my form not showing up on some Macs / OS X / ipads. After I have used the embed-method for my joomla site until now, I read about the iframe-workaround for my problem.

    So I updated Joomla (3.4.3), installed Sourcerer (5.0.2) and updated my Module with the iframe-Code (replaced the embed-code). After this unfortunately the form only shows half.

    After checking CSS I can see height of my form is set to 180px. But in the code I pasted into Sourcerer it states this:

    style="width:100%; height:2064px;

    What I am missing?

    Thanks a lot!



    This is a re-post of a comment on Getting the form iFrame code

    problem style height workaround
  • Profile Image
    JotForm Support

    Answered by Welvin on August 12, 2015 at 06:10 AM

    A possible conflict between the script part of the iframe codes and your website script is causing the problem to happen. In this case, remove the script part and see if that will resolve your problem. 

    Here's an example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/1234567890" frameborder="0" style="width:100%; height:675px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    You have to remove the codes that is highlighted with Yellow.

    Thanks

  • Profile Image

    Answered by abteilung on August 12, 2015 at 10:29 AM

    Thanks a lot for your quick answer. Unfortunately this did not solve the problem. I only used iframe-part of the provided code of my form (without the script part). And still my form is only displayed half.

     

    The real problem is that parts of the form don't show up on OS X / Macs. So I tried to use the recommended iframe method. But as there are so many people which can not solve there problems with iframe, maybe there is another solution ? Or a new way to get the iframe-thing working on newer joomla installations (3.4.x) ?

     

    As we have a production site I now had to switch back to the old mehtod (embed for joomla). form is working now on Windows / Mac OS X together with IE and Firefox. So now I think it's more like browser-specific problem. You can see it in the screenshots below: form shows on Firefox and Internet Explorer on all platforms (Win and Mac). But does not show in Chrome and Safari - also on all platforms: Windows, OS X, iOS and even Android.

    Screenshots of our form (embed method) with different browsers / platforms:

    https://www.browserstack.com/screenshots/f9a7f0f8e825422f47edff8d3be641686f307b2c

     

    And of course  I tested it in real life on a MacBook Pro. Same result in Safari. Also not working: Android 4.2.2 and Chrome browser...

     

    Any ideas ?

    Thanks a lot for your help !

  • Profile Image

    Answered by abteilung on August 12, 2015 at 10:59 AM

    So, to get closer to the problem I just made some plain html-files (and uploaded them to a dropbox) and pasted the embed and iframe-code:

     

    iframe version of our form: https://dl.dropboxusercontent.com/u/6939968/formtest_iframe.html

     

    embed version of our form: https://dl.dropboxusercontent.com/u/6939968/formtest_embed.html

     

    On my system Win7 64bit the iframe form only shows partly...

     

     

     

     

  • Profile Image
    JotForm Support

    Answered by david on August 12, 2015 at 12:47 PM

    Your iFrame code still has the script to resize the form:

    This is the script my colleague was suggesting to remove.

    Delete that line from <script> to </script> and see if that helps.  It should allow you to manually set the height of the frame.

  • Profile Image

    Answered by abteilung on August 14, 2015 at 02:51 PM

    Thanks a lot for your answer, I already tried this on the production site. But first it did not solve the issue. I gave it another try now and after cleaning really all caches (browser, joomla, etc.) it solved my problem. Form displays full now on all devices and platforms - as far as I can see.

    Thanks a lot for your fast support!

    Screenshots: https://www.browserstack.com/screenshots/ad0d819ffa9affbf344225a925623253aea1cfb0

     

    topic closed :)

     

     

  • Profile Image
    JotForm Support

    Answered by david on August 14, 2015 at 03:58 PM

    Glad to hear you were able to get things sorted.  If there is anything else we can assist you with, let us know and we will be happy to help.