Plugin Planet

Premium WordPress Plugins

USP Pro makes it possible to create unlimited forms each with unlimited custom fields. Custom fields are automatically generated with each USP Form that is created. Each custom field accepts parameters to change its functionality and attributes. This flexibility provides the granular control needed to create virtually any type of form imaginable.

Video Tutorial

Written Tutorial

Like any custom field, each USP Custom Field:

  • Has a Name, which serves as the custom-field shortcode
  • Has a Value, which serves as the custom-field definition

So each Custom Field Name is a shortcode that looks like this:

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

Here, 123 is the form ID, and 1 is the custom-field ID.

The default Value of each Custom Field is defined like this:

data-required#true

By default, three USP Custom Fields are auto-generated for each USP Form. This number may be changed via the following setting:

USP Pro > Advanced Settings > Custom Form Fields

Customizing

Custom Fields may be customized by adding attributes to its value/definition. As previously mentioned, by default each Custom Field definition looks like this:

data-required#true

Here, data-required is the name of the attribute, and true is its value. Each attribute’s name and value is separated with a pound sign #. Multiple attributes may be included using a vertical pipe | as a separator. Here is an example:

data-required#true|label#Mobile|placeholder#Mobile

So if we were to add this Custom Field to a USP Form, it would display a text input. The label and placeholder for the input would be “Mobile”, because that is what is specified via the Custom Field attributes. Here is an example of the HTML that will be used to display this input:

<label for="usp-custom-1" class="example-class-1 usp-label usp-label-input usp-label-custom usp-form-123">Mobile</label>
<input name="usp-custom-mobile" type="text" value="" data-required="true" placeholder="Mobile" class="example-class-1 usp-input usp-input-custom usp-form-123" />

Once a USP Form is submitted, any Custom Fields will be attached to the submitted Post. You can view them at any time by visiting a submitted post and enabling the “Custom Fields” meta box, which is displayed beneath the content editor on the “Edit Post” screen.

For a complete list of available attributes for USP Custom Fields, check out the [usp_custom_field] section of the Shortcodes Reference.

Step-by-Step Guide

To add a Custom Field to any USP Form:

Pro Tip: Check out the video tutorial (provided above) for a visual guide to adding Custom Fields! :)

Step 1

Ensure that the “Custom Fields” meta box is visible on the “Edit USP Form” screen. It should be visible beneath the content editor. If you don’t see the meta box, make sure the form is saved or published, and then click the “Screen Options” tab in the top-right corner of the screen. There you can enable the option to display the Custom Fields meta box.

Step 2

Visit the Custom Fields meta box and copy the shortcode of the Custom Field that you would like to add. Then paste the shortcode into the form content wherever you would like it to be displayed. For example, the Custom Field shortcode should look something like this:

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

After the shortcode has been added to the form, you can save the changes and view the form on the frontend. If you decide that changes need to be made, you can revisit the Custom Field definition and add any attributes that may be useful. For example, you can add attributes to customize the label, placeholder, field type, and much more.

Pro Tip: For a complete list of available Custom Field attributes, check out the Shortcode Reference.

Step 3

Now that we’ve seen how to add a Custom Field to the USP Form, it’s possible to customize its attributes to make it almost any type of field required. For example, let’s say that we want to add a Custom Field to the form that collects optional “mobile” information from the user. To set it up, we could use the following Custom Field definition:

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

Remember to save changes for both the Custom Field and USP Form (click “Update” or “Publish”).

At this point, the Custom Field is added to the form. Any posts that are submitted via your form will be available in the WP Admin Area (e.g., under the “Posts” menu). Visiting the submitted post, you will see all of its Custom Fields attached and displayed beneath the post editor (in the “Custom Fields” meta box).

Step 4

To display Custom Fields on the frontend, you can use the free Helper Plugin.

Or, instead of using the Helper Plugin, you can display Custom Fields on any Post or Page via USP Pro Shortcodes.

Or, to display Custom Fields in your theme template, you can use any suitable USP Pro Template Tags.

That’s all there is to it. It may look like a lot at first, but once you see how it works, the flexibility and simplicity will become clear. You can create just about type of form field imaginable. Here is a quick guide to Custom Field Recipes to give you some ideas :)

Related