Skip to Main Content

DU Library Style Guide

Form Style

Create Your Form

In LibWizard

  1. Create your form
  2. Under "Form Options", select "Page Header"
    1. Change "Page Header Type" to Use a custom page header for this form
    2. Under "Form Header Text" type the title of your form
  3. Select "Share / URL"
    1. Check Do NOT Display Banner Header
    2. Copy the Embed Widget Code

In LibGuides

  1. From your homepage, click "Create Guide"
  2. Copy the *Form Template guide
  3. Rename the guide to the title of your form, click "Create Guide"
  4. Make the 2 boxes ("Form Content" and "Form Not Working?") floating (which hides the title)
  5. In the Form Content box, under "Add / Reorder," select "Media / Widget"
  6. Name the widget: Form: [Title of Your Form] (ex. "Form: Interlibrary Loan Form")
  7. Paste the embed code copied from LibWizards into the Embed Code field, click "Save"
  8. Change the URL to a friendly URL
  9. Change the page name from [Form Title] to your actual form title (e.g. "Interlibrary Loan Form")
  10. Publish the guide (use the friendly URL anywhere you want people to access the form)

Headings

Top-level headings should be

  • marked as <h2>
  • styled with a LibWizard colored banner

Example

heading example


To quickly do this

  1. Select Bank

    bank option highlighted

  2. Choose 1 of 5 colored headings (Heading - Blue, Heading - Gray, Heading - Green, Heading - Light Red, or Heading - Yellow)

    bank option highlighted

  3. Customize header as desired

    bank option highlighted

Sections

At the bottom of each section, add spacer.

form with spacer

Visually group related labels and fields.

form sections grouped

Fields

Only include fields that:

  1. Can’t be found another way (e.g. don't ask instructors where their class is located in a form, since that can be found via Course Search)
  2. Can’t be collected conveniently at a later date (e.g. don't ask instructors for lesson plan details in a form when you can find those out in later interactions)
  3. Are necessary to process the request (e.g. don't ask instructors if they are full-time or adjunct in an instruction request form)

Don't include placeholder text (put instructions on a label, instead):

placeholder and label bad and good examples

Field widths should match the length of the expected input

differing form field widths based on question

Sample Widths
Field Width
Name 33%
Course Locations (Campus & Room) 66%
Full Address 100%

Use Preset Widths for 33% and 66%

  1. Select Bank

    bank option highlighted

  2. Choose 1/3 width (for 33%) or 2/3 width (for 66%)

    1/3 and 2/3 width options highlighted

  3. Customize field as desired

    customize 1/3 width option highlighted

To adjust width manually

  1. Click

    one-line text input edit field highlighted

  2. Adjust Answer Width (use pixels or percentage). Ex: 100px or 50%

    answer width option is highlighted

Clearly explain any formatting requirements for the input.

Example:

e-mail label example

Generally, when giving a list of options, place the most common values first:

example for most common values first

Use radio buttons for 3 options or less:

radio example with 3 choices

Use dropdowns for 4+ options:

dropdown with more than 4 options