How to Increase the Length of Text Input Fields on the Form?

Can we increase the length of the short form answer box

Hi David,

Thanks for reaching out to Jotform Support. You can increase the length of all regular text input fields by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*thread 26523031 - increase input fields length*/

li.form-line:not(.form-line-column) .form-input-wide[data-layout=half] {

    width: 100%!important;

}

/*ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Give it a try and let us know how it goes.

Can it be changed on a per text box basis and not all of them

Hi David,

Yes, we can change the CSS code to target only a specific field in the form. Share the Form URL and the exact field name with us, and we'll do a more in-depth investigation and work on finding a solution.

Once we hear back from you, we'll be able to help you with this.

https://form.jotform.com/251185034814049

Hi David,

If you want to add styles on a specific field only, you can try using the Advanced Designer tool. Let me show you how:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. Under the Colors tab, click on Advanced Designer.
3. In Advanced Designer, click on the CSS tab in the menu on the right side of the page. 
4. Now, double-click the field where you'd like to add a style in the form. A CSS selector will appear on the CSS box on the right that's specific to that field.
5. You can then apply custom styles to it. To increase the width, try using both the max-width and width properties together. If the changes don’t take effect, try adding !important to override any existing styles.
6. After making all the changes, click on the Save icon on the upper left corner of the page.
7. Then, click on the Jotform logo above it to go back to the Form Builder.

And that's it. Every saved changes you've made in the Advanced Designer tool will show on both Form Builder and the published version. You can also visit this page to learn more about the Advanced Designer tool.

Give it a try and let us know how it goes.