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.

To optimize time, let’s break this up into two parts. First I’ll provide a summary of USP Custom Fields for those familiar with WP Custom Fields in general. Then I’ll explain the process in more detail for beginners. You also can watch a video »

Summary of USP Custom Fields

By default, three USP Custom Fields are auto-generated for each USP Form. This number may be changed in Advanced Settings > “Custom Form Fields”.

Like any custom field, each USP Custom Field:

  • has a Name that also serves as its shortcode
  • has a Value that includes its attributes
  • has a default Name of [usp_custom_field form="123" id="1"], where “123” is the form ID and “1” is the custom-field ID
  • has a default Value of data-required#true (explained below)

So for example, to include/display the first default custom-field in a USP Form, we would copy its shortcode (which is the custom-field Name) and paste it into the form. Then previewing or viewing the form on the front-end would show the custom field displayed as expected.

Customizing

Customizing a USP Custom Field involves modifying its Value. Each custom-field Value by default looks like this:

data-required#true

Here, data-required is the name of the custom-field 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|name#mobile|label#Mobile|placeholder#Mobile

Once the Name/shortcode of this custom field (e.g., [usp_custom_field form="123" id="1"]) is added to the form, the specified attributes will display a form field with the following HTML/markup:

<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 the form is submitted, each custom field will be attached to the submitted Post, Page, or Custom Post Type. For a complete list of available attributes for USP Custom Fields, check out the “[usp_custom_field]” section of the Shortcodes Doc.

Step-by-Step Guide to USP Custom Fields

Now for the step-by-step guide. To use a USP Custom Field:

Step 1: Ensure that “Custom Fields” are visible in the USP Form screen. They should be visible beneath the USP-Form editor; if they are not visible there, click the “Screen Options” tab in the top-right corner of the screen. There you can select an option to display the custom fields.

Step 2: Once you can see the custom fields beneath the USP Form editor, each custom field will have two parts: a Name and a Value. For USP custom fields, the Name is [usp_custom_field form="123" id="1"], where “form” refers to the post-ID of the USP Form, and “id” is the ID of the custom field. Once that makes sense, take a look at the Value of the custom field, which has a default value of data-required#true. So let’s say that we want to use this custom field. To add it to the form, we would copy it’s name:

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

..and simply paste it into the USP Form, save changes, and done. To see what this does, preview or view the USP Form on the front-end of your site and view its source code in your browser. In the markup you will see that a new field has been added to the form:

[...]

<input name="usp-custom-1" type="text" value="" data-required="true" placeholder="Example Input 1" class="example-class-1 usp-input usp-input-custom usp-form-123" />

[...]

Here we can see the effect of the custom-field Value, which again is data-required#true. This results in the tag attribute, data-required#true, which could be set to “false” by changing the custom-field Value to data-required#false.

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 use this as the custom-field Value:

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

..and remember to save changes for both the custom field and the USP Form (click “Update” or “Publish” after adding the custom Value. After saving the changes, viewing the source code on the front-end shows the following code added to the form:

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

A complete list of custom-field attributes is available in the USP Docs, look for the “CUSTOM FIELD ATTRIBUTES” section.

Step 4: So at this point, the custom field is added to the form, and let’s say now that a visitor uses it to submit a post. After the form is submitted successfully, it will be available as a Post, Page, or Custom Post Type in the WP Admin Area. Visiting the submitted post, you will see the custom fields attached and displayed (like before) beneath the post editor. Once you see the custom fields, you know they are ready to use and display as needed. To display custom fields on any Post or Page, use one of the many USP Pro shortcodes.

Then to display the custom fields in your theme template, use any USP Pro or suitable WP template tags. Check out a complete list of USP Pro template tags in the USP Docs.

That’s all there is to it. It may look like a lot at first read-thru, but once you see how it works, the flexibility and simplicity should become clear. You can create just about type of form field imaginable.

Related Posts