Creating a scrollable Terms & Conditions

Last Update: March 3, 2017

This might not work due to recent security updates.

However, we have form widgets that will help you with the very same thing, please try our Terms and Conditions widgets as alternatives:

1. http://widgets.jotform.com/widget/scroll_terms

2. http://widgets.jotform.com/widget/terms__conditions




Most (if not all) web forms gather sensitive user data. As a website/business owner, you will want people who submit your forms to accept your terms before supplying you with 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 of the form. 

To do this, you will need to implement a non-editable text that the user can scroll through to read your terms.

JotForm V4:

1)  Insert a Text tool in your form. This can be found under the Form Tools section.

2) Click the Text field and then Edit Text:

3) Click Source code icon:

4) Add your terms and agreement text afterward as indicated in the image below.

5)  Lastly, inject this CSS code to your Custom CSS field to make the terms and agreement scrollable. You can adjust the values in this CSS code according to your preference.

#termsx {

overflow-y: scroll;

height: 300px;

width: 100%;

border: 1px solid #DDD;

padding: 10px;

}

JotForm V3:

1) Insert a Text field in your form from the Basic Fields toolbar:

2) Click the Text field and then Edit Text:

3) Click Source code icon:

4) Add your terms and agreement text afterward as indicated in the image below.

5) Lastly, inject this CSS code to your Custom CSS field to make the terms and agreement scrollable. You can adjust the values in this CSS code according to your preference.

#termsx {

overflow-y: scroll;

height: 300px;

width: 100%;

border: 1px solid #DDD;

padding: 10px;

}

Example output form: http://form.jotformpro.com/form/40357772071959?


Questions? Please let us know below!


8 Comments...


   
mostaphatangerino (June 02, 2012 at 10:19 AM)

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

View Answer


   
sittercritter (February 22, 2013 at 12:09 AM)

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?

View Answer


   
sd@pmgincmusic.com (September 25, 2013 at 02:01 AM)

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

View Answer


   
Arjun MGK (March 18, 2014 at 05:25 PM)

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

View Answer


   
justcuts (March 30, 2014 at 05:03 PM)

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?

View Answer


   
dkktan (May 19, 2014 at 01:20 AM)

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;

}

View Answer


   
okostov (July 05, 2014 at 02:33 PM)

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

View Answer


   
ddyoyo10 (January 22, 2017 at 05:59 AM)

it works. thank you


Send Comment