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 working on PC but truncated on IPAD

    Asked by pete1024xx on November 18, 2015 at 04:33 PM

    I designed a form to handle 4 applicants in a golf tournament and it's working well on a PC. On an IPAD it gets truncated near the bottom of the 3rd player. How can I get it to display the full form? The form is located at this address:

     

    http://www.plantationcommunityfoundation.org/events-programs/celebrity-classic/

    ipad pc form height form form size form resize
  • Profile Image

    Answered by Ben on November 18, 2015 at 06:11 PM

    I took a look at your form and I see what you mean.

    To correct it, I would suggest adding the following to your site code - you can do it right above the iframe code.

    <style type="text/css">
    @media screen and (max-width:320px) {
      iframe#JotFormIFrame {
        min-height: 4070px;
      }
    }
    @media screen and (max-width:360px) {
      iframe#JotFormIFrame {
        min-height: 4000px;
      }
    }
    @media screen and (max-width:480px) {
      iframe#JotFormIFrame {
        min-height: 4200px;
      }
    }
    @media screen and (max-width:568px) {
      iframe#JotFormIFrame {
        min-height: 4070px;
      }
    }
    @media screen and (max-width:766px) {
      iframe#JotFormIFrame {
        min-height: 4250px;
      }
    }
    @media screen and (max-width:1023px) {
      iframe#JotFormIFrame {
        min-height: 4120px;
      }
    }
    </style>

    Now it is best to test it out once you add it to the website and do let us know of the outcome.