Creating a Scrollable Terms and Conditions

October 15, 2021

UPDATE: We now have these cool widgets that achieve the same thing. Try them out as easier alternatives:

1. Short Scrollable Terms Widget

2. Terms & Conditions Widget

Most (if not all) web forms gather sensitive user data. As a website/business owner, you want people who submit your forms to accept your terms before they provide their information. You should never enter into an agreement with a user unless both parties fully understand the stipulations, or you at least make your best effort to provide that information.

Oftentimes, a link to the “Terms of Agreement” would suffice, but a fastidious business owner will want to display the actual terms on the form. To do this, you will need to implement a non-editable text that the user can scroll through to read your terms. Here’s how:

1. Add a TEXT FIELD to your form.

2. Click the TEXT FIELD to highlight it then click the EDIT TEXT icon.

3. Click SOURCE CODE icon.

4. Add your terms and agreement text as indicated in the image below. You need to enclose it in a div wrapper with a CSS class name. In our example, we used class=”termsx”

5. Lastly, inject these CSS codes to your Form Builder to make the TEXT FIELD scrollable. You can adjust the values upon your discretion (e.g. you can change the height or width).

.termsx {

  overflow-y: scroll;

  height: 300px;

  width: 100%;

  border: 1px solid #DDD;

  padding: 10px;


Related guide: How-to-Inject-Custom-CSS-Codes

Here’s an example form:

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum:

Contact Jotform Support:

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.