Live Forms v5.1 is no longer supported. Click here for information about upgrading to our latest GA Release.

Skip to end of metadata
Go to start of metadata

We recommend that you only customize themes where absolutely necessary. The CSS customizations depend on the forms underlying html structure. Since this structure is not guaranteed to stay the same in each Live Forms release you will be required to retest your own themes and potentially make changes after each upgrade.

Overview

There are two categories of themes in Live Forms: global and custom. They are described below:

  1. Global Themes - themes provided by Live Forms. There are two global themes: Nouveau and Nouveau Blue. These Global themes take advantage of newer browsers supporting modern CSS and are extremely well-suited to forms/flows running on mobile devices. The Nouveau theme is the default theme for new forms created in version 5.1.1.
  2. Custom Themes- these themes are created by the designer. There are two types of Custom themes:
    1. Application Themes -  Customized themes added to to an application. Application themes will be included in the application download.
    2. Designer themes -  customized themes that are only available to the designer user that uploads them.

Refer to Basic Steps for more details.

Use customized themes when:

  • You want to give a particular form a certain look and feel that you cannot achieve using the properties in the Forms Designer, or
  • You want several forms to have the same look and feel, and wish to apply the theme to all the forms instead of changing properties for one form at a time.

Perhaps the most common reason to customize a theme is to change your forms’ background color so the forms will blend in nicely with your existing Web site, but you can add as many other stylistic touches as you wish to make your forms visually appealing. Once you create a customized theme, you can use it in as many forms as you like—including forms that already exist as well as those you haven’t created yet.

If you are customizing a theme for a single form, be aware of the various style properties that are available in the Forms Designer. Remember there are style properties for the form itself, as well as style properties for the individual controls in your form. You do not need to customize a theme if you wish only to change your form’s height, adjust the color and font of your labels, or create different types of borders around a specific control—you can make these changes simply by editing the appropriate properties.

If you are going to make extensive style changes you need an understanding of CSS and must spend a little time examining and making inferences from the structure and markup of the file (form.css) that Live Forms uses for its own custom themes. A tool such as Firebug can help greatly with this. On the other hand, Live Forms gives you as a starting point, a copy of the form.css file, which is well-commented. For many basic style changes, you do not have to do anything more than overlay the existing value or values with your own. We have provided several examples to get you started.

Be sure to test any form that uses a custom theme in all of the browsers your users might have. A form and its controls may display and function correctly in Internet Explorer, but not in Firefox or Safari. For example, adjusting the placement of controls in a form using custom themes may produce different results in a different browser or different browser versions.

 

 

 

 

 

  • No labels