How can I create this iframe to appear correctly on an iphone?

I have an issue with a form that is overflowing on an iphone.  Even though the form height and scroll bar have been set.

I have tried to inject CSS into my form and also directly in the iframe, however i still can not get this form to appear correctly on an iphone.

All i would like it to do is not overflow out of the frame (set at 320x320) and provide a scroll bar, on a mobile phone?

http://form.jotformeu.com/form/40585999501365

If the form is embedded in a webpage try adding this code in your HTML page, before the </head> tag.

<style>

iframe, iframe#JotFormIFrame { height:320px !important; }

</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Then add the code below in your form styles

@media only screen and (max-device-width: 550px) {

iframe,.form-all { height:320px !important; } }

This should replace these line in the current CSS codes I found in your form

@media only screen and (max-device-width: 550px){.form-header-group{width:320px !important;}

{height:320px !important;}}

Also, make sure that after grabing the iframe code, you activate the scroll bars and that the height is set to %100 rather than in px

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://www.jotformeu.com/form/40585999501365" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="yes"></iframe>