1. Home
  2. Snippets
  3. Create a disclaimer / terms of service agreement field

Create a disclaimer / terms of service agreement field

Heads up!

This article contains CSS code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

Dismiss

It’s common to ask your users to read and agree to a disclaimer or terms of service agreement. Using the Checkbox field along with few custom CSS rules, you can provide your users with a disclaimer they can scroll through. Below is a screenshot of what the disclaimer area will look like when using the code provided.

WPForms disclaimer styling

First, create a new Checkbox field. Set the field label to “Service Agreement”, “Terms of Service”, or whatever is applicable. If you do not want display the title to your users, after filling it out you can check the Hide Label option under the Advanced Settings for the field.

Then delete all checkbox choices except one and change the label to the desired text, such as “I have read and agree to the terms of service listed below.”. Make sure and mark the field as required, which will prevent the user from submitting the form until they agree to the disclaimer.

The last thing in the field settings is to place your disclaimer text inside the field description. This field accepts full HTML, so you will want to wrap your paragraphs in <p> tags. You can also include links if needed. Placeholder text is provided at the end of the article which can be used for testing, simply copy and paste it into the field description setting.

The final step is to add a few custom CSS rules which will style the field description as seen above; these rules are provided below. If you’re not familiar with what to do with these rules, WPBeginner has an excellent article on how to add CSS snippets to your site.

.wpforms-disclaimer .wpforms-field-description {
	border: 1px solid #ddd !important;
	padding: 15px 15px 0 !important;
	height: 100px !important;
	overflow: scroll !important;
}

.wpforms-disclaimer .wpforms-field-description p {
	margin-bottom: 15px !important;
	font-size: 12px !important;
	line-height: 18px !important;
}

Sample Disclaimer Text

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Ergo, inquit, tibi Q. Audio equidem philosophi vocem, Epicure, sed quid tibi dicendum sit oblitus es. Facillimum id quidem est, inquam. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. </p>
<p>Duo Reges: constructio interrete. Non quam nostram quidem, inquit Pomponius iocans; Paria sunt igitur. </p>
<p>Quo plebiscito decreta a senatu est consuli quaestio Cn. Summum enĂ­m bonum exposuit vacuitatem doloris; Quamquam in hac divisione rem ipsam prorsus probo, elegantiam desidero. De quibus cupio scire quid sentias. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Quid Zeno? Huius ego nunc auctoritatem sequens idem faciam. Quid censes in Latino fore? </p>
<p>Maximas vero virtutes iacere omnis necesse est voluptate dominante. Hic nihil fuit, quod quaereremus. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. </p>
<p>Sed quae tandem ista ratio est? At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Erit enim mecum, si tecum erit. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; </p>
Updated on January 12, 2017

Was this article helpful?