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 Fields, “Number of Custom Fields to auto-generate for each USP Form”

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 :)

How to add a new custom-field definition

This section is aimed at beginners who are not familiar with adding a custom field to a post using the “Add New” Custom Fields meta box.

First, if you go to add a new custom field to a USP Form using the “Add New” panel:

WordPress Add New Custom Field meta box (default)

You may notice a bunch of existing options, like this for example:

WordPress Add New Custom Field meta box (open, showing suggestions)

All of those options are provided automatically by WordPress, to make it easier/faster to add new custom fields. The problem is that some of the options are for custom fields that are defined for other forms. So if you try to select from the existing options you could pick one that does not work with the current form.

Best advice: Ignore the suggested options and just enter the name of your custom field manually. Here are the steps to do it:

Step 1: Visit the “Edit USP Form” screen for your form. Scroll down beneath the content area and locate the Custom Fields meta box:

WordPress Custom Fields Meta Box on the Edit USP Form screen

Notice there are three custom fields already defined for the form:

[usp_custom_field form="100" id="1"]
[usp_custom_field form="100" id="2"]
[usp_custom_field form="100" id="3"]

So now we want to add another custom field, right? To do it, copy one of those existing custom field names and use it for the next step.

Step 2: Next paste the custom-field name into the “Add New” meta box, as shown here:

Adding a new custom field via the Add New meta box

Step 3: Remember to increase the id attribute by one (so increment by 1), as shown below. Notice that id="3" is changed to id="4".

Change the shortcode id to the next number

Save changes and done. You now have another custom field added to your form.

Important: do not change the value of the form attribute! It must match the actual ID of the current form.

Related