Radio Button Tags

The Radio Button Tag is used to add one or more radio buttons to a contact form on the Form Tab of the Edit Contact Form Page for the contact form being edited.

There is no required version of a Radio Button Tag because a radio button is selected by default in browsers.

Options

  • id:id – adds an id attribute to the HTML tag
  • class:class – adds a class attribute to the HTML tag
  • default:integer – allows you to pre-select a specific radio button. The “num” is a 1-based ordering of the radio buttons; i.e., the first radio button is “1” and subsequent radio buttons of the same name are ordered consecutively.
  • label_first – makes the label associated with a radio button precede rather than follow the radio button
  • use_label_element – wraps each radio button with a “label” HTML tag.
  • exclusive – allows only one–or no–checkboxes to be checked. This option requires javascript to be enabled to function.
  • free_text – adds a text field to the last item; e.g., if you want an “other” option and allow user explanation

Values

The Radio Button Tag has one or more values. For example:

[radio your-color-preference "Red" "Green" "Blue"]

Custom Layouts

By default, radio buttons are laid out inline. There are some options (listed above in the Options Section) that allow customization of the default layout.

Reversing Radio Button/Label Order

Normally, Contact Form Redux displays the radio button first, and its label after it. You can reverse the order with the “label_first” option:

[radio my-radio button label_first "Option 1" "Option 2" "Option 3"]

Display Radio Buttons as a Block

By default, radio buttons are displayed inline. To display them in block format, use the following CSS in you child theme’s style.css:

span.cfredux-list-item {
  display: block;
}

Display Radio Buttons as a Table

Tables don’t play well with responsive themes, so this layout is not recommended; however, if you want to try to display radio buttons as a table, you can use this CSS in your child theme’s style.css:

span.cfredux-list-item {
  display: table-row;
}
span.cfredux-list-item * {
  display: table-cell;
}