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

    How to increase the size of a input field so the field is visually larger?

    Asked by dougwoelfle on April 05, 2017 at 11:39 AM

    I am testing JotForm to see if it will meet my needs.  So far, so good.  But I can't figure out how to increase the size of the input fields on my form, so that my staff has more room to enter numbers when they count the money at the end of the day.  

    I think I've tried everything from using "Designer" to input of CSS.  Im not a programmer.

     

    Can you tell me what to do?

    Page URL:
    https://form.jotform.us/70934354303149

  • Profile Image
    JotForm Support

    Answered by Welvin on April 05, 2017 at 01:54 PM

    I think you would like to increase the width of the input table boxes. If so, inject the following custom CSS codes in the form:

    [data-type="control_matrix"] .form-textbox {

        width: 100% !important;

    }

    Follow our steps from this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    Please let us know if you require additional assistance.

  • Profile Image

    Answered by dougwoelfle on April 05, 2017 at 02:45 PM
    Worked well on desktop view. What about on a mobile phone or tablet?
    ...
  • Profile Image
    JotForm Support

    Answered by Jim_R on April 05, 2017 at 04:35 PM

    Looks like they are too narrow when viewed on a smaller viewport. Try adding these CSS codes:

    @media only screen 

      and (min-device-width: 320px) 

      and (max-device-width: 480px)

      and (-webkit-min-device-pixel-ratio: 2) {

        .form-matrix-row-headers {

          width: 50%;

        }

    }

    Related guide: How-to-Inject-Custom-CSS-Codes 

    Result:

  • Profile Image

    Answered by dougwoelfle on April 06, 2017 at 12:44 AM
    Beautiful! That did the trick!
    I'm impressed with the quick response and service!
    Speaks VERY well about your company!
    Thank you!
    ...