CSS Styling is a great tool for giving your form a distinctive look and more complex formatting. You can set an element’s background color, change the size of the description font or change the margins to create a visible hierarchy on your form. If you are not familiar with this web language, essentially it takes your plain vanilla web elements and modifies their coloring, size and position. There are literally hundreds of possible CSS properties, but the styling in Ecollect is restricted to the individual elements (<div> tags), and some properties are incompatible with Ecollect’s functionality.

 

In order to take advantage of this feature, start with the form property 'Custom Styling (CSS)’. This is a large text box where you can place Cascading Style Sheets (CSS) class definitions. These classes are then called within the Custom Class (CSS) property of each element.


Below are some basic properties that will work, and you can feel free to experiment with others.

 

Background Color

For the first example we will change the background color of an element. Our CSS class will be called ‘yellow-background’, and it will turn the element’s background yellow. 

 

This is what you would enter into the form’s Custom Styling (CSS) box:

.yellow-background { background-color: yellow;}

Notice the period before the class name. This is important and signifies that this is a class definition. 

 

Now you can select the element (a single line text for example) and enter the following in it’s Custom Class (CSS) box:

yellow-background

Notice there’s no period; we just use the class name.

 

Note for multiple-choice element - This will not apply the background color to the choices. To do this, add this extra definition after the standard one:

.yellow-background span { background-color: yellow;}


Font Size

Custom Styling (CSS) box:

big-title { font-size: 60px;}

Custom Class (CSS) box:

big-title

 

Font Color

Custom Styling (CSS) box:

.white-font { color: white;}

Custom Class (CSS) box:

white-font

 

Left Margin

Custom Styling (CSS) box:

.margin-15 { margin-left: 15%;}

Custom Class (CSS) box:

margin-15


Putting it all together

Finally, what if you wanted your class to encompass more than one of these properties? It might look something like this:

.my-class {
font-size: 60px;
background-color: orange;
color: white;
}

You can also define multiple classes (just start each on a new line to keep them readable), but you should only use one class on any particular element.

.margin-10 {margin-left: 10%;}
.margin-20 {margin-left: 20%;}