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

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

    Asked by andypromo on March 11, 2014 at 03:06 PM

    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

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

    create inject CSS height Mobile scroll
  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on March 11, 2014 at 05:44 PM

    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" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotformeu.com/form/40585999501365" frameborder="0" style="width:100%; height:100%; border:none;" scrolling="yes"></iframe>