Adding Scrollable Text to Your Form

Written by Formstack on April 18, 2011

Posted in Form Hacks

Sometimes you want to add several paragraphs of text to a form, such as terms and conditions, but you don’t want it to take up an entire page.  To do this, you can create a scrollable div on your form.  This requires a little bit of code, but is quite simple to implement.

First, you will need to add a description area field to your form and click on the option that says “use plain text editor”.  The plain text editor allows you to enter HTML into your form.

scrollable1
After that, you’re going to want to paste in this code:

<div style="border: 1px solid #666666; background-color: #cccccc; padding: 8px; width: 600px; height: 50px; overflow: auto;">
Insert your terms and conditions text here.
</div>

You can, of course, change the border style, border colors, background colors, padding, width, height, etc. to suit your needs.

scrollable2
You then want to save your field.  It will look something like this in the form builder:

scrollable3
Here’s what the actual form will look like: