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.
There are two ways to create a scrollable “Terms and Conditions” document in the Form Builder.
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 add this widget to your form.
- In Form Builder, click the Add Form Elements button.
- Go to the Widgets tab and search for the Short Scrollable Terms.
- Click or drag/drop the widget to your form.
- In the Widget Settings, you need to 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.
- In the Form Builder, click the Add Form Element button.
- Under the Basic Tab, add the Paragraph element.
- Add or paste your Terms and Conditions in it. You can format the text using the available formatting tools in the editor.
- Open the source codes editor of the Paragraph element by clicking the Source Code icon.
- Wrap the entire content with the following div class. Click the Ok button to save the changes.
- Lastly, inject the following custom CSS Codes in the form. If you’re unsure, check out how to inject the codes.
border: 1px solid #ddd;
- 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.