There are a list of CSS preset sizes for form input and button sizes. Use the classes listed below to modify your element sizes quickly and consistently throughout your form.
Input, select and textarea sizes
You can add any of the styles below to the element outer wrapper (quform-element).
Add the class like this example:
1
2 | <!-- Begin Text input element --> <div class="quform-element quform-small quform-element-text"> |
<!-- Begin Text input element --> <div class="quform-element quform-small quform-element-text">
Notice on line 2 we have added the quform-small class to make the field small. The other classes you can use are shown in the list below.
- quform-small
- quform-med
- quform-large
- quform-huge
- quform-full-width
- quform-fat
Specific size for a single field
To make a single field have a specific size you can use an inline CSS style on the input tag to set the width. Example below.
1 | <input id="email" type="text" name="email" style="width: 250px;" /> |
<input id="email" type="text" name="email" style="width: 250px;" />
The extra code style="width: 250px;" sets the field to be 250 pixels wide.
Button sizes
You can add any of the styles below to the button outer wrapper (quform-submit).
Add the class like this example:
1
2 | <!-- Begin Submit button --> <div class="quform-submit quform-button-small"> |
<!-- Begin Submit button --> <div class="quform-submit quform-button-small">
Notice on line 2 we have added the quform-button-small class to make the button small. The other classes you can use are shown in the list below.
- quform-button-small
- quform-button-med
- quform-button-large
- quform-button-full-width
- quform-button-fat
If you would like to change the sizes of these styles you can find them in the base.css file, search the document for /*Preset element sizes for the start of the code.