---
title: "Shortcode: Terms & Conditions Box"
description: "## 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…"
url: "https://wppopupmaker.com/docs/terms-conditions-popups/shortcode-terms-and-conditions/"
updated: "2025-02-03"
category: "Extensions / Terms & Conditions Popups"
---

# Shortcode: Terms & Conditions Box

## 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

![file JBlL8AdFS6](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b20057e0428632c466ace02/file-JBlL8AdFS6.png)

  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.  

---

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

![file BuQRshmE2m](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b200ab20428632c466ace48/file-BuQRshmE2m.png)

### 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.

![file DtVN1bPaoX](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/55cd75dde4b01fdb81eb36a5/file-DtVN1bPaoX.png)

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

![file ptNKmEz7lA](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b201bb60428632c466aced3/file-ptNKmEz7lA.png)

**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}% | &lt;integer}em | &lt;integer}rem"]{Terms & Conditions Box content}[/pum_terms_box]
```

  **Related article:  ** [Terms & Conditions Popups: Triggers & Cookies](https://wppopupmaker.com/docs/terms-conditions-popups/terms-and-conditions-popups-triggers-cookies/)

---

## 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. 

![file EHmse4NS3r](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b203c9f2c7d3a0fa9a2e968/file-EHmse4NS3r.png)

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

![file SMdFZFLEnQ](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b203b910428632c466ad05f/file-SMdFZFLEnQ.png)

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

![file UVe5NCIIrE](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b203c2b2c7d3a0fa9a2e962/file-UVe5NCIIrE.png)

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

![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b203db20428632c466ad072/file-l5OdCZHv9x.png)

### How the Popup Appears on the Front End

![file CdqttUtCnf](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/5b203e0f2c7d3a0fa9a2e976/file-CdqttUtCnf.png)

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**.