Add Checkboxes

Overview

Checkboxes are great for answering multi-choice questions. You are free to add or remove as much checkboxes as needed for your forms.

How To Use

To add checkboxes to forms you must do the following:

• Add a form item container
• Edit label text and field name
• Edit your value and display text

When changing the field name, all checkbox buttons in a set must share the same field name. Do not give them each different field names, or else they will each be treated as a different field entirely.

In addition, checkbox field names require a slightly different naming convention to work properly. Please be sure to not remove the trailing [] brackets from the field name.

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 checkbox field. Add a div element with the class of checkbox-control that will act as a container for each label element with the class of checkbox. In between each checkbox class, add a input element with a name in between of [], type as checkbox, and a value.

<div class="form-item">
  <label>Your Custom Checkbox</label>
  <div class="checkbox-control">
    <label class="checkbox">
      <input name="contact[your-custom-checkbox][]" type="checkbox" value="1" />Option 1
    </label>
    <label class="checkbox">
      <input name="contact[your-custom-checkbox][]" type="checkbox" value="2" />Option 2
    </label>
    <label class="checkbox">
      <input name="contact[your-custom-checkbox][]" type="checkbox" value="3" />Option 3
    </label>
  </div>
</div>

Value

Edit the 1 from value="1" to text you want to show up in your email notifications.

<input name="contact[your-custom-checkbox][]" type="checkbox" value="1" />

Display Text

Use the text within the <label> tag to set what you want the user to see for each checkbox option.

<label class="checkbox">
  <input name="contact[your-custom-checkbox][]" type="checkbox" value="1" /><!-- Checkbox Option Text Here -->
</label>