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
- For custom fields, add
For example, here is a form that has some optional fields and some required fields, as indicated by the
[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:
field#input_checkbox|checkboxes#input1:input2:input3 field#input_radio|radio_inputs#input1:input2:input3|radio_checked#input1 field#select|options#input1:input2:input3|data-required#false
Alternately, we can explicitly specify that a custom field is required:
Either way works fine.
Pro Tip: use
data-required#null to disable the
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
- Required fields – adds markup attributes
That’s all that happens, no other changes are made in either case.
Once you get your fields set up as optional or required, there are two built-in ways to validate the form in the browser:
- Validate via Parsley
- Validate directly via the browser (e.g., Chrome)
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:
- Visit Advanced settings and remove
novalidatefrom 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:
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.