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

    Width of text box

    Asked by CFAR on August 24, 2015 at 04: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). 
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 24, 2015 at 04: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;

    }

    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.

    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. 

    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. 

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

    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.