Forms

Forms can be a complicated pain in your website, but hopefully Front Street can help. With forms, there generally isn't always a "right" way to do something. So the framework provides default styling for most common form fields and throughout this article, we'll demonstrate how this styling can be best utilized in different layouts.

  1. Basic Example
  2. Text Inputs
  3. Number Inputs
  4. Text Areas
  5. Select Menus
  6. Checkboxes
  7. Radio Buttons
  8. Field Sizing
  9. Field Groups
  10. Field Icons
  11. Required Fields
  12. Help Text
  13. Fieldsets and Legends
  14. Form Layout

Basic Example

Below is an example of a basic contact form.

And the following demonstrates how adding the helper class text-light can effect the form fields when using them on a dark background.

Text Inputs

Number Inputs

Text Areas

Select Menus

Select Menu

Multiple Select Menu

Jump Menu

By adding class fs-jump-menu to a select menu, you can have the user selection jump to a webpage URL placed in the value of each option.

Checkboxes

Single Checkbox

The following example shows a basic checkbox. Note that the class checkbox-label has been added to the <label>.

Checkbox Groups

For a group of checkboxes, group them in an unordered list with class checkbox-group.

  • Favorite Players
  • Favorite Players

And if you'd like your checkbox group to be within a <fieldset> with a <legend>, you can do that, as well.

Favorite Players
Favorite Players

Inline Checkbox Groups

To display your .checkbox-group fields inline, add class checkbox-group-inline.

  • Favorite Players
  • Favorite Players
Favorite Players
Favorite Players

Radio Buttons

Radio Groups

For a group of radioes, group them in an unordered list with class radio-group.

  • Favorite Player
  • Favorite Player

And if you'd like your radio group to be within a <fieldset> with a <legend>, you can do that, as well.

Favorite Player
Favorite Player

Inline Radio Groups

To display your .radio-group fields inline, add class radio-group-inline.

  • Favorite Player
  • Favorite Player
Favorite Player
Favorite Player

Field Sizing

For different size <input> fields add classes field-xs, field-sm, field-lg, field-xl, field-xxl or field-xxxl.

And the same classes can be added <select> fields, as well.

Field Groups

Fields and buttons can easily be put into horizontal groups by adding them within an element with class field-group. This is necessary when you want the elements within to equally span the row.

Multiple fields will automatically adjust to fit, as well.

Slightly more complex uses with labels can be also utilized here.

And using matching sizes on your fields and buttons can adjust the overall field group sizes.

And your .field-group elements can also contain <select> menus, too.

Field Icons

Adding FontAwesome icons into your form fields is easy. Wrap a form field <input> or <select> menu in an element with class field-icon and then also add the FontAwesome icon class you want like fa-search, fa-user, etc.

Below is a practical example of an <input> meant to serve as a simple search field. We've taken a standard <input> and wrapped it in a <div> with classes field-icon and fa-search.


And next is an example of a <select> menu. Again, we've just wrapped it in a <div> with classes field-icon and fa-user.

Your .field-icon elements can also contain different field sizes. However in addition to your properly sized field, on your .field-icon wrapper, you need to also add the matching size class — field-icon-xs, field-icon-sm, field-icon-lg, field-icon-xl, field-icon-xxl or field-icon-xxl.














And of course, sizing works with <select> menus, too.

Looking to combine .field-icon elements with .field-group elements? No problem.

And here's another practical example combining field groups and icons with more fields.

Required Fields

For letting the user know that a field is required, add <span class="required">*</span> within its label.

Help Text

To give the user a description for a field, add a <span> with class help-text below the field.

Please fill in your first and last name.

Please fill in your first and last name.

And if you're inserting your .help-text elements dynamically, you can also utilize contextual classes, if applicable — success, info, warning, and danger.

Oops! You forgot to enter your name.

Please fill in your first and last name.

Fieldsets and Legends

When working with more complex forms, it's often good practice to group related fields with <fieldset>. And when doing this, you can use <legend> to give that group of fields a title. Front Street styles <legend> and <label> similarly, with <legend> being a little larger.

The following example demonstrates the hierarchy of <legend> and <label> within a <fieldset>.

Name

Name

And next, this is a slightly different way of accomplishing the same concept. But instead of using a <label> for each field, we're just relying on .help-text descriptions below each field, instead.

Name

First

Last

Name

First

Last

Form Layout

In the beginning of the article there is a basic example of a contact form. Utilizing grid classes we can expand our form layouts.

And here's an example of a standard comment form, utilizing required fields.

And last, we've got a more complex example bringing together fieldsets, legends, and grids.

Name

First

Last

Account

Username

E-mail

Occupation

Job Title

Work Amount

Message

Name

First

Last

Account

Username

E-mail

Occupation

Job Title

Work Amount

Message