Plugin Planet

Quick tutorial showing how to set up checkbox fields in USP Pro.

Single Checkbox

USP Pro makes it easy to display single checkboxes in your form. For example, here’s how to display an “Agree to Terms” checkbox that users must check in order to submit the form.

Step 1: Custom Field Definition

Define your custom-field using the following attributes:

data-required#true|type#checkbox|name#agree|for#agree|label#Agreement|placeholder#Agreement|value#true

Customize the above shortcode attributes as needed to achieve your desired configuration. Note that we have set the required attribute to true in order to make the checkbox a required field. You can change that to false to make the field optional.

Step 2: Custom Field Shortcode

Next, add the shortcode for your newly defined custom field to the form:

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

Remember to edit 123 with the actual ID of your form. You can find it in the address bar of your browser. Look at the URL and notice the numerical value of the post parameter. That is the official form ID; use it as the value of the form attribute in the above shortcode.

For more information on how to define and use custom form fields, check out USP Pro – Custom Fields. To display more than one single checkbox, skip ahead to Multiple Single Checkboxes. Or, to display a set of checkboxes that belong to the same custom field, continue reading..

Multiple Checkboxes

The idea here is that you can use regular HTML/markup in any USP Form. So instead of relying on custom field shortcodes, you can create the required markup with any attributes or structure that is required. Then add it to the form and done. So for multiple checkboxes, here is a plug-n-play example. Just create a new USP Form and add the following slab of code:

[usp_name]
[usp_title]
[usp_content]

<div class="usp-checkboxes">
	<label><input name="usp-custom-checkbox[]" type="checkbox" value="apples"> Apples</label>
	<label><input name="usp-custom-checkbox[]" type="checkbox" value="oranges"> Oranges</label>
	<label><input name="usp-custom-checkbox[]" type="checkbox" value="bananas"> Bananas</label>
</div>

Here the first three lines are USP shortcodes for the required elements for a WP Post, namely the author, title, and post content. Once we have that, the next block of code will output a set of three checkboxes that belong to the same custom field. This means that the user will be able to check any/all of these boxes, with the result being the following custom fields attached to the submitted post:

• Name/Value: usp-custom-checkbox/apples
• Name/Value: usp-custom-checkbox/oranges
• Name/Value: usp-custom-checkbox/bananas

Once you’ve got this example set up, try submitting a post to see how the checkbox information is attached via custom fields.

Required Field

To make this custom field (“usp-custom-checkbox”) required, include a hidden field in the form, like so:

<input name="usp-custom-checkbox-required" value="1" type="hidden">

When included in the form, this hidden field will require the user to check at least one box in order to submit the form. To make each of the checkboxes required, it’s best to use a set of single checkboxes..

Multiple Single Checkboxes

In the previous method, all of the checkbox data has the same custom-field name. But it is also possible to display a set of checkboxes that each have their own name. Here is the same form template as before, only using a unique custom field for each checkbox (the previous code example uses an array, so all checkboxes have the same custom field name).

[usp_name]
[usp_title]
[usp_content]

<div class="usp-checkboxes">
	<label><input name="usp-custom-apples" type="checkbox" value="apples"> Apples</label>
	<label><input name="usp-custom-oranges" type="checkbox" value="oranges"> Oranges</label>
	<label><input name="usp-custom-bananas" type="checkbox" value="bananas"> Bananas</label>
</div>

Again, pretty much the same markup as before, except that here we have replaced usp-custom-checkbox with usp-custom-{fruit} in each <input>. Once we have that, the next block of code will output a set of three checkboxes that each have their own custom-field name. This means that the user will be able to check any/all of these boxes, with the result being that each selected box will be attached to the submitted post as a custom field:

• Name/Value: usp-custom-apples/apples
• Name/Value: usp-custom-oranges/oranges
• Name/Value: usp-custom-bananas/bananas

Once you’ve got this example set up, try submitting a post to see how the checkbox information is attached via custom fields.

Note

Instead of using markup for multiple single checkboxes, you can use custom-field shortcodes, like so:

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

Then you would define the attributes for these custom fields as explained in the first section above (Single Checkbox). You can also combine shortcodes with markup to achieve the desired layout.

Required Field

To make any of the checkboxes required, include a hidden field in the form:

<input name="usp-custom-apples-required" value="1" type="hidden">

Remember to change usp-custom-apples with the name of the checkbox that should be required. So to require all three checkboxes:

<input name="usp-custom-apples-required" value="1" type="hidden">
<input name="usp-custom-oranges-required" value="1" type="hidden">
<input name="usp-custom-bananas-required" value="1" type="hidden">

Radio Inputs

Following from the previous discussion, here is an example of some HTML markup to add custom radio inputs to the form:

<div class="usp-radio">
	<label><input name="usp-custom-fruit" type="radio" value="apples"> Apples</label>
	<label><input name="usp-custom-fruit" type="radio" value="oranges"> Oranges</label>
	<label><input name="usp-custom-fruit" type="radio" value="bananas"> Bananas</label>
</div>

Comparing this code to that used for checkboxes, we notice two main differences:

• Change the type attribute from checkbox to radio
• With radio inputs, only one value is selected/submitted, so change the name attribute so that it is the same for all radio inputs in the group.

Everything else essentially is the same as it is for checkboxes.