As of version 1.6, USP Pro supports custom field prefixes. So in addition to using the default usp-custom- prefix, you can define your own prefix to use with custom form fields.

Video Tutorial

Check out more video tutorials for USP Pro »

Written Tutorial

Here is a written tutorial that explains how to customize the default Custom Field prefix.

Step 1

Visit Advanced ▸ Custom Field Prefix and specify your custom prefix. For example, you could use cf7_ to integrate USP Pro with the Contact Form 7 plugin.

Step 2

Once you’ve defined the custom prefix, you can use it with any field by specifying the Custom Field name that you would like to use. For example, here we define a Custom Field with a name of cf7_mobile:

data-required#false|name#cf7_mobile|for#cf7_mobile|label#Mobile|placeholder#Mobile

To do this, we add the name attribute and the for attribute. The value for both of these attributes is cf7_mobile. The same prefix can be used for any Custom Field names that we would like to use. For example, we could add three Custom Fields with the following names:

cf7_subject
cf7_address
cf7_zipcode

The possibilities are endless. And for even more control over Custom Field names, check out Custom Custom Fields.

For more information about Custom Fields:

Custom HTML (Optional/Advanced)

Want to use your own HTML for Custom Fields? No problem, you can add any markup directly to your USP Form. For example, to create an input to use with Contact Form 7, we could add this:

<input name="c74_mobile-device" id="c74_mobile-device" type="text" value="" data-required="true" placeholder="Mobile Device" class="usp-input" required="required">

Notice that we use c74_mobile-device for the name attribute. That’s what makes it work. Everything else is up to you. If you go this route, it’s a good idea to copy the default markup that is generated by the plugin. Paste it into the USP Form, and then make changes from there. Use it like a template for customizing.

Here is a more elaborate example of using custom HTML for a prefix Custom Field. It embellishes the input with a <label> and <fieldset>:

<fieldset class="usp-fieldset usp-fieldset-default">
	<label for="c74_mobile-device" class="usp-label">Mobile Device</label>
	<input name="c74_mobile-device" id="c74_mobile-device" type="text" value="" data-required="true" placeholder="Mobile Device" class="usp-input" required="required">
</fieldset>

Then to make the field required, we can include the following hidden field in the <fieldset> (or anywhere in the USP Form):

<input name="c74_mobile-device-required" value="1" type="hidden">

The name attribute is c74_mobile-device appended with -required. The value attribute is 1, so our custom “mobile” field will be required by the user; any other value means the field is optional.

Aaaand done. Enjoy :)