Form cutoff in Safari 10.0.2

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

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.

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

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" onDISABLEDload="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.

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.

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?

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.

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?

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.