User Guide

 

Creating a Scrollable Terms and Conditions

Creating a Scrollable Terms and Conditions

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

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

Send Comment

9 Comments...

  • jannah_santos

    I created a sign-up form and after added all the boxes and textbox. There is a submit button. Then I tried to click the submit button and how can I add a terms and conditions pop-up to a form that I created?

  • ddyoyo10

    it works. thank you

  • okostov

    can i and how to change text color because i have dark background.i need white text.
    i do that in css?

  • dkktan

    Hi,

    How do I inject the CSS code? Where do I insert it?

    #termsx {

    overflow-y: scroll;

    height: 300px;

    width: 100%;

    border: 1px solid #DDD;

    padding: 10px;

    }

  • justcuts

    This isn't working for me on this page: https://justcutslawnservice.com/start-service/

    It works in the preview within my account but not on the public page. Does it have something to do with it being a secure page HTTPS?

  • Arjun MGK

    What happen my account why i can't sign in my account ?

  • sd@pmgincmusic.com

    for some reason the code step is the only image that doesn't show. Can you repost the HTML coding to enter?

  • sittercritter

    And the submit button would read I AGREE...?

    So this can be used for contracts too? You put the term in the form, and the empty fields are for signatures and dates?

    Can you add fields for boxes where signatories add their initials next to terms you want to verify they've read and understood?

    I think I need to see a picture of these steps right on the form. can you help?

  • mostaphatangerino

    Re: How to Insert a Non-editable Text Area (For Terms of Use, Etc.)