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 change Textbox height in JotForm

    Asked by MCVH on November 18, 2014 at 04:36 PM

    Hello,

    On my form I have made some text fields larger to allow more text input. But now when I add more text fields they are just as large but I need them to be the normal size. When I go into the code and change the size they ALL change to that size??

     

    Thanks, Scott

    text field height changing text css code
  • Profile Image
    JotForm Support

    Answered by jonathan on November 18, 2014 at 06:00 PM

    Hi Scott,

    Can you please tell us which jotform to checked this?

    I could not see this on your jotform http://www.jotformeu.com/form/43212912110336

     

    But if you want to change the font-size of a particular field on the form, you can do that by injecting custom CSS code and use the specific field ID# on the form you wanted to apply the font-size.

    Example in your jotform, if you want the Full Name field to have a bigger font-size versus the other fields, you add this CSS code

    #input_32 {

    font-size: 24px !important;

    }

    (the #input_32 is the field ID# of Full Name field)

    It should become like this

    User guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by MCVH on November 19, 2014 at 06:25 AM

    Hey, I was actually trying to fix the actual size of the text box, not the font - sorry. Is is another one of my forms:

    http://www.mycvhero.com/order/4587335148?preview=Y

    As you can see the size of the text box are large and I am trying to add more text boxes but at a standard size?

  • Profile Image
    JotForm Support

    Answered by jonathan on November 19, 2014 at 07:49 AM

    Hi,

    Sorry about that.

    Anyway, I checked your jotform http://www.jotformeu.com/form/43202086144344 and I can see the injected CSS code is causing the Textboxes to hav custom height.

    This CSS code

    .form-dropdown, .form-textarea, .form-textbox{

    color:#919191 !important;

    font-size: 14px;

    border-radius: 5px;

    height: 30px;

    width: 400px;

    font-family:"Arial",Verdana,Tahoma,sans-serif;

    }

     

    Since the .form-textbox class was specifically assigned with a height of 30px , all subsequent Textbox field added will have that height.

    So, do you want only a specific Textbox to have a height of 30px? And the rest should be default height?

    You can do that by adding the rule to the specific field using its ID#.

    Example, if you only wanted the Full Name field to have the custom height, you can alter the CSS code to like this

    #input_32{

    height: 30px !important;

    }

     

    .form-dropdown, .form-textarea, .form-textbox{

    color:#919191 !important;

    font-size: 14px;

    border-radius: 5px;

    width: 400px;

    font-family:"Arial",Verdana,Tahoma,sans-serif;

    }

     

    here is a demo form you can check http://form.jotform.me/form/43222801982452?

    Inform us if you need further assistance.

     

    Thanks.