Forms

Forms are an important part of pages which ask users for input. They should be simple, clear and accessible for all audiences. Below you can find several important components from which the forms are assembled.

Notice

To ensure that WFP UI styles are correctly applied to your form elements, please add a class wfp-form to your form wrappers.

To see how different form elements work together with our flexible grid system, have a look at one of the form patterns below.

Preview
Please select preferred contact method:
By sending this form you agree to our privacy policy. 
<form class="wfp-form--stacked wfp-grid" action="self">
  <div class="wfp-grid">
    <div class="wfp-u-1-2 wfp-box--flat">
      <label for="first-name">First name:</label>
      <input type="text" id="first-name" name="first-name">
    </div>
    <div class="wfp-u-1-2 wfp-box--flat">
      <label for="email">Email address:</label>
      <input type="email" id="email" name="email">
    </div>
  </div>
  <div class="wfp-form--group">
    <label for="selection">Pick a subject:</label>
    <select id="selection">
      <option value="1" selected>Option #1</option>
      <option value="2">Option #2</option>
      <option value="3">Option #3</option>
    </select>
  </div>
  <div class="wfp-form--group">
    <label for="message">Your message:</label>
    <textarea name="message" id="message"></textarea>
  </div>
  <div class="wfp-form--group">
    <div class="wfp-checkbox">
      <input type="checkbox" id="sample-1">
      <label for="sample-1">I would like to be contacted, if necessary.</label>
    </div>
  </div>
  <fieldset class="wfp-form--group">
    <legend>Please select preferred contact method:</legend>
    <div class="wfp-radio">
      <input type="radio" id="sample-2" name="radio-grp" checked>
      <label for="sample-2">by email</label>
    </div>
    <div class="wfp-radio">
      <input type="radio" id="sample-3" name="radio-grp">
      <label for="sample-3">by fax (if you still have one)</label>
    </div>
    <div class="wfp-radio">
      <input type="radio" id="sample-4" name="radio-grp">
      <label for="sample-4">by pigeon (may take a few days to reach you)</label>
    </div>
  </fieldset>
  <div class="wfp-form--actions">
    <button class="wfp-btn--primary" type="submit">Send message</button>
    <button class="wfp-btn">Cancel</button>
    <span class="wfp-form--msg">By sending this form you agree to our <a href="#">privacy policy</a>.</span>
  </div>
</form>

Special Classes

If you want to push your forms to their limit, you can use our special classes, which can help you create more eye-friendly layouts.

wfp-form--group
Group contained form elements by giving them extra vertical padding.

wfp-form--actions
Wrapper designated to contain all actionable elements, such as buttons. Gives them extra padding and margins, to ensure they stand out from other elements.

wfp-form--msg
Small inline messages, that are best suited for notices, or inline tips.