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 length/height iframe problem w/mobile site

    Asked by amazing2061 on November 12, 2013 at 05:08 PM

    I have adjusted the iframe code to make it shorter but it still displays way too much space at the bottom of the form no matter what height I adjust it to. The site in question is a mobile site and I am viewing it with an iPhone 5. To view the form just tap on the panel that reads "Book An Appointment" It looks OK on a Desktop computer but when viewed with a mobile phone it becomes too long. Since I have the form/iframe code inserted withina jquery accordion panel I think that is affecting it. Would appreciate any suggestions.

    Page URL:
    http://www.mbizcrd.com/salondemo/index.html

    problem height Mobile length
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 12, 2013 at 07:17 PM

    Hi there!

    Thank you for the clear details about te problem.

    Our form comes with mobile CSS that automatically renders on mobile device. This makes the form a bit longer on mobile view since they are optimized to avoid possible cut off on mobile device. Every fields of your form displays under its field labels as this is how it's designed on mobile CSS. However, to prevent this, simply inject the following CSS codes to your form.

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

    .form-label-left{

    float: left !important;

    display:inline !important;

    }

    }

    Guide:How to Inject Custom CSS Codes to your Form

    If this doesn't make any difference, let us know here so we can further assist you. Thank you!

  • Profile Image

    Answered by amazing2061 on November 12, 2013 at 09:21 PM

    Thank you for your reply. I injected/copied and pasted the code you provided and seems to have little to no effect. Here is all the code in the custom css panel:

    @media only screen and (max-device-width: 550px){.form-label-left{float: left !important;display:inline !important;}}

    .form-line {padding-left: 0px !important;}

    .form-all {padding-top: 2px;}.form-line-error {

    background:none repeat scroll 0 0;

    }

    .form-error-message {

    background: #EEE !important;

    }

    .form-error-arrow-inner {

    border-color: transparent transparent #EEE;

    }

    .form-validation-error {

    background-color:#FFF;

    border:1px solid #0697d6;

    -moz-box-shadow:0 0 2px #0697d6;

    -webkit-box-shadow: 0 0 2px #0697d6;

    box-shadow: 0 0 2px #0697d6;

    }.form-required {

    margin-left: 5px;

    color: #0697d6;

    }

  • Profile Image

    Answered by amazing2061 on November 13, 2013 at 01:30 AM

    UPDATE. Never mind. I am just going to use the form link instead. Thank you EltonCris for your help. really appreciated it.