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
- Set Plugin Shortcode Settings in the 'Terms & Conditions Box'
How to Add a Terms and Conditions Popup Shortcode in the Popup Editor
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).
<!--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]
'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.
<!--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.
<!--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]
'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.
<!--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]
'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.
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.