Customizing Forms

From Frevvodocs

If you have upgraded to Live Forms v2 please see the v2.x documentation.

Customizing Forms

Once you create your forms you will want to give them your own custom styling touches. Minor styling is best accomplished using the style properties available in the form designer. The style proproperties enable you to effect: font and background color, control placement, borders and more. However when you need larger more intricate style customization, frevvo themes are the way to do that. frevvo supports several built-in themes, but most likely you will want to modify them so that your forms fit into the look & feel of your existing web site. One easy way to get started on your own theme is to download one of frevvo’s.

On the applications page, click on the Themes link. That will take you to the themes page where you can download existing themes as well as upload new ones. Click on the button to download a theme.

Downloaded themes are in the form of a .zip file containing the following files:

* form-layout.css - general layout
* form.css – styles applied to both edit and use mode
* form-edit.css – styles applied only to edit mode
* custom.js – javascript customization

Edit these files to modify styling and behavior. Re-zip the files and upload it back to frevvo by clicking the icon on the themes page. You can give a name to the new theme and it will appear in the list of themes.

frevvo's default themes appear custom themes under the title Global Themes. And any customized themes you add appear under the title Themes.

Once you have your custom theme uploaded into frevvo, navigate back to your applications page and click on an application name. Click on the Properties link on the top and that will take you to a page where you can update several application properties. You will see your new theme as one of the options in the dropdown Choose a Theme. Selecting a theme will apply that theme to all forms in that application.

Styling

Theme customization currently requires a basic understanding of CSS. A future version of frevvo will include a theme builder such that CSS knowledge is not necessary for the most common customizations.

Most of the elements or boxes (CSS box model) found in frevvo form have a class name assigned and therefore can be targeted using a css rule. Those boxes include the form itself, the body of the form, controls, control headers etc. It is possible to customize anything from the width of the form to font colors, backgrounds etc.

For the specific case of form controls (inputs, sections, repeats etc.) the form designer can also specify a CSS class name in the element's edit container and use that name to target the element in css. See an example of this below.

Some examples of control class names are:

Examples

The following examples show you how to edit one of frevvo's default themes to perform some of the most common theme customizations. All of the customizations below have been made by editing the file form.css from one of frevvo's default themes.

Radio Option - Horizontal Yes/No

This customization styles yes/no radio control questions so that the radio options are on the same horizontal line as the question.

This styling can make it easier for users to fill in your form quickly and to make the form appear shorter and more enticing to use.

/* Radio, Checkbox */
.f-select1 fieldset,
.f-select fieldset {
   margin-left: 20px;
   width:70%;
   float:left;
   border: 1px none grey;
   clear:left;
}

.f-select1 fieldset label,
.f-select fieldset label {
   width:80%;
   float:right;
   padding-left:5px;
}

/* Radio, Checkbox */
.f-select1 fieldset,
.f-select fieldset {
   margin-left: 5px;
   width:20%;
   float:right;
   border: 1px none grey;
   clear:none;
}

.f-select1 fieldset label, 
.f-select fieldset label {
   width:20%;
   float:right;
   padding-left:5px;
}

Font & Background Color

This customization changes the background color of the form to beige and the font text to black. This is a very common change required to integrate your forms into an existing web site.

.f-form {
   color: blue;
   background-color: #eeeeee;
   border: 1px solid blue;
   padding:15px;
}

.f-form {
   color: black;
   background-color: beige;
   border: none;
   padding:15px;
}

Input Width

The example increases the width of all input controls.

/* Text, Dropdown, Paragraph */
.f-input input, 
.f-select1 select, 
.f-textarea textarea {
   margin-left: 20px;
   width:60%;
   float:left;
   border: 1px solid grey;
   clear:left;
}

/* Text, Dropdown, Paragraph */
.f-input input, 
.f-select1 select, 
.f-textarea textarea {
   margin-left: 20px;
   width:80%;
   float:left;
   border: 1px solid grey;
   clear:left;
}

Custom CSS Classes

Lets say you want to change the label on certain very important form fields so that they appear in bold red text. First we need a way to indicate which fields in our form are very important. To do this we need to assign those fields a unique CSS Class ID. This is done in the form designer.

First, edit the form in the designer and add a CSS Class name veryImportant to each field which you want to style in bold red.

Second, add the following CSS to forms.css

.veryImportant {
   color: red; 
   font-weight: bold; 
} 

Note: If the control is a repeat item the rule will be applied to all items.

Best Practices

It is actually better practice when possible to separate your CSS style additions from the default CSS style. So best practice is to create a new file called custom.css and include this in form.css by adding the line below to the top of form.css:

@import url(custom.css);

Then put all of your CSS style in the file custom.css and remember to include that in your theme zip before uploading it into your frevvo application. And for form-edit.css it is best to put your customizations into a file named custom-edit.css.

Replacing Icons

You can replace the standard icons used on the form with your own icons. For example, sections controls use up-arrow.gif and down-arrow.gif icons for expand/collapse functionality. To replace the standard icons with your own:

• Download a theme
• Copy your icons into the theme. Typicaly you will want to put your images in a subdirectory called images.
• Edit the file form.css in the downloaded theme.

This is the original content of the global theme narrow-vertical-green. Note that it uses icons that come prepackaged with frevvo.

.s-expanded .f-expand{
   display:inline;
   background: url(/frevvo/images/icons/arrow_up.gif) center no-repeat;
   cursor: pointer;
}
.s-collapsed .f-expand{
   display:inline;
   background: url(/frevvo/images/icons/arrow_down.gif) center no-repeat;
   cursor: pointer;
}

These are the same lines in form.css modified to use the images copied into the theme. The icon world.gif was placed directly into the theme directory. The icon lock.gif was placed in an images subdirectory. The later is better practice.

.s-expanded .f-expand{
   display:inline;
   background: url(./world.gif) center no-repeat;
   cursor: pointer;
}
.s-collapsed .f-expand{
   display:inline;
   background: url(./images/lock.gif) center no-repeat;
   cursor: pointer;
}

• Zip up the theme files including the images subdirectory.
• Upload this modified theme.
• Edit you application's properties and select this new theme.
• Make sure you clear your browsers cache. Sometimes you need to restart your browser.

Adding Images

You can add images to your forms by including the images in your theme. And then referrencing those images in a message control in your form.

To add an image to your form:

• Download a theme
• Copy the image into the theme. Typically you will want to put the image in a subdirectory called images.
• Zip up the theme files including the images in the images subdirectory
• Upload this modified theme. [Note: due to #1235, make sure the theme name you choose does not contain spaces]
• Edit your form and add a message control.
• Add the following <img> tag to the message control's text property. Replacing the text in the <> with the actual values.

<img src="/frevvo/web/user/<your username>/theme/<theme name>/resource/images/<image name>" alt="NEDA  Logo"/>

For example, if your username is jsmith, and you added a file images/company-logo.jpg to your theme, and you named the theme company-logo-theme, the image tag would be:

<img src="/frevvo/web/user/jsmith/theme/company-logo-theme/resource/images/company-logo.jpg" alt="Company  Logo"/>

Special Cases

Essentially, there is a wide variety of possible customizations and for a special cases it may be necessary to inspect the markup in order to properly customize something. One approach is to simply look at the page code and search for the elements you need to style. On top of that, different browsers may provide tools to easy the task of inspecting the markup.

Firefox “Web Developers” extension is a very helpful tool for rapidly developing a new .css look & feel. It can be installed into firefox via Tools->Extensions in your firefox browser. Click on Get More Extension and search for “Web Developer”, and then Install Now. This adds a tools bar containing a css menu. Open the css menu and select edit css. When you open your form in use mode for example, the file form.css will be automatically added to the tabbed file list. Select this tab. Any changes you make here are immediately applied to your form in firefox’s browser windows. Caution, if you leave or refresh your browser pages all you “test” changes to form.css will be discarded. So if you like what you’ve done make sure to save the changes before navigating away from your use mode form.

A second useful firefox feature is the xhtml Inspector also part of “Web Developers”. You can open the inspector window by clicking on the green check circle in the bottom right corner of the browser. The click on the inspector tab and click the “Inspect” button/link on the left side of that header. Then hover and click on any control in your form. This will bring you to it’s location in the xhtml file. Look up the hierarchy at the containing div and span elements and you can see the class Ids as described above that can be used in form.css to customize your form’s style.