How do I change the background Color and add a border I tried to use the example from you guys with out success! Please Help!

Hi there. You need to know a little CSS.

Here's the steps I used:

1. Manage forms > Select desired form
2. Properties
3. CSS & Javascript
4. In the CSS box, type the opening and closing tags <style type="text/css"> </style>
5. In between those tags, put your CSS for the table. Here is an example you can use (I copied this from the CSS file on another site):

table {
border-collapse: collapse;
margin: 1em 0;
font-size: 1.1em;
width:370px;
}

table td {
padding: 5px;
background: #C3D2E5;
}


table tr td p {
font-size: 1em;
}

6. From there you can edit the CSS until you get the desired effect. If you're not sure what CSS code to use, then do a Google search.

7. To change other elements in the form - go to Form Layout
8. You modify the CSS of any given class - for example I took this from my form: <div class="componentheading">{global:formtitle}</div>
9. In this example, the class for the form title is "componentheading". To change the CSS of this you could use code something like this:


.componentheading {
font-size: 1.5em;
color: #095197;
}

Make sure you put this code between the opening and closing tags <style type="text/css"> </style>.

10. Here is what my complete code looks like:

<style type="text/css">

.componentheading {
font-size: 1.5em;
color: #095197;
}

table {
border-collapse: collapse;
margin: 1em 0;
font-size: 1.1em;
width:370px;
}

table td {
padding: 5px;
background: #C3D2E5;
}

table tr td p {
font-size: 1em;
}


</style>

STYLING OF INDIVIDUAL FIELDS

If you want to style individual fields in your form, you need to do it in the Attributes tab > Additional Attributes of the relevant field. You start with the following:

style=

and then put whatever follows that in brackets - here is an example:

style="width:190px; background:red"

This will make the field box 190 pixels wide and the background red.


Best wishes!