FORMfields, the premiere web framework
Login
Support Home | Knowledge Base | Documentation | Forums | Contact Us
FORMfields v3 Tutorials
FORMfields Tutorials
FORMfields Lib Installation
FORMgen Installation
Manually Creating a Form
Load/Unload From a DB
Emailing a Form
Forms on Your Webpage
Creating Tables
Pagifying Data
Using CSS to Format Forms 1
Using CSS to Format Forms 2
Other Tutorials
Using CSS to Format the Look and Feel of Your Form - Part 1
Last Updated: September 24th, 2007
Overview
In this tutorial we will demonstrate how to use CSS to format the look and feel of your FORMfields forms.

Your first step should be browse the CSS templates in Step 4 of FORMgen and select the template that yields a layout that is most similar to your website's layout and color scheme. Then, you can follow the steps below to further customize your look and feel.

What is CSS?
CSS stands for Cascading Style Sheets and it is a way of defining how the elements on a webpage are displayed. CSS is great as it can be defined in a single location and affect the look and feel of an entire website. For a complete CSS reference, please see www.w3schools.com/css. You can use CSS to format all the elements in a FORMfields form and CSS can be kept separate from your form's structure and actions.

Including CSS in Your Form
There are two good ways to include CSS in your FORMfields forms:

1. On a per form basis by including it in the <style> tag of your form. For example:


    <style type="text/css">
        /* Sometimes it is useful to specify a label width */
        label.notValid, label.isValid, label.disabled, label.display {
            width: 150px;
        }
    </style>

2. Or, as an external file that can be included in any amount of forms. For example, let's say you have the CSS file, my_css.css and it is located in the same directory as your form. Then, you can include the CSS in the head of your form by inserting:

    <link rel="stylesheet" type="text/css" href="my_css.css" />

after the line:

    <? require_once(FF_SRC "/FfIncludes.php"); ?>

Preview the Comprehensive Example
Here is an example of a form generated with FORMgen that uses the basic.css template. And here is the same example, but now, most of the elements in the form have been customized with CSS. (Yes, the new form is ugly, but it demonstrates the flexibility of CSS in FORMfields). You can download the original or download the new form.
CSS Formatting Examples:
Format the Section Title
Note: The background-color line of the following CSS should only be used with the templates: basic.css, gray.css and midnight.css (see Avanced Note About Backgrounds for details). The Section Title is typically the title of the form. The following CSS will set the font to Arial, italic and 18 pixels. Furthermore, it will set a background color of orange and a text color of green:

    td.ffSectionTitleTopMiddle {
        font: italic normal normal 18px arial;
        background-color: orange;
        color: green;
    }

Alternatively, you could use the following, which sets a transparent background color, text color of green and font size of 20 pixels:

    td.ffSectionTitleTopMiddle {
        background-color: transparent;
        color: #00ff00;
        font-size: 20px;
    }

Format HeaderFields
Note: The background-color line of the following CSS should only be used with the templates: basic.css, gray.css and midnight.css (see Avanced Note About Backgrounds for details). The HeaderFields are titles that are used to break up different sections in a form. The following CSS sets the background color to transparent and creates a 3 pixel wide red ridge border around the text in the form's HeaderFields. Please note that "color: inherit;" is not necessary, but is required by W3C for CSS compliance, a detail, which beginners may want to ignore here on out.

    td.ffHeader1Middle {
        background-color: transparent;
        color: inherit;
        border: 3px ridge red;
    }

Format DescriptionFields
The following CSS sets the font size to 20 pixels, sets a background image, height of 70 pixels and a text color of black:

    div.ffDescription {
        font-size: 20px;
        background-image: url('http://www.formfields.com/FORMfields/images/ffLogo.png');
        height: 70px;
        color: #000000;
        background-color: inherit;
    }

Format Valid Label Fields - Field Labels with Valid Data or No Data
The following CSS will configure all fields that don't contain errors. The following CSS will set the text of these labels to all caps and set the text color to blue:

    label.isValid {
        font-variant: small-caps;
        color: blue;
        background-color: inherit;
    }
    
Format Invalid Field Labels - Field Labels of Fields with Invalid Data
Please recall that typically, when a user submits a form, the form will return and report field errors in red. The following CSS sets a 2 pixel wide solid red border around these labels:

    label.notValid {
        border: 2px solid red;
    }
    
Right Align Labels
You can right align all field labels using:

    div.fieldError, div.fieldErrorSpan, label.isValid, label.isValidSpan, 
    label.disabled, label.disabledSpan, label.notValid, label.notValidSpan, label.display {
        text-align: right;
        padding-left: 0px;
    }
    
Format the Field Error Message
The field error message is displayed below the label of a field that contains invalid data. The following CSS will make this text italic:

    div.fieldError {
        font-style: italic;
    }
    
Format the Field Help
The field help is the text located at the right of a field. The following CSS will set this help text to green, size 9 pixels and width 100 pixels:

    div.help {
        color: green;
        background-color: inherit;
        font-size: 9px;
        width: 100px;
    }
    
Format the Form Error Message
The Form Error message is displayed at the top of the form when the form contains errors and usually reads "Please correct the following errors:". The following CSS will set a left margin of 80 pixels and set the text to all caps:

    div.ffMessageHelperError {
        margin-left: 80px;
        font-variant: small-caps;
    }
    
Format the Required Text and Stars
The "required" text typically appears at the top right of the form and the required stars appear before each required field label. The following CSS sets the required stars to bold, size 20 pixels and the "required" text to bold:

    /* Required Stars */
    span.required {
        font-weight: bold;
        font-size: 20px;
    }

    /* Required Text */
    span.help {
        font-weight: bold;
    }
    
Format the Text that Separates Fields
The text that separates fields can be the "/" between date parts or "-" between Social Security Numbers, etc... The following CSS will set this text to orange and bold:

    span.FORMfields {
        color: orange;
        background-color: inherit;
        font-weight: bold;
    }
    
Format the Submit Buttons
The following CSS will create a 3 pixel wide solid blue border around the submit field. In addition, it will set the background color of the button to orange.

    input.FORMfieldsSubmit {
        background-color: orange;
        color: inherit;
        border: 3px solid blue;
    }
    
Format Input Fields
Input fields are text fields, text areas, etc... where the user can enter any text. The following CSS will set this text to bold, purple and 14 pixels.

    input.FORMfieldsText, input.FORMfieldsPassword, textarea.FORMfieldsTextArea,
    input.FORMfieldsFile, input.FORMfieldsCheckbox {
        font-weight: bold;
        color: purple;
        background-color: inherit;
        font-size: 14px;
    }
    
Format Drop Down Fields
The drop down fields contain predefined lists from which the user can choose. The following CSS will set the text in these lists to yellow and bold and set a background color of black:

    select.FORMfields {
        color: yellow;
        background-color: black;
        font-weight: bold;
    }
    
Format the Page Background
Note: The background-color line of the following CSS should only be used with the templates: basic.css, gray.css and midnight.css (see Avanced Note About Backgrounds for details). The following CSS will set the page background to black:

    body.FORMfields {
        background-color: #000000;
        color: inherit;
    }
    
Format the Form Background
Note: The background-color line of the following CSS should only be used with the templates: basic.css, gray.css and midnight.css (see Avanced Note About Backgrounds for details). The following CSS sets the border and background of the form:

    table.ffSectionTitle {
        border: 3px solid white;
        background-color: #ffffaa;
    }
    
Format Alternating Rows in the Form
The following CSS will alternate the background color of the rows in the form between gray and pink.

    /* Odd Rows */
    td.ffTableSetFORMfieldsField1, td.ffTableSetFORMfieldsLabel1 {
        background-color: #eeeeee;
        color: inherit;
    }

    /* Even Rows */
    td.ffTableSetFORMfieldsField2, td.ffTableSetFORMfieldsLabel2 {
        background-color: pink;
        color: inherit;
    }
    
Format the Borders of all the Cells in the Form
The following CSS will set a gray, dotted border around all the cells in the form:

    td.ffTableSetFORMfieldsField1, td.ffTableSetFORMfieldsLabel1,
    td.ffTableSetFORMfieldsField2, td.ffTableSetFORMfieldsLabel2 {
        border: 2px dotted #cccccc;
    }
    
Format All the Font in a Form:
You can use the following CSS to format all the fonts in a form. In this example we specify times new roman, 18 pixels and bold:

    div.pageErrors, div.fieldError, label.isValid, label.notValid,
            div.fieldErrorLeftAligned, label.disabledLeftAligned,
            label.notValidLeftAligned, label.displayLeftAligned,
            label.isValidLeftAligned, 
            div.fieldErrorRightAligned, label.disabledRightAligned,
            label.notValidRightAligned, label.displayRightAligned,
            label.isValidRightAligned, 
            label.isValidSpan,
            label.isValidSetSelector, span.help,
            label.display, div.display, span.grayed, select, 
            span.FORMfields, span.required, div.help, div.ffText,
            textarea.FORMfields, select.FORMfields, body.ffEmail,
            label.disabled, div.ffField, div.FORMfields, div.FORMfields2,
            input.FORMfieldsText, input.FORMfieldsPassword, textarea.FORMfieldsTextArea,
            input.FORMfieldsFile, input.FORMfieldsRadio, 
            input.FORMfieldsCheckbox, input.FORMfieldsSubmit,
            div.ffDescription, div.ffMessageHelperQuestion,
            div.ffMessageHelperError, div.ffMessageHelperWarning,
            div.ffMessageHelperInfo, td.ffSectionTitleTopMiddle, 
            td.ffHeader1Middle {
        font: normal normal bold 18px times new roman;
    }

Related Topics
Advanced Note About Backgrounds
Advanced Note: Several FORMfields templates like blueMidnight.css and default.css contain layouts with curved edges that contain built in backgrounds. Unfortunately, for these templates you cannot easily change the background color of these elements without modifying the actual images. This is because Internet Explorer (IE) 6 doesn't support transparent PNGs and therefore all images must contain a static, nontransparent background. As you can imagine this only poses a problem for square elements and not round elements. Please recall that FORMfields is a cross browser library so it must work in IE 6. According to www.w3schools.com, in early 2007, IE 6 users made up 30% of the world's browser population; a significant population. Therefore, we need to workaround the defects in IE 6, even if these workarounds are time consuming. In Using CSS To Format the Look and Feel of Your Form - Part 2 we will explain how to use a graphics program, like Adobe Photoshop, to add a different background to these round elements.
Info
Support | Earn Money
Copyright © 2005-2014 Brain Book Software LLC.
Built with FORMfields, the premiere web framework.