Form height: How to fix and show a form completely on mobile browsers

  • Profile Image
    Asked on September 03, 2013 at 03:27 PM

    if you open the url below on an iphone it will default to the mobile site version so you will see the problem I have with the form on the homepage area.


    I tried adding

    @media only screen and (max-device-width: 480px) { iframe,.form-all { height:500px !important; } 


    to the inject ccs area as someone suggested on the forum but it didnt work?


    Please can you help as i need to get this site live tomorrow.



  • Profile Image
    Answered on September 03, 2013 at 05:44 PM


    I can see the problem on your site using my iPhone.   

    The form is a bit cut-off at the bottom.

    I highly suggest that you adjust the height of the injected code. Increase the amount to have taller allowance.

    @media only screen and (max-device-width: 480px) { iframe,.form-all { height:500px !important; } 


    To inject the code properly kindly follow the steps below.

    1. Click Setup & Embed

    2. Preference

    A new window will pop-up.

    3. Then click Form Styles

    4. And paste the code under Inject Code CSS box.


    And then close that window and you're done.


    Kindly check if that could fix the issue.

    If problem persists please do let us know so that we could further investigate.

    Thank you for using JotForm. :)

  • Profile Image
    Answered on September 03, 2013 at 06:14 PM
    i tried this and it doesnt work, i have uploaded to the same url so you can see on an iphone/cell phone so you can see, it makes no difference? Surly everyone is facing the same problem with this? What width should the form be?
    So there are 2 problems;
    1 the bottom of the form gets cut off
    2 when you try and fill the form in it enlarges and pulls to the right.
    I have tried uploading it as an embed and an iframe, which should i use?
    Please can you provide the solution asap!
  • Profile Image
    Answered on September 03, 2013 at 08:42 PM


    Can you try setting the Iframe height to 100%? I noticed that the width is aready set to be 100%. 

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//" frameborder="0" style="width:100%; height:990px; border:none;" scrolling="no"></iframe>

    Please give that a try and let us know how it goes.


  • Profile Image
    Answered on September 04, 2013 at 05:37 AM
    adjusting the height to 990px seems to have resolved the bottom of the form being cut off however the form still shifts over to the right when you start filling it in?
    I have asked this 3 times now how to fix this, please answer the question. Jotform support seems to try and answer the support queries too fast and by doing so you are not replying to all the points so i have to come back to you over and over again!!!!!!!
    Also as asked previously should i be using iframe or embed function form mobile and tablet forms??
    Many thanks
  • Profile Image
    Answered on September 04, 2013 at 10:16 AM

    Hello Steve

    You must open a thread for each and every single question. We cannot handle multiple issues in a single thread.

    To answer your question about iframe, yes, that is what we recommend to make the form to work on mobile/tablets browsers.

    Please open a new thread on regards to the problem with the form shifting to the right upon inputting data.

    We try to help to our free and paid users to the best of our abilities. We appreciate your understanding and patience