Plugin Planet

Premium WordPress Plugins

Learn how to add a custom text input field to any USP Form. Includes variations for derivative input types such as range, color, date, time, search, url, and many others.

Step 1: Use the following code for your Custom Field definition:

field#input|type#text|label#Custom Text Input|placeholder#Custom Text Input

Step 2: Add the custom-field shortcode to your form, for example:

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

That’s all there is to it. Here is a screenshot of the text field we just built:

USP Pro - Custom Text Field

Note: To see a live example of a custom text field, check out the “Starter” form demo, included in USP Pro version 2.3 and better (visit USP Forms > “Starter Form Demo”).


Note that custom text inputs can easily be changed into all sorts of cool HTML inputs, here are some examples:

Range Input

To make the field a range input, change the type to range, for example:

field#input|type#range|label#Custom Range Input|placeholder#Custom Range Input

Here is a screenshot of the results:

USP Pro - Custom Range Input

Color Input

To make the field a color input, change the type to color, for example:

field#input|type#color|label#Custom Color Input|placeholder#Custom Color Input
Note: in your custom-field definition, you can use octothorpe to get #. For example, to specify a default color for the color input, you can do value#octothorpeffffff and it will be output as value="#ffffff" in the form.

Here is a screenshot of the results:

USP Pro - Custom Color Input

Date Input

To make the field a date input, change the type to date, for example:

field#input|type#date|label#Custom Date Input|placeholder#Custom Date Input

Here is a screenshot of the results:

USP Pro - Custom Date Input

For more HTML input types, check out the type attribute in the list below.

Note: display of these HTML inputs depends on browser support. Not all browsers (especially older versions) display the inputs as range, color, date, etc. Instead, browsers that do not support these fields will fall back to a regular text input.


Here are some of the attributes available for custom textarea fields:

  • field – specifies the type of field
  • label – specifies the custom field label
  • placeholder – specifies the custom field placeholder
  • data-required – specifies if the field is required
  • class – adds any custom class to the textarea input
  • type – (valid when field is set to input) specifies the type of input, possible values: text (default), checkbox, password, radio, url, search, email, tel, month, week, time, datetime, datetime-local, color, date, range, number

View more custom-field attributes »