Plugin Planet

Premium WordPress Plugins

In this tutorial, you get two recipes for adding Range and Number fields to your USP Pro forms.

Related: You may also want to check out the video tutorial on HTML5 Form Inputs →

Add a Range Field

To add a range field to any USP Form, first define a custom field and be sure to include the following attribute:

type#range

Then include the custom field’s shortcode in the form, for example:

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

Save your changes and you’ll have something like this displayed in your form:

USP Pro - HTML5 Range Input Field

Range Limits

Hey, what about min/max limits? I hear you say. Well, that can be done by including the following attributes in your custom field definition:

type#range|custom_1#min:1|custom_2#max:100

Here we are limiting the possible values for the range field as follows:

  • Minimum Value: 1
  • Maximum Value: 100

Note that other attributes can be added to the range field using this same basic technique.

Add a Number Field

To add a range field to any USP Form, first define a custom field and be sure to include the following attribute:

type#number

Then include the custom field’s shortcode in the form, for example:

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

Save your changes and you’ll have something like this displayed in your form:

USP Pro - HTML5 Number Input Field

Number Limits

As with the range field, min/max limits for number fields can be done by including the following attributes in your custom field definition:

type#number|custom_1#min:1|custom_2#max:100|custom_3#step:0.5

Here we are limiting the possible values for the range field as follows:

  • Minimum value: 1
  • Maximum value: 100
  • Step value: 0.5

Note that other attributes can be added to the number field using this same basic technique.

Related: Add Date Field with Date Picker