This quick tutorial shows how to customize labels, placeholders, and fieldsets with USP Pro. You’ll learn how to change and/or disable labels and placeholders on Primary Fields and Custom Fields, and also learn how to completely customize the default HTML/markup that’s generated for labels and fieldsets in any USP Form.

Labels and Placeholders for Primary Fields

To customize labels and placeholders for Primary Fields, like Post Title, Post Content, Post Tags, etc., simply add the label and placeholder attributes, like so:

[usp_title label="Label for the Title" placeholder="Placeholder for the Title"]
[usp_content label="Label for the Content" placeholder="Placeholder for the Content"]

The label and placeholder attributes work for any Primary Field (e.g., Post Title, Post Content, Post Category, Author Name, et al). If you want to disable the label and placeholder, specify null as the value:

[usp_title label="null" placeholder="null"]
[usp_content label="null" placeholder="null"]

So far so good. Now on to labels and placeholders for Custom Fields..

Labels and Placeholders for Custom Fields

To customize labels and placeholders for Custom Fields, like textareas, checkboxes, select, radio, etc., simply add the label and placeholder attributes to the custom-field definition, like so:

field#input|label#Custom Text Input|placeholder#Custom Text Input
field#textarea|label#Custom Textarea|placeholder#Custom Textarea

The label and placeholder attributes work for any Custom Field that displays a label and/or placeholder. For more details on attributes for Custom Fields, check out the USP Shortcode Reference. If you want to disable the label and placeholder, specify null as the value:

field#input|label#null|placeholder#null
field#textarea|label#null|placeholder#null

Now let’s take a look at defining custom markup for labels and fieldsets..

Default Markup for Labels and Fieldsets

By default, the HTML/markup generated for Primary Fields looks like this (simplified for clarity):

<fieldset class="usp-fieldset usp-fieldset-default">
	<label for="usp-title" class="usp-label usp-label-title">Post Title</label>
	<input name="usp-title" id="usp-title" type="text" placeholder="Post Title">
</fieldset>

..such that each field is wrapped with a <fieldset> and includes a <label>. Likewise, the HTML/markup for Custom Fields looks like this (simplified for clarity):

<fieldset class="usp-fieldset usp-fieldset-default">
	<label for="usp-custom-1" class="usp-label usp-label-input">Custom Text Input</label>
	<input name="usp-custom-1" id="usp-custom-1" type="text" placeholder="Custom Text Input">
</fieldset>

As we can see, the structure of both Primary and Custom Fields is the same.

Customize Markup for Labels and Fieldsets

So now let’s say that we want to customize the default markup for labels and fieldsets. For example, let’s say that we want to add a link to the label and reverse the order of the <input> and <label>. Here is how we would do it for a Primary Field, such as Post Title:

[usp_fieldset]
	[usp_title label="null" fieldset="null"]
	<label for="usp-title">This is a custom label with a <a href="/">link</a></label>
[#usp_fieldset]

Here we use label="null" and fieldset="null" to disable the label and fieldset for the Post Title field. We also wrap the field with a custom fieldset, [usp_fieldset]. And of course we add a simple link to the label tag to make it all good.

Likewise for Custom Fields, we can customize the default markup by first modifying our custom-field definition to disable both label and fieldset:

field#textarea|fieldset#null|label#null

Then we can define our own label and fieldset like so:

[usp_fieldset]
	[usp_custom_field form="123" id="1"]
	<label for="usp-custom-1">This is a custom label with a <a href="/">link</a></label>
[#usp_fieldset]

Here we use label#null and fieldset#null to disable the label and fieldset. We also wrap the field with a custom fieldset, [usp_fieldset]. And of course we add a simple link to the label tag to finish the example.

To view the markup that results from either of these techniques, add the example shortcodes to a test USP Form and then inspect the source code of your form on the front-end. The possibilities are endless.

Resources