Shortcode: Terms and Conditions

Overview

The Terms and Conditions Popups extension registers a shortcode with WordPress ( tag: [pum_terms_box] ). The plugin uses the Popup Maker Shortcode user interface (UI) for easier shortcode editing and live previews in the Popup Editor.  Shortcode attributes can also be viewed directly on the Editor 'Text' tab to inspect, add, edit, or delete settings.

This article explains how to create and edit a terms and conditions popup starting with the Popup Editor shortcode button.

Article Contents


How to Add a Terms and Conditions Popup Shortcode in the Popup Editor

1)  From the WordPress Admin, open the Popup Editor
2)  Navigate to the Popup Maker shortcode button in the Editor menu. Select the button to display a menu of Popup Maker shortcode options.
3)  Select the 'Terms & Conditions Box' option.
4)  A popup option settings box labeled 'Terms & Conditions Box' will display in front of the Editor.  

[ Back to top ]


Set Plugin Shortcode Settings in the 'Terms & Conditions Box'

'General' option settings tab 

'Terms and Conditions Box' ( text field )  --  Plugin default: empty.  Enter content here that will display within the popup terms and conditions box.  This box accepts other shortcodes, images, text or HTML elements (except content wrapped in <script> tags). 

Shortcode attributes (visible from the editor 'Text' tab):
<!--The content for the Terms and Conditions Box should appear-->
<!--between the opening and closing shortcode tags-->
[pum_terms_box]{Terms and Conditions Box content}[/pum_terms_box]
	

[ Back to top ]

'Agree Text' (text field) -- Plugin default: 'I Agree'.  On the front-end, the 'Agree' label and checkbox appear side-by-side underneath the terms box. This option controls the text label that appears next to the 'Agree' checkbox.  This attribute is always enabled, and will return the default value if the text field is empty.

Shortcode attributes (visible from the editor 'Text' tab):
<!--The shortcode attribute for the 'Agree' checkbox appears-->
<!--in the opening shortcode tag-->
[pum_terms_box agree_text="I Agree"]{Terms and Conditions Box content}[/pum_terms_box]
	

'Checkbox Style' (option menu) -- Plugin default: 'Classic'. The 'Agree' checkbox appears underneath the terms box.  This menu option changes the style of the checkbox paired with the 'Agree' text label.

Shortcode attributes (visible from the editor 'Text' tab):
<!--The shortcode attribute for the 'Checkbox Style' checkbox appears-->
<!--in the opening shortcode tag.-->

<!--Plugin default value = "classic"-->
[pum_terms_box checkbox_style="classic | roundedOne | roundedTwo | squaredOne | squaredTwo | squaredThree | squaredFour" ]{Terms and Conditions Box content}[/pum_terms_box]

[ Back to top ]

 

'Force User to Read Terms' (checkbox) -- Plugin options: unchecked (plugin default) or checked. 

When checked, this option makes the 'agree' checkbox unusable until the site visitor reviews the entire set of terms.  A vertical scrollbar is automatically added to a terms box when the content exceeds the height of the box. Site visitors much scroll to the end of the content in the terms box to activate the 'agree' button.  

When this option is checked in the shortcode's 'Terms and Conditions Box', a 'Force to Read Notice' text field displays underneath.

Shortcode attributes (visible from the editor 'Text' tab):
<!--The shortcode attribute for the 'Force User to Read Terms' 
<!--checkbox appears in the opening shortcode tag-->

<!-- value = 'unchecked' (plugin default) --> 
no attribute displayed

<!-- value = 'checked' --> 
[pum_terms_box force_read]{Terms and Conditions Box content}
[/pum_terms_box]
	

'Force to Read Notice' ( text field ) -- Plugin default: 'You need to read to the bottom of these terms and conditions before you can continue.'  

On the front end, a custom message displays between the terms box above and the 'agree' checkbox below.  The field displays when the 'Force User to Read Terms' checkbox is checked.  

Shortcode attributes (visible from the editor 'Text' tab):

<!--The shortcode attribute for the 'Force to Read Notice' 
<!--text field appears in the opening shortcode tag-->

<!--Plugin default value is shown below.--> 
[pum_terms_box force_read_notice="You need to read to the bottom of these terms and conditions before you can continue."]
{Terms and Conditions Box content}[/pum_terms_box]
	

[ Back to top ]


'Options' option settings tab

'Height' -- Plugin default value: 300 pixels (px). 

Unit options: pixels (px); percent ( % ); em; rem.

Shortcode attributes (visible from the editor 'Text' tab):

<!--The shortcode attribute for the 'Height' option setting
<!--appears in the opening shortcode tag-->

<!--Plugin default value is the first value shown below.--> 
[pum_terms_box height="300px | {integer}% | <integer}em | 
<integer}rem"]
{Terms and Conditions Box content}[/pum_terms_box]
	

How to Edit the 'Terms & Conditions Box'

In the Popup Editor (Visual tab), move the cursor anywhere over the terms box and left click. A box with a narrow border will appear around the terms box indicating that the editor content is active. 

Select the pencil icon to edit the box content or settings. The 'Terms & Conditions Box' will appear in front of the Editor content. 

In the bottom right corner of the 'Terms & Conditions Box', select the 'Save' button to save changes to the shortcode.  

Select the 'Update' button to the right of the Editor to save changes to the popup.


How to Delete a 'Terms & Conditions Box'

In the Popup Editor (Visual tab) click the terms box to activate and display the 'edit / delete' option box. Select the 'X' icon to remove the terms box from the Editor. 

[ Back to top ]


Testing it Out: The Terms & Conditions Popups Extension in Action

How the popup appears in the Editor

How the Popup Appears on the Front End

The content in this popup is longer than the terms box. A site visitor would have to scroll to the end of the terms before the 'I Agree' button would activate. 

[ Back to top ]