Introduction
Navigation & Site Map
Grids & Layouts
Color palette
Text Treatments
Buttons & Icons
Imagery
Hyperlinks
Messaging Objects
Pop-up Windows
Forms
CSS Grid & Layout
CSS Buttons
Files for Download

Form guidelines
Elements of a form
Left & right column forms

Form Guidelines

Form Blocks vs. Form Subsections
Some forms contain discrete blocks (like the join form); others have distinct subsections within a single form block (like the check rates sidebar form). Style should be determined by the IA on a per-form basis.

Radio Buttons vs. Checkboxes
Radio buttons should always be used with mutually exclusive choices. Checkboxes are used when multiple selections are possible.

Groups of Buttons/Checkboxes
If a group of checkboxes or radio buttons share a single label or heading (Bed Type, Special Rate, Choose a Brand, etc), a Arial 10px Bold text should be used.

Buttons Placement
Buttons such as clear, search, continue, should always be inside the colored form box with 10px space at the top and 15px space at the bottom of the button graphic.

 Back to top
Elements of a Form

All Forms should have the background color #CBCBDB.

  Element Required Text Spacing Alignment Grammar
Title Yes Arial 12px Bold #333333 N/A Left Title case
Sub header Yes Arial 12px Bold #333333 N/A Left Title case
Checkboxes & radio buttons No Arial 10px Regular #333333 N/A Left Sentence case no punctuation
Hyperlinks No Arial 10px Regular #003399 N/A Left Sentence case
Dashed lines No N/A 10px per side N/A N/A
Clear buttons Yes, when no cancel button is present Univers 65 Bold 11pt #ffffff 18px 10px per side Button left aligned Title case
Submit buttons Yes Univers 65 Bold 11pt #ffffff 18px 10px per side Button right aligned Title case
Required Yes, when there are required fields Arial 12px Bold #333333 N/A Right All lower-case
Intro copy No Arial 10px Regular #333333 N/A Left Sentence case no punctuation
Parenthetical copy No Arial 10px Regular #333333 N/A Left Lower case no punctuation
Non-editable No The label should be Arial 10px Bold #333333 followed by a colon. Non-editable Arial 10px Regular #333333 10px per side Button right aligned Title case


 Back to top
Left & Right Column Forms

Font Specifications

  Main header - Arial 12px / Bold / #333333 or #FFFFFF
  Section header - Verdana 10px / Regular / #333333
  Field entry label - Arial 10px / Regular / #333333
  Links - Arial 10px / Regular / #333333

 

   

 

 

 Back to top