Forms

Form Demonstrations

A series of form demonstrations that can be used within the website. For an example of the default form grid and how to place elements within the form, see the form grids section. Also see the form elements section for an extensive list of all element styles available.

Aside filter search form

A demonstration of a search filter form which sits in the right column "aside" of the website. When using a form in the right column aside, you must follow this format. Notice that the labels are above the input and there is on a single full width form layout.

Ensure you use the modifier class .c-content-form--aside.

Form title

Form Legend

Paragraph related to the form label and select elements below.

This is a long label

This is another long title

Help text for above input.

Heading 3

Paragraph related to the heading above and the radio buttons below.

Yes

Maybe

Heading 4

Heading 5

Heading 6

Paragraph related to the headings above and the checkboxes below.

Label for option 1 Label for option 2 Label for option 3

<form class="c-content-form c-content-form--aside">
  <h2 class="c-content-form__title">Form title</h2>
  <fieldset>
    <legend class="c-content-form__legend">Form Legend</legend>
    <div class="c-content-form__group c-inline-block-form">
      <div class="o-form-two-column--full-width">
        <p>Paragraph related to the form label and select elements below.</p>
        <div class="c-inline-block-form__item">
          <label for="active">This is a long label</label>
          <select id="active" name="active">
            <option value="1" selected="selected">Yes</option>
            <option value="0">No</option>
          </select>
        </div>
      </div>
    </div>
    <div class="c-content-form__group c-inline-block-form">
      <div class="o-form-two-column--full-width">
        <div class="c-inline-block-form__item">
          <label for="title">This is another long title</label>
          <input name="title" type="text" id="title" title="" placeholder="John Smith">
        </div>
        <p class="c-content-form__help-text">Help text for above input.</p>
      </div>
    </div>
    <div class="c-content-form__group c-inline-form">
      <div class="o-form-two-column--full-width">
        <h3>Heading 3</h3>
        <p>Paragraph related to the heading above and the radio buttons below.</p>
        <span>
          <div class="c-inline-form__item">
            <label>
              <input name="yesno" type="radio" title="">
              Yes
            </label>
          </div>
          <div class="c-inline-form__item">
            <label>
              <input name="yesno" type="radio" title="">
              No
            </label>
          </div>
          <div class="c-inline-form__item">
            <label>
              <input name="yesno" type="radio" title="">
              Maybe
            </label>
          </div>
        </span>
      </div>
    </div>
    <div class="c-content-form__group c-inline-block-form">
      <div class="o-form-two-column--full-width">
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
        <p>Paragraph related to the headings above and the checkboxes below.</p>
        <div class="c-inline-block-form__item">
          <label>
            <input type="checkbox" title=""> Label for option 1
          </label>
          <label>
            <input type="checkbox" title=""> Label for option 2
          </label>
          <label>
            <input type="checkbox" title=""> Label for option 3
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="c-content-form__group c-content-form__group--action">
    <div class="o-form-two-column--full-width">
      <div class="c-content-form__btn-group">
        <button class="c-btn c-content-form__btn" type="submit">Apply</button>
      </div>
    </div>
  </div>
</form>