Below are examples of how you can edit the form.css file to customize your own themes. Some are simple and require very limited knowledge of CSS; others are slightly more complex and require more experience with CSS including the ability to make inferences based on the structure and markup of the form XHTML document. Note also that the form.css file includes comments to point you in the right direction.

On this page:

Changing Your Form’s Background Color

This is an example of a simple change that requires little or no knowledge of CSS.  About halfway down the form.css page for the professional blue theme you’ll see the following. 

/*************************************************                
                     FORM 
**************************************************/ 
/* See container.css for background color of the surrounding container(s) */ 
#page-form #container, 
#page-form #center, 
#form-container { 
        background-color: #eeffff;

To change the form’s background color, overlay #eeffff (the hexadecimal equivalent for light turquoise) with any allowed CSS color string or its hexadecimal equivalent. So, for example, if you make the simple change below, you now have a “professional green” theme! 

background-color: green;

If you're using the Share options Link (Email/Web page), Embedded Form or Full Page Popup and the form Url parameter &container=true then you will also need to edit container.css. Look for background-color in two places in that css file:

#frevvo-form-container #frevvo-form-header, #frevvo-form-container #frevvo-form-cell, #frevvo-form-container #frevvo-form { /* background-image: url(images/blue.jpg); background-repeat: repeat; */ background-color: green; } .frevvo-form-container td, #frevvo-form-container td { background-color: green; }

These two additional css background-color changes will ensure that the entire container not just the form area is filled with your new color.

Panel Background Color

This example changes the background color of all the controls inside a panel to lightblue.

.f-panel.Coloryellow {  
        background-color: lightblue;
}

Panel Floating

Multi-column layouts can cause styling issue if the column content is unbalanced. In the example below, the top left panel 28 contains more controls then the top right panel 30. This causes panel 32 to float out of position. You can solve this by adding the f-newline css class to panel 32. This forces panel 32 to start on a new line. See the screen image on the right.

 

Another possible solution is to add an extra panel into the form above panel 32 and set that new panel's width to 100%. Then drag/drop panels 32, 33 and 34 into the new 100% width panel. It is better to avoid extra panels when possible as they do add a slight bit of extra html to your form. If your form contains 100s of controls and extra unnecessary panels it can effect performance. So good to avoid extra panels and controls when possible. 

Replacing Icons

Forms include standard icons for collapsible and expandable sections, a control’s Help property, and so on. You can replace these standard icons with your own. In this example, we will replace the icon that displays when you set a control’s Help property.   Here is the relevant portion of the professional-blue theme’s form.css file:

/********** HELP ICON  
* We must hide the inner span and do an image replacement.  
*/ 
.f-form .f-help { 
cursor:pointer; 
background: url(/frevvo/images/icons/help.gif) top left no-repeat; }

Instead of using the help.gif icon, we want to use a different image called coolhelpicon.png, so we make the following change:  

.f-form .f-help { 
cursor:pointer; 
background: url(./images/coolhelpicon.png) top left no-repeat 

Removing the Print Icon Toolbar

You can hide the Print icon that appears at the top of your forms by unchecking a form's Printable property. However, the space at the top of the form is still unavailable even when the icon is hidden. If you want to use that space at the top of the form, you can edit the theme's form.css file to remove the toolbar from the top of the form.

If you have many forms that do not use the Print icon, you can create a custom theme for them that has the toolbar removed.

• In the theme's form.css, find the Toolbar entry (at approximately line 91), and uncomment the line display: none. This prevents the toolbar from being part of the form.

/* Toolbar with print icon. Uncomment below to hide. You can also hide this in the form properties. */
.f-form-tb { 
        /* display: none; */ 
}

Adjusting Message Control Line Spacing

Message controls let you display static text on you form. This example shows you how to adjust the line spacing—for instance if your forms include multi-line static text that does not align with the text on your web pages as well as you’d like.

The professional-blue theme does not specify a line height for the message control, so we must add the code snippet below to the form.css file. We want the line height to be 1.1em, which is slightly smaller than the default line-height of 1.6em.  

.f-message, .f-output, .Message { 
line-height: 1.1em; 
} 

This example illustrates that you may use any valid CSS property; you are not limited to those explicitly specified in the form.css page you downloaded.  Note also that to make a change such as this, you’d need to inspect the mark-up and deduce that  uses the .f-message class for message controls.

Changing the Default Color of Labels

In the Forms Designer you can change the default label color for a particular form by modifying the form’s Font Color property. We’ve included this example here because you might want your customized theme to handle this automatically, so you don’t have to change the form’s Font Color property each time you create a form.

The relevant portion of the form.css file is shown below—as you can see,  uses the .f-form class for label colors, and the professional blue theme uses black font.

.f-form {  
        color: black;  
        border: none; 
} 

If you want blue text on your labels instead, simply replace black with blue as shown below. 

.f-form {
        color: blue;  
        border: none;  
} 

Displaying Radio and Checkbox Options Horizontally

This styling can be done on a control by control basis by editing the control's Style properties and setting Item Width to 30%, for example. You would make this change in a theme typically only if you wish all radio controls to be horizontal.

This example shows you how to display radio button and checkbox options horizontally instead of vertically. This works best for Yes/No radio controls or other controls with a relatively small number of choices. We also will illustrate how to target one specific control, since your form could have many radio buttons, including some for which it does not makes sense to display the options horizontally.

For starters, here’s how to make options horizontal for all radio and checkbox controls.

.l-control-vertical .f-select-item 
{ 
clear:none; 
}

However, with this change the options still come underneath the label as shown above.  We need to add the following code to the form.css file so the options will be positioned on the same line as the label:

.f-select1 fieldset, 
.f-select fieldset  
{      
    clear:none;      
    padding:0;         
}

If there are several radio or checkbox controls on our form and we only want certain ones to be horizontal, we can add a CSS Class property to the control options we want displayed horizontally.  We'll call the property “horizontalSelect” and edit the control's CSS Class property in the Forms Designer as shown below.

And finally, we add the following code to our custom theme:

.l-control-vertical .horizontalSelect .f-select-item 
{ 
clear:none; 
}
.horizontalSelect  fieldset,.horizontalSelect fieldset      
{      
    clear:none;      
    padding:0;         
} 

This lets us display the option horizontally for our Colors checkbox and Size radio control while leaving the options vertical for the remaining controls.

Adding a Scroll Box to Checkbox Controls

If your form has a checkbox control with multiple options, you can add a scroll box to it so that it takes up less space on the form. Create a custom theme (ScrollBox for example), and add the lines shown below to it to define a scrollbox.

Add these lines to the form.css file to define a scrollbox.

<pre> /****** SCROLL BOX */ 
.l-control-vertical .scrollbox.f-select {    
   background-color: #CCCCFF;    
   height: 100px;    
   width: 450px;    
   overflow: auto;    
   border: 1px solid blue; 
} 

• Save the form.css file, and rezip the theme files (as ScrollBox.zip for example).
• Upload the ScrollBox.zip custom theme.
• Edit the form, and set the form's Style > Theme property to ScrollBox.
• Select the checkbox control you want to add the scrollbox to, and set it's CSS Class property to scrollbox.

Setting Control Width

By default when you drag in most controls from the palette they take up a certain amount of your form’s width based on your theme--for the professional blue theme, the default is 50%. In this example, we’ll show you how to change this default width to a different value.

Let’s say we want to adjust this for text area controls only, and we want the default width to be 90%.  We simply add this code snippet to the form.css file:

.l-width-regular .f-textarea textarea { 
width:90% 
}

Perhaps instead we want to adjust the width for all  input controls—these include text controls, phone controls, number controls and more.  We’d add this code:

.l-width-regular .f-input input { 
width:90% 
} 

To adjust the width for one particular type of input control—phone controls, for example, we’d do this:

.l-width-regular .Phone input {
width:90% 
}

You can apply this type of change to any other controls as well—sections (f-section), tab groups (f-switch), and so on.

Hiding icon on Date Controls

In this example we want the form to display the date picker icon only when a Date control is enabled for edit. If it is disabled we want the date picker icon to be hidden.

/* Hide Calendar icon when date control is disabled */ 
.Date.s-disabled .f-calendar {
        visibility:hidden; 
} 

Hiding Tabs and Borders in Print View

This example hides tab labels and the tab borders when printing a form.

/******** Hide Tab in Print View ******/ 
/* Tab label */ 
.s-print .h-switch .h-case .f-label { 
        display:none; 
} 
/* The entire tab group contents */ 
.s-print .c-switch { 
        border: none; 
} 
/* A tab header */ 
.s-print .f-switch .h-case { 
        border: none; 
}

Disable Expanded/Collapses

In this example we want to disable the expand/collapse functionality on section controls.

/* Do not allow Sections to be collapsed */ 
.s-expanded .f-expand {
        display:none !important;
} 

Reduce White Space Between Controls

In this example we want to reduce the amount of blank white space between controls. We have added our own css class called .hma-horizontal. This will allow you to reduce white space around specific controls. To use this customization add the css class .hma-horizontal to the css class property for each control where you want to reduce space.

.hma-horizontal .f-input, 
.hma-horizontal .f-output, 
.hma-horizontal .f-textarea, 
.hma-horizontal .f-select, 
.hma-horizontal .f-select1, 
.hma-horizontal .f-upload, 
.hma-horizontal .f-trigger {     
    padding:1px 1px 1px 9px;  /* Reduce space above/below the controls */ 
} 

If you want to reduce white space around every control in your form then do not add a custom class as shown in this example. The css class .l-control-vertical is a standard  css class name:

.l-control-vertical .f-input, 
.l-control-vertical .f-output, 
.l-control-vertical .f-textarea, 
.l-control-vertical .f-select, 
.l-control-vertical .f-select1, 
.l-control-vertical .f-upload, 
.l-control-vertical .f-trigger {     
    padding:1px 1px 1px 9px;  /* Reduce space above/below the controls */ 
} 

Locale Specific

Custom styling can be applied based on the currently selected locale. See multi language support for details on translating your form into different languages. When the form opens in the browser it will have a locale specific css class set based on the the &locale= parameter set on the form's Url.

No specific css classes are needed to customize the default locale. However each specific non-default locale will set the css class s-locale-${locale}. For example for the Spanish locale .s-locale-spa.

The css below will cause the form to have a background-color:#fff and font color:maroon for the default locale. That is when &locale= blank on the form's Url. However if &locale=spa is set on the form Url then background-color:red and font color:gold.

/*************************************************  
                      FORM **************************************************/ 
#page-form #container, 
#page-form #center, 
#form-container {  
        background-color: #fff; 
/*  
        background-image: url(images/blue.jpg);  
        background-repeat: repeat; 
*/ 
}
.f-form {
        color: maroon;  
        border: 1px solid #dfdfdf;  
}
/**** Spanish Locale Theme *****/ 
#form-container.s-locale-spa {
        background-color: red;
}

.s-locale-spa .f-form {  
        color: gold;  
        border: 1px solid #dfdfdf;  
}

/**** END Spanish Locale Theme ****/

PDF

Print view styling affects the pdf files (or other image types) generated when the form is submitted (ex: Pdf attached to an emailed submission)  or the  icon is clicked.  See Print View for details.

Print View

You can style your form's print view. This enables you to have one look & feel in use mode and a different look & feel in print mode. Print view styling affects both the pdf (or other image types) generated when the form is submitted (ex: Pdf attached to an emailed submission) as well as the print view for the pdf file generated and downloaded by clicking on the form's printer icon.

Here are examples of several common customizations to the default Clear theme's print view. The image below shows the form as it looks in use mode.

This image shows how the 1st tab of the form looks with the default Clear theme in print mode when the printer icon was clicked. The form print view will be the same when the pdf (tiff, etc..) print image is generated upon submission.

One common requirement is to display only the selected radio and checkbox options. This css hides all unselected options.

/** Only print selected checkbox/radio options **/ 
.s-print .f-select-item {     
    display:none; 
} 
.s-print .f-select-item.s-selected {     
    display:inline; 
} 

By adding this css you will also remove all checkbox and radio option icons. Only the selected option's labels are printed.

/** Remove checkbox/radio icons - Only show option label text **/ 
.s-print .f-select-item.s-selected div {
    display:none; 
}

Add this css to hide borders around input control values.

/** Hide control borders and background. **/ 
.s-print .f-input input, 
.s-print .f-textarea textarea, 
.s-print .f-select1 select, 
.s-print .f-input .input, 
.s-print .f-textarea .textarea, 
.s-print .f-select1 .select {
    border-width:0;
    background:none; 
}

Add this css to change label colors to blue. Value font color defaults to black. However the extra css is needed to set checkbox and radio option labels to black as well. By default option labels use the same font color as control labels.

/** Set label color **/ 
#form-container.s-print label {
    color: blue;
 } 

Add this css to remove the date picker from date controls and the help icon from all controls with help text.

/** Remove date picker icon **/ 
.s-print .Date .f-calendar {
    background-image: none !important; 
}
/** Remove help icon **/ 
.s-print .f-form .f-help {     
    background-image: none !important; 
}  

Add this css if your form contains the tab control and you want to hide the tab labels and border from the print view.

/** Hide Tab in Print View **/ 
/* Tab label */ 
.s-print .h-switch .h-case .f-label {
        display:none; 
} /* The entire tab group contents */ 
.s-print .c-switch {  
        border: none;  
        padding: 0px; 
} 
/* A tab header */
.s-print .f-switch .h-case {    
        border: none; 
} /* Tab */ 
.s-print .h-switch {  
        display:none; 
} 

Centering Pages

By default Print View is centered on a printed page. The following floats left

body.print #threecolumn {  
        margin:0;  
        float:left; }

Paper Format

By default the paper format is 8.5 x 11. The page size can be configured using the page size property from CSS3 (this CSS3 support related to exporting to PDF and not the browser or printing from browser and it is only applicable to a limited set of properties such as size) in a custom theme. For more information look here:  http://www.w3.org/TR/css3-page/#page-size.

For instance, the following will generate pages in landscape mode:
@page {    
    size: A4 landscape; 
}
Or setting a different page size:

@page {    
    size: legal; 
}

Or setting a custom size:
@page {    
    size: 8.5in 12in; 
} 

Multi-Line Options

Radio and Checkbox control option labels can be only one line using the default Clear and Professional Blue themes. This is in order to keep these controls the same height as the other input controls to prevent alignment issues. Sometimes you do need an option labels that span multiple lines. The css class "multilineopt" does this. This is how your form will look prior to having the custom theme:

Even using this theme you may need to adjust the option width manually in some cases if the option label moves to the line below the option checkbox or radio button. However width:90% as shown below is good in most cases.

/** Support options that span multiple lines **/ 
.l-control-vertical .Checkbox.multilineopt .f-select-item, 
.l-control-vertical .Radio.multilineopt .f-select-item  { height:auto !important; 
} 
.l-control-vertical .Checkbox.multilineopt .f-select-item label, 
.l-control-vertical .Radio.multilineopt .f-select-item label  { 
width: 90%; 
} 

This is how the form looks with the custom theme. You must set the control's css class in the designer to "multilineopt".

Required Controls

 default behavior is to display a red asterisk next to required controls that are missing values and to change the font color of section and tab controls labels to red if either contain a required control missing values.

Here is one example customization that changes the background color of textarea controls.

/********** REQUIRED   
 * Required TextArea background color change   
*/ 
.s-invalid textarea {  
        background:  #FFD0C0 url(/frevvo/images/fieldtopimage.gif) repeat-x scroll center top !important; }

Repeats

Sometimes you may want the functionality of a repeat control but not want to display the +/- icons. One use case is when you want to initialize form from a database and the data repeats (ie. multiple rows may be returned from the database to your form). If you want to display the repeating data but do not want to let the user delete or add items then you can add this css to your theme:

.f-form .f-add.s-add, .f-form .f-remove.s-remove {     
    display: none; 
}

 If you want this to apply to only certain repeat controls in your form then use the form designer to set a custom cssclass property on the repeat control. For example if you used "HideRepeatIcons" in the repeat control's cssclass then add the following to your custom theme:

.f-form .HideRepeatIcons .f-add.s-add, .f-form .HideRepeatIcons .f-remove.s-remove {     
    display: none; 
}

Comment Per Checkbox

Sometimes you require a separate comment input for each selected checkbox. This theme changes the required indicator from a red asterisk to a red left-hand bar and only displays the comment if the associated checkbox is selected. Otherwise the comment input remains hidden and not required. The latter behavior is created via a custom rule shown in Many Checkbox Comments rule sample. Download a working sample form here. Note that the CompactCommentsSample.zip must be extracted and contains both the form and the completed theme. You can also Try this form now.

/** Change required indicator from asterisk to bar **/
.f-form .compact .f-required {
   display:none;
}
.compact.s-invalid {
	border-left: 3px solid red;
}

/** reduce white space so comment input aligns with checkboxes **/
.l-control-vertical .compact.f-input,
.l-control-vertical .compact.f-output,
.l-control-vertical .compact.f-textarea,
.l-control-vertical .compact.f-select,
.l-control-vertical .compact.f-select1,
.l-control-vertical .compact.f-upload,
.l-control-vertical .compact.f-trigger {
	padding: 1px;
	margin: 1px;
}

.l-control-vertical .compact .f-select-item {
	margin: 2px 0px 2px 0px;
}

.compact.f-select fieldset,
.compact.f-select1 fieldset {
	padding: 0px;
	margin: 0px;
}

/** Invisible comment inputs must takes up space on form
    so they align with the associated checkbox **/
.compact.s-invisible {
	visibility:hidden;
	display:block;
}
/** Reverse above so comment inputs are visible in designer **/
.s-edit .compact.s-invisible {
	visibility:visible;
	display:block;
}

Tables and Grids

Using a table/grid layout is a useful space saving technique. This layout resembles a Microsoft excel worksheet. The table control makes table/grid form layout easy. You can also create a table layout via a custom theme.

Here are a couple forms that have been organized with a table layout. This expense report uses a repeating control in a table layout.

This medical plan leaves some white space between table columns:

A custom theme takes a bit of trial to get the layout just how you want it. Here are some ideas to help you get started.

1. Create a custom theme using some of the ideas from the css example code below. Note:

   the special css class name in this case is row2-n

2. Upload and apply this theme to your form. 

3. Add a panel or a section control to your form. If you use a panel set its width to 100% 

4. Add as many panels as you want columns inside the initial section or 100% width panel. Set the panel width of each of these inner panels to the width you want for each column. Note: this takes a bit of experimentation. 

5. Drop controls (text, money, phone, etc.. into each inner panel.

 This is how the expense report form appears prior to setting the CSS class:

1. Finally put the string '''row2-n''' into the section of panel's CSS class property. This causes the custom css to apply to all controls inside the section or panel so you don't have to add this string to each inner control

Use this sample custom css as a starting point for your own table/grid layouts!

/*****  Very Tight Controls *****************  
        1. Use for Grids for row 2-n
 
*/ 
.f-form .row2-n .f-help, 
.f-form .row2-n .f-required, 
.f-form .row2-n .f-calendar, 
.f-form .row2-n .f-label label {  
        display:none !important; 
} 
.l-control-vertical .row2-n.f-input, 
.l-control-vertical .row2-n.f-output, 
.l-control-vertical .row2-n.f-textarea, 
.l-control-vertical .row2-n.f-select, 
.l-control-vertical .row2-n.f-select1, 
.l-control-vertical .row2-n.f-upload, 
.l-control-vertical .row2-n.f-trigger {  
        clear:both;  
padding:0px !important; 
} 
.l-width-custom .f-panel .f-input input, 
.l-width-custom .f-panel .f-textarea textarea {
        width: 97% !important;  
        height: 17px !important; 
} .l-width-custom .f-panel .f-select1 .select {  
        width: 100% !important; 
} 
.row2-n.f-select1 fieldset, 
.row2-n.f-select fieldset {
        padding:0px !important; 
} 
/* 
.row2-n.f-textarea textarea {
        overflow:hidden; 
} 
*/ 
/* remove space around sections with repeat used in grids */ 
.row2-n .c-section, 
.row2-n .h-section {  
        padding: 0px !important;  
        border-bottom: 0px !important; 
} 
.row2-n.f-section {  
        margin: 0px !important; 
} 
.f-form .row2-n .f-add, 
.f-form .row2-n .f-remove {
        float: left !important; 
} 
.row2-n.s-expanded .f-expand {
    display: none; 
} 

Custom Behaviors

You can add custom javascript to your forms to add additional interactivity. This is done by adding javascript code custom.js in your theme. See Customizing Behavior for full details and examples.

Using firebug

When using a tool such as firebug to inspect additional customizable  css print view classes note that the print view has an overlay that prevents you from selecting the underlying controls. First select the entire page for inspection. You will see a line of html that looks like this:

<div id="preview-overlay" class="overlay"></div>

If you are using firebug, double click the string "overlay" to select it. Then delete it. This will remove the overlay and enable you to inspect other controls in the print view.

#form-container.s-print .f-select-item label {    
color: black; 
}