This tutorial explains various ways to customize fieldsets with USP Pro.

First things first

There are two main ways to customize fieldsets: globally and locally. Globally, you can enable or disable the auto-display of fieldsets. To do so, visit Advanced ▸ Auto-include fieldsets and pick your poison. Locally, you can use shortcode attributes to modify the display of fieldsets. The remainder of the article focuses on customizing fieldsets locally, or per-form.

The Fieldset Quicktag

The Fieldset Quicktag looks like this: [usp_fieldset]...[#usp_fieldset]. To add a fieldset using the Fieldset Quicktag, click the “USP:Fieldset” button, once to add the opening [usp_fieldset] tag, and then once more to add the closing [#usp_fieldset] tag. This method enables you to wrap any field with a fieldset.

Custom CSS Classes for Fieldsets

The following USP shortcodes accept a fieldset attribute:

  • [usp_name]
  • [usp_url]
  • [usp_title]
  • [usp_tags]
  • [usp_captcha]
  • [usp_category]
  • [usp_taxonomy]
  • [usp_content]
  • [usp_files]
  • [usp_remember]
  • [usp_submit]
  • [usp_email]
  • [usp_subject]

The fieldset attribute accepts the following values:

  • true – enable the fieldset (default)
  • false – disable the fieldset
  • class – any custom class(es)

So for example, to add some custom classes to the Title fieldset:

[usp_title fieldset="custom, classes, awesome"]

Or to disable the fieldset for the Title field:

[usp_title fieldset="false"]

Custom Fieldsets for Custom Fields

In addition to the primary fields specified above, USP Pro Forms enable Custom Fields to be added to the form. To customize fieldsets for custom form fields, we can use the following attributes:

  • field_class – additional classes for fieldset (default: none)
  • fieldset – enables disabling of fieldset (use fieldset#null)

So to add some custom classes, we can add the following attribute to our custom-field definition:

field_class#custom-class,another-class,and-another-class

Or to disable the auto-fieldset for the custom field:

fieldset#null

Examples

Here are several examples showing how to use/add custom fieldsets in any USP Pro Form.

Auto-fieldset with custom classes

Added to form:

[usp_title fieldset="custom-class,whatever-class"]

Output:

<fieldset class="usp-fieldset custom-class whatever-class">

... (title label/input) ...

</fieldset>
Manual fieldset with custom classes

Added to form:

[usp_fieldset class="custom-class whatever-class"]

[usp_title fieldset="false"]

[#usp_fieldset]

Output:

<fieldset class="usp-fieldset custom-class whatever-class">

... (title label/input) ...

</fieldset>

Alternately, you can add the fieldset directly:

<fieldset class="custom-class whatever-class">

[usp_title fieldset="false"]

</fieldset>

Output:

<fieldset class="custom-class whatever-class">

... (title label/input) ...

</fieldset>

Related Infos