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.
Here is a written tutorial that explains how to customize the default Custom Field prefix.
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.
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
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
<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" />
name attribute is
c74_mobile-device appended with
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 :)