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

    Form Will Not Scroll In Safari - Can't find a definitive fix

    Asked by locomotivedisplaycases on March 03, 2016 at 02:03 AM

    I know this has been asked before and various css workarounds offered, but no matter what solution I look at, I am unable to get my form to scroll on an ios device. However when viewed in chrome the form scroll bar is there.

    For example I have tried injecting @media screen settings but all this does is alter the form layout, I tried altering scrolling to "yes" or "auto" altering form lengths etc, I removed iframe css variables as mentioned on a previous forum post again with no success. 

    I have looked on other sites such as stack overflow etc but cannot find a fix, as this topic seems to be a minefield of answers - please can you help with a solution?

    Thanks David

    Page URL:
    http://locodisplaycasesthree.webeden.co.uk/order-form/4591901852

    scroll
  • Profile Image
    JotForm Support

    Answered by Boris on March 03, 2016 at 06:02 AM

    As you have said iOS devices, I have first checked your form on iPhone, and it is scrolling without any issues there:

    However, I see the problem with your form scrolling on desktop browsers and on tablets, including iPad Air - the form is simply cut off and cannot be scrolled down to the submit button.

    The issues comes from the peculiar way the form is embedded there - you first have an iFrame that has a set height of 800 pixels, and our form is then embedded with our iFrame embed method inside that 800 pixel iFrame.

    It goes like this: webpage (entire screen) > 800px iFrame container > our form's iFrame container > form.

    The iFrame in between your main page and our form's iFrame is causing some issues, as it appears to the form that the entire webpage is that 800 pixels. If you are using a visual website builder, they usually name such option as adding a "box" to your website, which will add such an unnecessary iFrame.

    Our embed code should be added directly to the main website for best experience. So if you have control of the design on your website, please make sure to paste the full iFrame embed codes directly to your website - and not inside any other iFrames or boxes.

    http://www.jotform.com/help/148-How-to-get-your-Form-s-Iframe-Code

    Please let us know how it goes.