Tip: How to add border fieldsets to the form

Posted by on Jan 31, 2011 in How To, Tips

Tip: How to add a border fieldsets to the form
There are settings to draw a border fieldset around the entire form, or groups of the form fields.

How to enable a fieldset border around the entire form:
On the contact form edit page there is a setting you can check: “Enable border on contact form“.
This enables a fieldset border around all the form elements. The default label for the fieldset is “Contact Form:”, but you can change it in the “Fields:” section below.

How to edit the fieldset border colors and style
You can edit the fieldset border colors and style in the “Modifiable CSS Style Feature:” settings section “CSS style for border on the contact form:“. Apply any CSS attributes you need. Example for changing the border color to white on a dark theme:
Change: border:1px solid black; padding:10px;
to: border:1px solid white; padding:10px;

Note: you can change the color to any HTML hex color code
border:1px solid #666666; padding:10px;
also, these custom settings will be safe when upgrading the plugin.

fieldset-enable-form

fieldset-enable-form2

How to change or remove the fieldset border label “Contact Form”?
The default label for the fieldset is “Contact Form:“, but you can change it in the “Fields:” section. There is a section of settings “Change field labels:“. Any of these fields can be filled in to override the standard form labels.
To change the “Contact Form:” label, just enter a new label in this setting.
To remove the “Contact Form:” label, just enter the HTML comment tag in this setting, like this:
<!-- -->

fieldset-enable-form3

How to enable a fieldset border around groups of the extra form fields:
You can add fielsets in the extra fields on the contact form edit settings page. (see photos)
The fieldset(box-open) is used to draw a box around related form elements. The fieldset label is used for a (legend) title of the group.
The fieldset(box-close) is used to close a box around related form elements. A label is not required for this type. If you do not close a fieldset box, it will close automatically when you add another fieldset box.

fieldset-enable-form4

fieldset-enable-form5

Do you need help?

Send us a Donation:

Donate to Mike Challis