How to resize full name fields?

  • seankanaman
    Asked on April 7, 2024 at 11:20 AM

    Can I resize the full name Field, so the first name input field is a smaller than the last name?

    Jotform Thread 13653591 Screenshot
  • Gian_D JotForm Support
    Replied on April 7, 2024 at 11:49 AM

    Hi Sean,

    Thanks for reaching out to Jotform Support. You can change the length of your full name and first name field using CSS code. I cloned your form, and applied the needed CSS code to achieve that customization. Check out the screenshot below:

    How to resize full name fields? Image 1 Screenshot 40

    As you can see, the first name field is much smaller than the last name field. You can clone my demo form to make things easier, or you can apply the CSS code on your own. Let me show you how to do it:

    1. In Form Builder, click on the Paint Roller icon on the upper right side of the page, and click on the Styles tab.

    How to resize full name fields? Image 2 Screenshot 51

    2. Inside Inject Custom CSS, paste the CSS code below:

    /* To change the length of Name field */
    #id_20 .form-input-wide,
    #cid_20 .form-input-wide
    {width: 60%; min-width: 60%;}
    #last_20 {
      width: 150% !important
      max-width: 150% !important;}
    /* Ends here */

    How to resize full name fields? Image 3 Screenshot 62

    That's it. Let us know if you have any other questions.

 
Your Answer