Overview #
The Terms & Conditions Popups extension registers the [pum_terms_box] shortcode with WordPress. This extension uses the Popup Maker Shortcode user interface (UI) for easier shortcode editing and live previews in the Popup Editor. You can see the shortcode attributes 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.
Note: We use Terms & Conditions and T&C interchangeably.
How to Add a Terms & Conditions Popup Shortcode in the Popup Editor #
Set Plugin Shortcode Settings in the Terms & Conditions Box #
General Settings #
Terms & Conditions Box: Enter content here that will display within the popup terms and conditions box. This field accepts shortcodes, images, text, and HTML elements (except content wrapped in <script> tags). The default is blank or no content.
Shortcode attributes (visible from the editor Text tab):
The content for the Terms & Conditions Box should appear between the opening and closing shortcode tags.
[pum_terms_box]{Terms & Conditions Box content}[/pum_terms_box]Agree Text: The default text is “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 on 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 & Conditions Box content}[/pum_terms_box]Checkbox Style: The default is Classic (see below). 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 (default is classic).
[pum_terms_box checkbox_style="classic | roundedOne | roundedTwo | squaredOne | squaredTwo | squaredThree | squaredFour" ]{Terms & Conditions Box content}[/pum_terms_box]Force User to Read Terms: The default is unchecked.
When you check this option, the Agree checkbox is unusable until someone reviews all of the terms content (i.e., scrolls all the way down). There will be a vertical scrollbar in the terms box when the content is higher than the height of the T&C Box. That means your visitors must scroll to the end of the content in the terms box to activate the Agree checkbox.
When this option is checked in the shortcode’s Terms & Conditions Box, a Force to Read Notice text field displays underneath.
Shortcode attributes (visible from the editor Text tab):
value = ‘unchecked’ (plugin default) no attribute displayed
value = ‘checked’
The shortcode attribute for the Force User to Read Terms checkbox appears in the opening shortcode tag.
[pum_terms_box force_read]{Terms & Conditions Box content}
[/pum_terms_box]Force to Read Notice: The default text is “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.
The default value is below.
[pum_terms_box force_read_notice="You need to read to the bottom of these terms and conditions before you can continue."]{Terms & Conditions Box content}[/pum_terms_box]Options Settings #
Height: The height of the Terms & Conditions Box. The default is 300 pixels (px). You can think of pixels as absolute, constant, or fixed. For example, 300 pixels high shows as 300 pixels high on your phone, tablet, desktop, and TV.
If you want a responsive height that changes based on the device, choose the following relative units:
- %: A percentage of the parent element. For example, 80% of a 1,000-pixel high parent div tag makes the T&C box 800 pixels.
- em: A factor of the parent element. For example, 0.75em of a 1,000-pixel high parent div tag gives you a 750-pixel high T&C box.
- rem: A factor of the root document. E.g., 0.5rem of a 2,000-pixel high window shows a 1,000-pixel high T&C BOX.
Shortcode attributes (visible from the editor Text tab):
The shortcode attribute for the Height option setting appears in the opening shortcode tag.
[pum_terms_box height="300px | {integer}% | <integer}em | <integer}rem"]{Terms & 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 container with a border will appear around the terms box, meaning that the terms’ content is active for editing.
Click the pencil icon to edit the box content or settings. The Terms & Conditions Box will appear in front of the Editor content.
When you’re done editing the Terms & Conditions Box, click Save to save your changes to the shortcode.
Click Update 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 #
In this example, the content in this popup is actually taller than the terms box’s height. So the I Agree checkbox is “grayed out” and not clickable.
When the height of the content is larger than the height of the T&C box inside the popup, you’ll need to scroll to the end of the terms before you can click I Agree.
