How to change the first name and last name field size

  • Profile Image
    Asked on September 16, 2014 at 05:24 AM
    I have one final question...
    Is it possible to change the form field size?
    Example; for the Name field, It has a text box for first name and a box for
    last name, I would like to make the boxes longer. they are way to small, I
    would also like to make them equal in size.
    I'm also using the same quick tool for question and answers, there again...
    I would like to change the size of the text box. I'm including a couple of
    screenshots to explain what I'm doing. The first one shows it being used in
    the traditional way. The second and third example show it being used in a
    much different way. I did this because I couldn't figure out how to do it
    any differently. maybe I just missed something (probably) so this was my
    work around. If there's a better/easier way to do this please let me know.
    thanks again. I really appreciate your patience with me.
    *--Best Regards,*
    *Natasha Puffer *
    *Pink Iguana Digital MusesInternet Marketing Specialist*
  • Profile Image
    Answered on September 16, 2014 at 07:48 AM

    Hello Natasha,

    Please be noted that you can inject custom css code in your JotForm to change the width of any form fields. 

    You need to basically find the field ID of your form fields and the inject the required custom css code in your form. The following guide should help you: 

    Please let us know the form and the field names of your Name field and we will help you with the custom css code.

    We will wait for your response.

    Thank you!

  • Profile Image
    Answered on September 16, 2014 at 05:27 PM

    I think found the ID's for the different form labels. I want to change the size on most of them.  but here's two of them #input_37 & #first_5,#last_5 Is this the correct information?

    If you can send me the CSS script to do this then I can fill in the blanks.


    Thanks for all your help,


  • Profile Image
    Answered on September 16, 2014 at 05:45 PM

    You can use the following code to inject into your CSS code.

    #first_37, #last_37 {

    width : 150px;


    The width can be changed as per your requirement. Please get back to us if you need further assistance. We are happy to assist you.

  • Profile Image
    Answered on September 16, 2014 at 06:08 PM

    It didn't work. the text fields didn't get larger. Also, wouldn't I need two widths since there's two text fields for that particular question?


    One more questions is it possible to add more space between the text fields?


    Thanks again,


  • Profile Image
    Answered on September 16, 2014 at 06:44 PM

    No, you can actually control both via custom css similar to how my colleague had showed you above. 

    In his example he's targeting both the field id's of the first and last name of a Full Name Field. It probably didn't work because your id's might be different. I tested it and it is working.

    Also, are you trying to adjust the field height and width or just make the textbox longer? I noticed above in your first response you said that you wanted it longer. Please tell us more if different.

    Try making it larger with something like this instead but you'll need to change out the id's:

    #input_3, #input_4 {height: 30px; width: 175px;