Checkbox Tags

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

If you add an asterisk to the checkbox type; e.g.:

checkbox*

The user will be required to check at least one of the checkboxes of that name.

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-check specific checkboxes. The “num” is a 1-based ordering of the checkboxes; i.e., the first checkbox is “1” and subsequent checkboxes of the same name are ordered consecutively. You can pre-check more than one checkbox by separating the order numbers by an underscore. For example, you would replace “(num)” with “2_4_7” to pre-check checkboxes two, four, and seven.
  • label_first – makes the label associated with a checkbox precede rather than follow the checkbox
  • use_label_element – wraps each checkbox 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 Checkbox Tag has one or more values. For example:

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

Custom Layouts

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

Reversing Checkbox/Label Order

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

[checkbox my-checkbox label_first "Option 1" "Option 2" "Option 3"]

Display Checkboxes as a Block

By default, checkboxes 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 Checkboxes 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 checkboxes 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;
}