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

    Make the form responsive on iPhone 6 Plus

    Asked by killmeal on September 17, 2015 at 07:02 AM
    but it can not responsive form in all smart phone.

    Can you help me? thanks again!

    responsive responsive form mobile responsive make responsive
  • Profile Image
    JotForm Support

    Answered by Jan on September 17, 2015 at 07:16 AM

    I checked your webpage (http://www.mykillmeal.com/form/game.html) and the direct form (http://form.jotform.me/form/52590950729464) and I can see that the form is responsive.

    We have a guide on how to make your form mobile responsive if you need one.

  • Profile Image

    Answered by 2maxsing on September 17, 2015 at 10:43 PM

    Hi ,thank you very much, but I can't see the responsive form under my webpage,

    I will show the screen capture for you by iphone 6 plus, it is not a responsive form

    (http://www.mykillmeal.com/form/game.html):

      

  • Profile Image

    Answered by 2maxsing on September 17, 2015 at 10:49 PM

    And i will show the direct form (http://form.jotform.me/form/52590950729464) on iphone 6 plus, it is  a responsive form

       

     

    I hope I can show the form on my webpage like as direct form, thanks a lot!

  • Profile Image
    JotForm Support

    Answered by beril on September 18, 2015 at 03:50 AM

    Hi,

    Can you copy and paste the code below to your CSS from Designer?

     

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

    .form-line{

    width: 100%;    

    }

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 75% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

     

    }

     

    Here is how to do this:

    1) Click on Setup & Embed.

     

    2) Click on Designer.

     

    3) Click on CSS.

     

    4) Copy & paste the code above to CSS.

     

    5) Click on save button.

     

     

    Here is how it works:

     

    Let us know, If it works properly or not. We will be glad to assist you. I am waiting your response.

     

  • Profile Image

    Answered by killmeal on September 20, 2015 at 10:24 PM

    HI, thank you for your reply, I have followed the step.

    However, I happen that:

    1. It also can't show the responsive form in iphone6.

    2. It can show the responsive form in android system, but it can't scroll to the bottom, you can see a picture as below where i can scroll, thanks a lot!

  • Profile Image

    Answered by Ben on September 21, 2015 at 09:20 AM

    Please note that the form is responsive - just as you have mentioned it yourself above:

    And i will show the direct form (http://form.jotform.me/form/52590950729464) on iphone 6 plus, it is  a responsive form

    What this means is that the form is responsive, but your website - or at least the part where the form is embedded in - is not.

    Now there are 2 things that I would suggest to do, both are about changes on your own website.

    The first is to add the following CSS:

    @media screen and (min-width:768px) {
      #JotFormIFrame {
        min-height: 3600px;
      }
    }
    @media screen and (max-width:360px) {
      #JotFormIFrame {
        min-height: 4200px;
      }
    }
    @media screen and (max-width:320px) {
      #JotFormIFrame {
        min-height: 4110px;
      }
    }

    You should add it in the <head> part of your website. What we do with it is to set the various heights that the form needs to be fully shown on your website.

    Now the second code is this:

    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    With it we are setting both html and body elements of your website to take the full size of the page available, which will in turn set the maximum size of the elements holding the form as well.

    Once you add the code above, it should look properly - it looks OK for me while testing it out, but do let us know if it does not look good for you and if so a screenshot, as above, would be great to be able to see the same what you see.