Plugin Planet

Premium WordPress Plugins

This tutorial explains how to add a required checkbox to any USP Form. For example, this could be used to implement a toggle “Agree to Terms” checkbox or similar.

UPDATE! As of USP Pro version 2.3, the following tutorial no longer is necessary. Instead you can add an Agree to Terms box with a single click. For USP Pro versions less than 2.3, continue reading to set it up manually.

Step 1: Define the custom field

First, define a custom field for any USP Form using the following attributes:

data-required#true|type#checkbox|value#agree|placeholder#Terms and Conditions|label#I agree to the terms|class#usp-terms

Screenshot

Step 2: Add the code

To the USP Form, add the shortcode, style, and any text for the custom field:

<style>
	.usp-required { width: 220px; }
	.usp-terms { float: right; width: 20px; }
	.example-class-1 { float: right; width: 200px; }
	.fine-print { font-size: 11px; display: none; }
	.show-terms { cursor: pointer; font-size: 12px; padding-bottom: 5px; }
</style>

<script>
	jQuery(document).ready(function($){
		$('.show-terms').click(function(){
			$('.fine-print').toggle();
		});
	});
</script>

<div class="usp-required">
	[usp_custom_field form="2042" id="1"]
	<div class="show-terms">Show/hide terms</div>
</div>

<div class="fine-print">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis quam quis ullamcorper fermentum. Suspendisse potenti. Sed et justo id orci venenatis mattis. Sed quis odio ante. Maecenas iaculis mauris non accumsan porta. Maecenas ultrices nisi turpis, in vulputate nisi congue ac. Praesent eu enim vestibulum justo ultricies malesuada sit amet vel arcu. Mauris sem justo, aliquet id pharetra a, scelerisque eget elit. Vivamus at purus auctor lorem iaculis scelerisque. Mauris pretium lectus lorem, nec rhoncus nibh consectetur nec. Maecenas non sapien leo.</div>

Modify according to your needs. Note that you can (and should) move the CSS into your theme’s style.css (or other stylesheet), and also move the JavaScript to your theme’s JavaScript file.

After this step, view the form on the front end. Depending on your theme, it should look something like this. Note: I’ve updated this tutorial since the time the screenshots were taken, so don’t trip if they don’t match up exactly — it’s just to give you an idea of what’s going on.

Update: here is another screenshot showing the markup and Custom Field included in the form (the red arrows show how the Custom Field IDs match up).

Step 3: Define the error label

At this point, everything is complete and the required checkbox is working great. The only problem is that the error message says something generic when the user forgets to check the box. To fix this, we can define a custom error label for the custom checkbox field.

Visit Advanced > “Custom Field Names”, and locate the setting for the custom field you are using. In this example, it is #1, so I change the value for that custom field, as shown in this screenshot.

Step 4: Verify that it’s working

To verify that the checkbox field is working properly, try submitting the form with and without the field checked. When it is not checked, you should get an error message (see previous step). When it is checked, the checkbox data will be attached to the submitted post as a custom field. Here is a screenshot.