It is hard to read and fill the form on Mobile

  • Profile Image
    blitztraining
    Asked on November 01, 2016 at 10:54 PM

    Hi There,

    I created a form and embedded w/ the responsive widget. However, when I load the page on my iPhone 6 it just looks like a miniature form and is VERY hard to read and fill out. I can't have customers filling out a form on their phones like this.

    Please help!

    Bryan

  • Profile Image
    emily
    Answered on November 02, 2016 at 05:00 AM

    For your form to be mobile friendly, there are few options you can implement. One of the option is to make the form responsive.

    Here is the guide that will help you solve this issue.

    https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm

    I hope it helps. If the problem continues, please contact us again.

    Thanks.

  • Profile Image
    blitztraining
    Answered on November 02, 2016 at 07:44 AM
    That is with it responsive. Both with the design option and responsive widget, it came out that way.
    I need this done as soon as possible. I can hardly read it the way it is.
    Sent from my iPhone
    ...
  • Profile Image
    emily
    Answered on November 02, 2016 at 08:52 AM

    Have you tried altering the height and width of your text boxes, drop downs and sizes of your labels?

    If not, kindly inject the CSS codes below. You can alter the numbers according to your demand.

    .form-textbox {

        height : 30px;

        width : 200px;

    }

    .form-dropdown {

        height : 30px;

        width : 100px;

    }

    .form-label.form-label-top {

        font-size : 20px;

    }

    .form-sub-label {

        font-size : 20px;

    }

    #text_74 {

        font-size : 30px;

    }

    Here is the guide showing how to inject CSS codes.

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If the problem still continues, please let us know.

    Thanks.

     

  • Profile Image
    blitztraining
    Answered on November 02, 2016 at 09:44 AM
    I actually got it to work in a new page. However, now I'm having trouble with the width of the form. It is touching the right side of the screen, but I would like a little space on the side. Padding doesn't seem to work.
    Sent from my iPhone
    ...
  • Profile Image
    BJoanna
    Answered on November 02, 2016 at 01:25 PM

    I have tested your form on my Samsung Galaxy S4 and on iPhone simulator, but I was not able to replicate mentioned issue. Your form is positioned correctly on my end. 

    Can you please try to add this code and see if it helps:

    @media (max-width: 480px) {

    .form-all { padding:10px !important; }

    }

    How to Inject Custom CSS Codes

     

    Hope this will help. Let us know if you need further assistance.