Embedded form is being cut off on Safari browser of iPhone 6 in landscape mode

Hi,

Please check this page http://healthysmileslagrange.com/appointment/ . There is an appointment form in this page. On iphone 6+ landscape view the bottom part of the form is not showing. Attached screenshot.

Also check this page http://healthysmileslagrange.com/about-dr-qureshi/ . There is a contact form in the sidebar and the same problem is happening with that form. The bottom part is not showing. Attached screenshot.

Can you please let me know what is the solution?

Thanks

Sorry for the issues with your forms being cut off on some devices. The problem with the form not being able to fully show on that first page ( http://healthysmileslagrange.com/appointment/ ) may come from having multiple forms embedded on the same page:

https://form.jotform.me/52172016202439

https://form.jotform.me/52171164822450

They are both embedded with the same ID, JotFormIFrame, so when one of them is trying to set its height it will change the height of both forms. Whenever embedding multiple forms on a same page, we recommend changing the ID of your second or third such forms from JotFormIFrame into something like JotFormIFrame2, in all parts of the embed code from those other forms.

However, your second page ( http://healthysmileslagrange.com/about-dr-qureshi/ ) has only one form embedded, and on this one I could see the issue with form height being incorrectly calculated in landscape mode, but only when using Safari browser and only in landscape mode. The Submit button is not showing because the form is cut off just above where the Submit button should be:

I do see that regular portrait mode seems to be working fine:

I also see that iPhone 6 Plus with Chrome works fine, even in landscape mode:

So it seems that only Safari browser of iPhone 6 plus is unable to correctly detect or set the height for the form.

I have forwarded this to our developers, so they can check whether the height detection for iFrame embedded forms can be improved on Safari browser of iPhone 6 in landscape mode. We will update you through this thread when there are any news in this regard. Thank you.

Hi,

Any solution from the developers? Please let me know.

Thanks

First of all thank you for checking the status of your ticket. Unfortunately, there is no update yet. However, one of our developers was already assigned to fix the issue. We will notify you here once we have an update on the status. Thank you for your patience.

Hi DevOps,

I do apologize for the issue that you are experiencing with embedding your form. You can inject CSS code for form height. Here's sample code: 

.form-all {

    float: none;

    margin: 0;

}

and

Can you please retry re-embedding your form using its iframe or other embed code. User Guide: https://www.jotform.com/help/67-Which-form-embed-code-should-I-use

Hi ibrahim,

Thanks for sending me the solution. But sorry to say it didn't fix the issue. Please check the screenshots. It's happening on iphone 5s too.

The screenshots are from this page appointment form http://healthysmileslagrange.com/appointment/ . I've seen the page source and found that the code exists in there. But it did not fix the problem.

Thanks

Hello DevOps,

I did check your webpage where you have embedded your form and found that you are using iFrame embed code.

Your message has reached my colleague @ibrahim and he will get back to you as soon as he is available online.

Thank you!

Hi DevOps,

When i checked your page html source, i saw "height: 1000px" on iframe code block. It doesn't work on landscape mode, since the iframe has fixed height. Could you please re-embed it with this code block: 

<script type="text/javascript" src="https://form.jotform.me/jsform/52172016202439"></script>

or

This one: 

<iframe id="JotFormIFrame" src="https://form.jotform.me/52172016202439" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>

Regards.

Hi Ibrahim,

Thanks a lot! This time the script code worked perfectly. You are awesome!

Your praise has reached our colleague, and on behalf of all our colleagues involved, you are most welcome. We're glad that the issue you were having is resolved now.

If there is anything else you may need help with, please simply let us know by opening another support thread anytime, and we will be happy to help.

Cheers