Add Radio Buttons

Overview

Radio button fields are another great way for showcasing single-answer options. You can add and remove an unlimited number of radio button options.

How To Use

To add radio buttons 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 radio 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.

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

<div class="form-item">
  <label>Your Custom Radio</label>
  <div class="radio-control">
    <label class="radio">
      <input name="contact[your-custom-radio]" type="radio" value="1" />Option 1
    </label>
    <label class="radio">
      <input name="contact[your-custom-radio]" type="radio" value="2" />Option 2
    </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-radio]" type="radio" value="1" />

Display Text

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

<label class="radio">
  <input name="contact[your-custom-radio]" type="radio" value="1" /><!-- Radio Button Text Here -->
</label>