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 cutoff in Safari 10.0.2

    Asked by trinityklein on January 24, 2017 at 02:38 PM

    Hello,

    I am embedding a JotForm on my WordPress controlled site. The form displays properly in Chrome and Firefox; however, in Safari the bottom of the form is cutoff. I have attempted embedding using the JotForm plugin for WordPress, Javascript, and iFrame. I have even adjusted the height when embedding using iFrame. All to no avail. My form is

    http://trinity.plainjoe.net/marriage-application/

    I have followed the instructions at the following link with no success.

    https://www.jotform.com/answers/740134-My-form-is-cut-off-at-the-bottom-on-desktop-mobile-on-Safari

    In fact when I follow those instructions, the form displays properly in Safari; however, in Chrome and Firefox I end up with a giant grey box below my form making my webpage twice as long as it should be.

    Any help would be appreciated.

    TECH SPECS:

    Safari 10.0.2 on Mac 10.12.2
    Firefox 50.1.0 also on same Mac
    Chrome 55.0.2883.95 also on same Mac

    Page URL:
    http://trinity.plainjoe.net/marriage-application/

  • Profile Image
    JotForm Support

    Answered by jonathan on January 24, 2017 at 04:57 PM

    I was able to see the issue as well when I test your form https://www.jotform.us/form/62915652541154 on the website using Safari browser on Mac OS.

     

    But so far I can only see it when using Safari browser. All is good when using Chrome or Firefox browser on the same Mac OS.

     

     

    Currently, I see the form was embedded using its script embed code.

    Can you please try updating first the embed code to use the iframe publish code instead. We would like to investigate it further when using the iframe embed code.

    We will wait of your update on this.

    Thank you.

     

  • Profile Image

    Answered by trinityklein on January 25, 2017 at 10:30 AM

    I have embedded via iFrame and have the same results - Chrome and Firefox display properly, Safari cuts the form off. Please take a look.

  • Profile Image
    JotForm Support

    Answered by Jan on January 25, 2017 at 11:42 AM

    I can see that it is currently embedded using the iFrame code. Please try removing the script element below the iFrame code and see if that works.

    If not, please specify the height of the iFrame to 1800px. Here's an example:

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

    If it is still the same, I would suggest you embed the form on a HTTPS webpage. In the console log of Safari, there's an error that indicates that the form is embedded on a non-HTTPS website. Please take note that the form is using HTTPS. Here's a screenshot:

    Hope that helps. Thank you.

  • Profile Image

    Answered by trinityklein on January 25, 2017 at 11:58 AM

    I removed the script element and left the height to the default. The form was still cut off in Safari, but introduced a new issue in Chrome and Firefox with a large grey box at the end of the form. See the following screenshot.

    When I set height to 1800px, the grey box decreased in size greatly, but it was still present in Chrome and Firefox. Safari still cut off the form.

    I'm still working on the HTTP/HTTPS suggestion.

  • Profile Image

    Answered by trinityklein on January 25, 2017 at 03:29 PM

    The current host of the website is temporary as we are building the site out. There are still come questions as to whether or not the site will be a secure when launched. With this in mind, is there something else we can try?

  • Profile Image
    JotForm Support

    Answered by Jan on January 25, 2017 at 04:20 PM

    You may try wrapping the iFrame code with div element. After that, add inline CSS that sets a minimum height to the div tag. Here's the an example:

     

    If that didn't work, please try to remove the "onload" attribute in the iFrame.


    Hope that helps. Thank you.

  • Profile Image

    Answered by trinityklein on January 25, 2017 at 05:11 PM

    The div tag with inline CSS works in all three browsers. The whole form shows; however, there is a grey box at end of the form in all three browsers.

    I am assuming that is related to the min-height attribute I set to 1627px. Would that be correct? If so, would I have to adjust that for the longest page of my form? Is there a way to completely eliminate the grey box?

  • Profile Image
    JotForm Support

    Answered by Jan on January 25, 2017 at 05:47 PM

    Yes, please try increasing the minimum height to 2000px. I would suggest to make the form background white in order to eliminate the grey box.

    Here's the CSS code in order to change the background color and remove the border:

    .supernova {
    background-color: #ffffff !important;
    }

    .supernova .form-all {
    border: 0 !important;
    box-shadow: none !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Hope that helps. Thank you.