Plugin Planet

Premium WordPress Plugins

In this post, you’ll learn how to make form fields optional or required with USP Pro.

Make any field optional or required

By default, all fields are required. So, to make any field optional:

  • For form fields added via shortcode (such as [usp_title] and [usp_content], add required="false".
  • For custom fields, add data-required="false"

For example, here is a form that has some optional fields and some required fields, as indicated by the required attribute:

[usp_name required="true"]
[usp_title required="true"]
[usp_email required="false"]
[usp_url required="false"]
[usp_content required="true"]

Likewise for custom fields, for example here are three custom-field definitions, two of which are required:




Alternately, we can explicitly specify that a custom field is required:


Either way works fine.

Pro Tip: use data-required#null to disable the required and data-required attributes.

Behind the scenes..

So what exactly happens when a field is set as either optional or required? I’m glad you asked:

  • Optional fields – adds markup attribute data-required="false"
  • Required fields – adds markup attributes data-required="false" and required="required"

That’s all that happens, no other changes are made in either case.

Client-side validation

Once you get your fields set up as optional or required, there are two built-in ways to validate the form in the browser:

The Parsley tutorial will help you implement Parsley. And to enable validation in Chrome and other supportive browsers, only one step is required, so to speak:

  1. Visit Advanced settings and remove novalidate from the option “Custom Form Attributes”

After saving your changes, try submitting a form that includes a few required fields. That will give you an idea of how it works. In Chrome, for example, you should see something similar to the following screenshot:

USP Pro - Chrome handling a required field

Here we have a content field that is set as required. So upon form submission, Chrome lets the user know that the field is required. Note that not all browsers support native form validation. Until they do, Parsley is recommended.

Also it should be noted that no client-side (i.e., JavaScript) method is required for basic form validation.