How to change the first name and last name field size

  • npuffer
    Asked on September 16, 2014 at 5: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*
    ...
  • Ashwin JotForm Support
    Replied on September 16, 2014 at 7: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:

    http://www.jotform.com/help/146-How-to-find-Field-IDs-Names 

    http://www.jotform.com/help/176-How-to-apply-custom-CSS-to-a-particular-field 

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

    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!

  • npuffer
    Replied on September 16, 2014 at 5: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,

    Natasha

  • Kiran Support Team Lead
    Replied on September 16, 2014 at 5: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.

  • npuffer
    Replied on September 16, 2014 at 6: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,

    Natasha

  • KadeJM
    Replied on September 16, 2014 at 6: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;

    }

    Result:

    How to change the first name and last name field size Image 1 Screenshot 20