Clipping bottom of Form on Tablets & Smart phones

Please check the ref URL on that page there are 2 Jotform forms, which are nearly identical however the bottom of the two form (Summer Party form) is clipped when you display the form using ipad etc..

The CSS in these forms was supplied by JotForm Forum support contributors. and is widely use on other forms on this site, without any issues.

This current issue is stopping people using the form when viewed on tablets.

Help needed please.

Thanks

John

Here is a screen shot from the iPhone 6S

 Thanks

Hello,

I'm sorry for the trouble caused to you.

I would suggest you to please remove the existing form embed code you have added in your form and use the following one without the script part of iframe code:

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

Hope this helps.

Do get back to us if the issue persists.

Thank you!

Sorry it is worse now, i need to get this resolved ASAP as it is impacting the client.

I am going to go back to the  original iframe imbedded  code as at least that gave me one of the forms working correctly now i have both impacted by the change.

John

Your form it'self shows good in the standalone version: http://www.jotformpro.com/form/61715019692963 

The script part of the Iframe code works to resize the Iframe code, but may conflict with elements in your form. So you can set a fixed height, so the form will show all. Try increasing the height of the code my colleague provided:

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

Let us know if that help.

But if i give it a fixed height then what happens when i view it on a normal device.

Why am i only having this issue when i have 2 form on one page.

John

Changing the height to a fixed 1000 solves the problem on certain devices but not on others.

Not a very satisfactory solution. I am afraid.

John

What are the other devices where the form presents problem? What are those problems? Please let us know, so we can test. 

See images following first is iPad 3 and the next is iPhone 6S.

The form that is causing the issues is the second one on the page which is the summer party form.

The problem with fixing for devices is not correct the idea of responsive is that it should be seamless, your fix that is currently suggested is to fix the height is NOT responsive and it is NOT seamless.

I see what you mean:

I believe this is happening since your first form has it's script, and since both Iframes have the same Id "JotFormIFrame":

The script also affects the height of the second form according to the height of the first form. And it seems like your first form's height it's a bit shorter.

So, my recommendation would be the following:

a) Try embedding your second form with the "embed" code method instead:

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

b) If the "Embed" method code those not work, try changing the id name of the Iframe code for your second form:

<iframe id="JotFormIFrame2" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/61522825790963" frameborder="0" style="width:100%; height:793px; border:none;" scrolling="no"> </iframe>

Let us know if that helps, we will be glad to assist you.

OK,

Now i have the top Form embedded with the iFrame and the second Form embedded as you suggest.

The forms are now more reliably displayed across platforms ( that i have tested) which is good and progress. However ...

Ever since i have been using the JotForm Platform 4 - 5years 3, i have always been guided by your colleagues on the forum to use the iframe embed at all times.

So can somebody please explain why the straightforward Embed works and the iFrame does not and what issues will i now encounter as a result of moving to the Embed form but only on one form out of two on a single page ...... the other is still iframe embedded ....

For your information i did try your other suggestion of changing the ID name in the second Form.... not a good experience even more of the form failed to display in the Smartphone and Tablet environment.

So i am asking for clear unambiguous guidance on which embed option to use to get 100% Responsive forms.

Thanks

John

Hi John,

I also test your website on mobile browser and I can see that all is good now.

So can somebody please explain why the straightforward Embed works and the iFrame does not and what issues will i now encounter as a result of moving to the Embed form but only on one form out of two on a single page ...... the other is still iframe embedded ....

Generally, it is not recommended to have 2 forms embedded on the same website page. Because the form uses javascript for it to function, having multiple the same javascript function on the same website will surely have script conflict. 

Example, since there were 2 forms in your website, both forms will surely have built-in javascript function that will do the same thing (both were JotForm so they will have script functions built-in).

If you will use the direct script embed code to have both forms in the website page, the script of the forms will definitely conflict since they were all mixed up.

But using iframe embed code of the form will prevent script conflict. It is because iframe code have the capability to contain the scripts within the iframe container only. So they javascript will not conflict if they were only affecting their own iframe container.

Think of the iframe embed code as a container... when using iframe, the 2 forms will be contained within its own container -- so even when they are on the same website page, the script conflict will not happen.

Hope this help. Let us know if there is more we can assist you with.

Hello,

I asked for an unambiguous response, i am now more confused than ever, you say

Think of the iframe embed code as a container... when using iframe, the 2 forms will be contained within its own container -- so even when they are on the same website page, the script conflict will not happen.

This is what i had in the beginning and your colleagues are indicating that i should change one of the Forms to the Embed form of Embed within my page, and that sort of worked, but you are saying the opposite.

I have just spent several hours moving these forms onto separate pages.

On this occasion the support experience from your organization has not been encouraging... and i am still confused about the right and wrong way to embed forms on a page.

and can i have more than one form on a page or not ????

Thx

John

 Which embed option to use to get 100% Responsive forms.

Each form is different and has different field types. So in some cases embed option is the best as it will resize the form according to the screen size. But embed option has a downside which is it is easy to have script conflicts so most of the time we recommend the iFrame method as this prevents the form's script from conflicting with the website's script.

On very specific situations the iFrame does not adapt its size correctly according to the some screen's size, so further css adjustments are necessary. But this on very specific situations.

I understand that you would like a very absolute answer, but the truth is that for most cases iFrame is the best choice, but on some exceptions other methods need to be used.

"I am still confused about the right and wrong way to embed forms on a page."

As stated before, for most cases the iFrame method is advisable, but there are some exceptions when other methods need to be used.

 Can i have more than one form on a page or not ?

It is not advisable as they can present some responsiveness problems.

Let us know if we can assist you further.   

Hello,

Thank you for the clear response. in an ideal world it would have been good to have this information shortly after the issue was raised, however we are were we are.... so Thanks for this.

As a point of interest why can't Jot Form write a paper to identify these sort of issues, OK it is not possible to be specific about some conditions that may cause the iFrame embed to fail, but at least it would be good to have some idea of the issues to be faced.Also when is the normal straight Embed the best to use etc etc ...

Ok, You can close this item but it has been frustrating process to get here.

I have raised a subsequent thread now on the same forms in relation to Label and field alignment..... not sure why i am hitting all these issues now.

John

Hi John,

If you have other concern or need assistance with, please create a new thread for it. You can use this link https://www.jotform.com/contact/

Thanks.