Creating a Scrollable Terms and Conditions

March 24, 2022

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 providing 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 and Conditions” 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.

In the Form Builder, you can do this in two methods.

Using Short Scrollable Terms Widget

In the widgets section of the form builder, you will find the Short Scrollable Terms widget. Please see the below steps to configure this widget in the form.

  1. In Form Builder, click the Add Form Elements button.
  2. Go to the Widgets tab and search for the Short Scrollable Terms.
  3. Click or drag/drop the widget to your form.
  1. In the Widget Settings, you need to configure/add the following:
    • Checkbox Label. The label of the whole widget.
    • Content. This is your actual scrollable terms and conditions.
    • Must Read all the Text. Check this option if you want users to read all the texts first before they can check the Checkbox.
    • Send Content. If you want the terms to be added/included in both the notification and autoresponder emails of the form.

Using the Paragraph Element

If you do not want any additional script running in the form’s background, you can also use the Paragraph element and inject custom CSS codes to create the scrollbar.

  1. In the Form Builder, click the Add Form Element button.
  2. Under the Basic Tab, add the Paragraph element.
  3. Add/paste your Terms and Condition in it. You can format the texts using the available formatting tools in the editor.
  1. Open the source codes editor of the Paragraph element by clicking the Source Code icon.
  1. Wrap the entire content with the following div class. Click the Ok button to save the changes.
<div class="termsx">
</div>
  1. Lastly, inject the following custom CSS Codes in the form. Click the following link to know how to inject the codes.
.termsx {
  overflow-y: scroll;
  height: 350px;
  width: 100%;
  border: 1px solid #ddd;
  padding: 10px;

}
  1. You should automatically see the changes in the Paragraph element. Alternatively, you can add the Terms & Conditions widget to have a checkbox for the confirmation.

Here’s an example form: https://www.jotform.com/220823470887058.

Do you have any questions, suggestions, or feedback? Please send them as a comment below. You can also reach us by creating a support ticket.

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: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

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

Comments:

  • Carvill
  • vimo0915
  • Tablets_tablets
  • SheritaGreen456
  • Ramon
  • sonia
  • jannah_santos
  • ddyoyo10
  • sanjayews
  • ecem
  • ecem
  • Matthew
  • moizuddin
  • okostov
  • dkktan
  • justcuts
  • Arjun MGK
  • sd@pmgincmusic.com
  • sittercritter
  • mostaphatangerino