My form inputs are too wide

There are two situtations where form inputs look too wide. One is when the form is in a narrow module and the default ChronoForms setting is too big; the other in a full page when the template CSS over-rides the ChronoForms setting.
By default ChronoForms does very little to set the width of form inputs. The Text box element has a Field Size box in the General tab that has a setting of 30 characters. In many cases this is acceptable but you can change it if needed. 

Note that the Field Max Length setting has no effect on the appearance of the input, it sets the maximum number of characters that can be typed into the box.

A CSS setting for the input width will over-ride the Field Size setting.

ChronoForms has no CSS settings for input widths but some templates do - typically they set the width to 100% and this can result in very wide input boxes.

Use your web browser developer tools to see exactly what CSS is being applied to any element. For example, see this tutorial on using the Chrome develop tools.

You can add CSS to your form to set a specific width for all of the inputs or for specific inputs using the classes and ids that ChronoForms applies to all of the HTML it creates. For example, to set a width for all ChronoForms text inputs:

.cfdiv_text input {
  width: 100px;
}

or to set a width for all inputs (text, submit, radio, checkbox, etc.) in a particular form

#chronoform_form_name input {
  width: 250px;
}
You may need to add the !important attribute to over-ride your template CSS
.cfdiv_text input {
  width: 100px !important;
}
The similar code for a textarea is
.cfdiv_textarea textarea {
  width: 400px !important;
}
 

Comments:

You need to login to be able to post a comment.