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 cuts in half on (IOS - iPhone 5)

    Asked by Effie on April 07, 2016 at 07:16 AM

    Hi There,

    I've a very long form and the end can not be seen in iPhone5.

    What should I inject into the CSS to get it look fine?

     

    Here is the form:

    http://transaustremovals.com.au/moving-inventory/

     

    Thanks

    Effie

    iphone 5 cut in form cut
  • Profile Image
    JotForm Support

    Answered by mert on April 07, 2016 at 10:49 AM

    Hi Effie,

    On my tests, the form cuts in half; but not vertically, horizontally. Please, see the screenshot from the below:

     

    To avoid this issue, please use the following CSS:

     

    @media screen and (min-width: 100px) and (max-width:640) {

        body {

            width: 450px !important;

        }

     

    }

     

    Please, do let us know the results.

    Regards.

  • Profile Image

    Answered by EffieMcNair on April 07, 2016 at 11:17 AM

    Thanks Mert - are you checking it on a real phone or just on an online simulator? 

    I don't have the actually phone but one of the customers said it was cut...

    I've injected the code - could you please check it for me to see if the 'GET A QUOTE' (Submit) button can be seen too? and that its no longer cut in half as you mentioned...?

     

    Many thanks

    Effie

     

  • Profile Image
    JotForm Support

    Answered by mert on April 07, 2016 at 11:48 AM

    Effie, you are most welcome. I checked the webpage and found a mistake. Please, delete the previous code and change it from the one below:

     

    @media screen and (min-width: 100px) and (max-width:640) {

        .form-all {

            width: 253px !important;

        }

    }

     

    Please, do let us know when you made the changes.

    Thanks.

  • Profile Image

    Answered by EffieMcNair on April 07, 2016 at 07:24 PM

    Thanks Mert - I changed it now - could you please check it again?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 07, 2016 at 11:19 PM

    I do not have a real Iphone 5 so I could not test your mobile form issue on the device.

    I used instead a developer online tool from https://www.browserstack.com using a paid account to check how your mobile form on your website perform on Iphone 5 device.

    Unfortunately it still is not working properly as seen on the test result when on the website.

    I checked as well using instead just the form URL http://www.jotform.co/form/60673851114857

    The mobile form responsiveness perform much better

    It is possible that there just a need a mobile setting on your website that needs to be ON or enabled. Can you please if there is such mobile optimization option on your website as well?

    We will wait for your updated response.

     

     

     

     

  • Profile Image

    Answered by EffieMcNair on April 08, 2016 at 04:29 AM

    Thanks jonathan,

    I fixed what you suggested and now some of the fields are looking better! 

     

    However the columns are still too wide and not responsive for some reason. ...must be an extra '!important' somewhere that is locking it and I am not able to recognise - if you could have a look at my CSS that would be much appreciated.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by beril on April 08, 2016 at 05:10 AM

    Can you add the CSS code below to solve that problem?

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

        .form-all {

            width : 450px !important;

            width : initial !important;

            width : 100% !important;

          

        }

    }

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image
    JotForm Support

    Answered by mert on April 08, 2016 at 05:33 AM

    Hi again,

    I know, It has been a frustrating period of time with full of alternative answers; but currently, I think we found the best solution. Please, ignore all of the previous suggested codes and apply the following one:

     

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-label {

    width: 250px !important;

    }

    .form-all {

    width: 600px !important;

    }

    .form-textbox{

    width: 52px !important;

    }

    }

     

    In addition, we checked it on real iPhone, so this issue has officially fixed. Please, apply this one and let us know the results.

     

    Regards.