This tutorial explains how to add custom class attributes to labels and fieldsets on custom fields.

Step 1: Define Custom Field

First, define your Custom Field as usual, for example:

type#input|required#true|placeholder#Example|label#Example

Step 2: Add the Shortcode

Next, add the Custom Field shortcode to the form, for example:

[usp_custom_field form="123" id="1"]

That will output the following markup in the form (truncated, for clarity):

<fieldset class="usp-fieldset usp-fieldset-default">

<label for="usp-custom-1" class="example-class-1 usp-label usp-label-input usp-label-custom usp-form-123">Example</label>
.
.
.

Step 3: Add Custom Class

Then, to add a custom class attribute to the label, add label_class#custom_class to the custom field definition, like so:

type#input|required#true|placeholder#Example|label#Example|label_class#custom_label_class

Likewise, to add a custom class attribute to the fieldset, add field_class#custom_field_class to the custom field definition, like so:

type#input|required#true|placeholder#Example|label#Example|field_class#custom_field_class

Here is is all together:

type#input|required#true|placeholder#Example|label#Example|label_class#custom_label_class|field_class#custom_field_class

..which generates the following markup (truncated, for clarity):

<fieldset class="usp-fieldset usp-fieldset-default custom_field_class">

<label for="usp-custom-1" class="custom_label_class usp-label usp-label-input usp-label-custom usp-form-123">Example</label>
.
.
.

Note that you can change custom_label_class and custom_field_class to any valid CSS class name. Also FYI, both label_class and field_class are documented in the USP Pro Shortcode reference.

Related Infos