Adding a Terms of Service Checkbox

Would you like to require that users read and agree to your Terms of Service or Disclaimer before they are allowed to submit a form?

This tutorial will share two easy ways to create a required agreement checkbox.


Adding a Terms of Service Checkbox

To get started, you’ll need to either create a new form or edit an existing form.

Once the form builder is open and you’ve added the fields you’d like, we’ll add a Checkboxes field.

Add checkboxes to form

By default, this field will display three checkbox options. We only want one checkbox choice in our form, so we’ll remove the other two by clicking on the Checkboxes field to open the Field Options screen. Then we just need to click the minus buttons (-) to the right of each choice we want to remove.

Remove checkboxes

We also want to hide the Checkboxes field label. To do this, click on the Advanced tab and select the Hide Label option.

Hide label for checkboxes field

Next, we want to add descriptive text to our one checkbox option. For this example, we’ll use the text “I have read and agree to the Terms of Service”.

add-text-to-choices-label

We’ll also mark this field as Required to ensure our users must check this box before proceeding.

Make checkboxes field as required

Next, we’ll go over two different ways to add text to your Terms of Service.

The first option will create text that, when clicked, downloads a Terms of Service document. The second option will show you how to add your terms/disclaimer text directly to the form (no download needed), with special text formatting.

Now that we’ve got our checkbox and text ready to go, we need a document to link our text to. Either save and exit your form or open a new tab to go to your WordPress dashboard. Click on Media » Add New to upload your Terms of Service file to your WordPress Media Library.

If you either upload a new document or click on media you already uploaded, you’ll see a field for that item’s URL.

Find URL for image in WordPress Media Library

You’ll need to copy this URL and return to your form builder.

To create a link to this document, you’ll need to modify your choices text to include some basic HTML. For our example, we will only link the words “Terms of Service”:

I have read and agree to the <a href="https://wpforms.com/wp-content/uploads/2021/07/Terms-of-Service.pdf">Terms of Service</a>

Be sure to add this HTML directly to the choices text field.

add-html-to-choices-text

Most browsers will, by default, open this link in the same browser tab where the user is filling out our form. To force our Terms of Service document to open in a new browser tab or window, we’ll add target="_blank" inside of our a tag.

Here’s how our final HTML will look:

I have read and agree to the <a href="https://wpforms.com/wp-content/uploads/2021/07/Terms-of-Service.pdf" target="_blank">Terms of Service</a>

If you check out the form preview on the right side of the builder, or embed your form and look at it on the frontend, you’ll notice that any text between the HTML tags will be seen as linked text.

Sign up form with terms of service

Next, let’s take a look at how to add your Terms of Service text directly to the form, rather than linking to a separate document.

Adding Terms of Service Text Directly to a Form

For this option, we’ll start by changing the checkbox text to “I have read and agree to the terms of service listed below.”

add-text-to-choices-label

Then, you can add your terms or disclaimer text to the Description area. The Description area accepts regular text as well as HTML.

Terms of Service description text

Once the description text is ready, we can add special formatting. To do this, you’ll need to open the Advanced section. Then you can select the option labeled Enable Disclaimer / Terms of Service Display.

Enable disclaimer terms of service display

Once this option is checked, the description text will be placed into a specially formatted box with a vertical scroll bar.

Terms of Service frontend example

Note: For an interactive approach, check out our developer documentation on enabling a checkbox only after users have scrolled through the entire disclaimer text.

That’s it! We hope this tutorial helped you to require users to agree your Terms of Service document before submitting a form.

Next, would you like to customize your form notification emails? Be sure to check out our tutorial on setting up automatic form emails for all the details.