Width of text box

  • CFAR
    Asked on August 24, 2015 at 4:16 AM
    Problem: Width of text area
    I can not figure out how to selectively widen the "First Name" text box, the "Your Affiliation" text box, and the "Questions or Friendly Message" text area. IT SURE WOULD BE GREAT IF I COULD JUST RE-SIZE THESE BOXES BY DRAGGING THEM TO THE WIDTH I WANT!  Specifically: I would like the first name text box to be the same width as the Last Name text box, I would like the "Your Affiliation" text box to be the same width as the E-mail text box below it, and I would like the "Questions or Friendly Message" text area to be as wide as possible (right now it appears to extend about 60% of the way across the possible area). 
  • BJoanna
    Replied on August 24, 2015 at 4:46 AM

    You can make "First Name" and "Last Name" text box fields the same size by Injecting Custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

    #first_15 {

        width : 120px;

    }

    #last_15 {

        width : 120px;

    }

    Width of text box  Image 1 Screenshot 60

    To increase size of "Your Affiliation" text box, inside of Form Builder select that fields and click on Size option and to change number to 32.

    Width of text box  Image 2 Screenshot 71

    Regarding "Questions or Friendly Message" text area. I saw that you have CSS code inside of form designer for text area field that is allowing max width for text are field of 275px. 

    Width of text box  Image 3 Screenshot 82

    You can replace that code with this code:

    .form-textarea {

        width : 400px;

        max-width : 400px;

     

    }

    Or you can remove that code from form designer CSS and then inside of Form builder increase number of columns and rows for text area field. 

    Width of text box  Image 4 Screenshot 93

    After you make all of this changes your form will look like this.

    Width of text box  Image 5 Screenshot 104

    Here is my demo form: http://form.jotformpro.com/form/52352186034955? 

    Feel free to clone it to your account. 

    Hope this will help. Let us know if you need further assistance.