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 height unable to satisfy both PC browser and Mobile

    Asked by benzy16 on August 16, 2013 at 10:17 AM

    We can't get the iframe height to fit well on both browsers and mobiles, the default height it gives us is 457 which leaves a heafty white gap under the form so reducing this can give us a good fit on the computer browser but cuts off the submit button on mobile browers, currently we have it set to appease the mobiles but we would like a good fit on both, using height:auto; simply gives us 100px height, cutting out most of the form any advice for this issue?

     

    Please ignore the image posted, I have fixed that issue and removed the question from this post.

    Page URL:
    http://www.feedwater.co.uk/legionella-risk-assessment2.php

    Screenshot
    email spinner field height Mobile
  • Profile Image

    Answered by jeanettebmz on August 16, 2013 at 03:59 PM

    Can you please try adding the code below in your HTML header before the </head> tag?

    <style>

    iframe, iframe#JotFormIFrame { height:200px !important; }

    </style>

    Then add the code below in your form styles (use this guide to know how)

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

     

    -You can adjust the Height and width of course.

    In general we recommend the followin witdh for  Smartphones:

    320px for portrait view

    480px for landscape view

    I hope this help. Let us know if further help is needed

  • Profile Image

    Answered by benzy16 on August 20, 2013 at 04:49 AM

    Thanks Jeanette,

     

    I have added in the code but it's not made any differnce, I have even increased the px of the max-device-width just to make sure it covering my iphone and increased the height: significantly but it is still cropping off the end of the form on my phone.

     

    Ben

  • Profile Image
    JotForm Support

    Answered by jonathan on August 20, 2013 at 07:42 AM

    Hi Ben,

    Perhaps you should also add a meta content that will allow scaling of the form.

    Can you please try adding the meta code like this

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

     

     

    Simply insert that code between the head tag of your page <head> </head>

    Please try this and check again if it makes the difference.

    Thanks.

  • Profile Image

    Answered by benzy16 on August 20, 2013 at 08:39 AM

    This did not work but I discovered that the left floating enquiry label was not working on the phone it was going above the field pushing the form down, I have set it to float right and it works. The form is now fixed however the submit button is much fatter on the phone is there a way to correct this?

    Ben

  • Profile Image

    Answered by EliezerN on August 20, 2013 at 12:57 PM

    @benzy16

    It's great to know that your first issue has been resolved. We will be more than glad to help you with your last request, however, we would appreciate if you open a new thread to make your last request as it is a bit different from the original one of this thread.

    It's a pleasure to assist you.

    Thanks