Documentation, Reference Materials and Tutorials for WPForms
Would you like to require that users read and agree to your Terms of Service before they are allowed to submit a form?
In this tutorial, we will create a required checkbox with text that, when clicked, downloads a Terms of Service document.
Create a Form and Add Required Checkbox
To get started, you’ll need to have WPForms installed and activated.
You’ll also need to either create a new form or edit an existing form.
Now that you’ve gotten some basics set up for your form, we’ll add a Checkboxes field.
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.
We also want to hide the Checkboxes field label. To do this, click Advanced Options and check the Hide Label checkbox.
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”.
We’ll also mark this field as Required to ensure our users must check this box before proceeding.
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.
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 checkbox text to include some basic HTML. A basic HTML link looks like this:
<a href="http://example.com">My linked text.</a>
For our example, we will only link the words “Terms of Service”:
I have read and agree to the <a href="http://example.com/wp-content/uploads/2017/03/Terms.pdf">Terms of Service</a>
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="http://example.com/wp-content/uploads/2017/03/placeholder.png" 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 front end, you’ll notice that any text between the HTML tags will be seen as linked text.
That’s it! We hope this tutorial helped you to require users to agree to a linked Terms of Service document before submitting a form.
Not quite what you were looking for? We also have a post on how to publish a service agreement that users must sign.