Add a Dropdown Selector

Overview

Dropdown Selectors are a great for long, predefined options.

How To Use

To add multi-line text to forms you must do the following:

• Add a form item container
• Add a label for each text field
• Add your select form control associated to the label
• Add a name to the select form control
• Add each desired titles to each option in the select form control

The first option element using disabled="disabled" selected="selected" is optional. Use this if you would want to display placeholder text while also having users choose from valid options.

Markup

Within a div element with the class of form-item, add a label element with what you want shown as the label for your dropdown selector. Add a div element with a class of select. Add a select element with the class of form-control and a name of your dropdown selector in between of []. The select element will contain the option elements. Put each option you would like to have in your dropdown selector in it's own option element.

<div class="form-item">
  <label>Your Custom Select</label>
  <div class="select">
    <select class="form-control" name="contact[your-custom-select]">
      <option disabled="disabled" selected="selected">Choose Option</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
  </div>
</div>