11. Checkboxes, radio buttons, and menus

Created by Danny Wong, Modified on Sun, 09 Aug 2020 at 03:39 PM by Danny Wong

Contact Form 7 provides several types of form-tags for representing checkboxes, radio buttons, and drop-down menus. This article explains about the usage and semantics of these form-tags.
Checkboxes and radio buttons#Checkboxes and radio buttons
Both checkbox and checkbox* represent a group of checkboxes (<input type="checkbox"> in HTML). checkbox* requires the user to select at least one of the boxes.
radio represents a group of radio buttons (<input type="radio"> in HTML). Because a group of radio buttons is naturally required, a radio form-tag works as a required field. It is advised to preselect an option in a radio button group using the default:1 option.

OPTION	EXAMPLES	DESCRIPTION
`id:`(id)	`id:foo`	`id` attribute value of the wrapper element.
`class:`(class)	`class:bar`	`class` attribute value of the wrapper element. To set two or more classes, you can use multiple `class:` option.
`default:`(num)	`default:2` `default:1_2_3`	Preselected options. The integer following `default:` is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as `default:1_2_3`.
`label_first`		By default, a checkbox or a radio button are put first, and a label last. By adding `label_first` option, you can reverse them.
`use_label_element`		Wrap each checkbox and radio button with `<label>` tag.
`exclusive`		Make checkboxes exclusive. This means, when you select a checkbox in a group, others will be cleared, so the group accepts the zero-selected or one-selected state only. This is a JavaScript gimmick so doesn’t work without JavaScript. `radio` form-tags don’t support this option.
`free_text`		Append a free input text field to the last item.
`data:`(name)	`data:countries`	Get the values from Listo.

These types of tags have one or more values, and the values will be used as the values and labels of the checkboxes or radio buttons.
Example:

[checkbox your-country "China" "India" "San Marino"]

Drop-down menus#Drop-down menus
Both select and select* represent a drop-down menu (<select> in HTML). select* requires the user to select at least one option from the menu.

OPTION	EXAMPLES	DESCRIPTION
`id:`(id)	`id:foo`	`id` attribute value of the `select` element.
`class:`(class)	`class:bar`	`class` attribute value of the `select` element. To set two or more classes, you can use multiple `class:` option.
`default:`(num)	`default:2` `default:1_2_3`	Preselected options. The integer following `default:` is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with underbar (_), as `default:1_2_3`.
`multiple`		Make the drop-down menu multi-selectable.
`include_blank`		Insert a blank item into the top of options of this drop-down menu.
`first_as_label`		Use the first value as a label.
`data:`(name)	`data:countries`	Get the values from Listo.

These types of tags have one or more values, and the values will be used as options in the drop-down menu.
Example:

[select your-country "China" "India" "San Marino"]

Demo#Demo
Note: This is a demo form and it doesn’t send an email practically.

Select Country (required)
ChinaIndiaSan Marino
Select Sports
FootballTennisPole-vault
Select Fruit (required)
AppleBananaGrape
Select Browser (required)
---FirefoxSafariOperaLynx
Select Ghkdsjdf
fsdfsklgjfkvdrie

View source of the preceding form:

Select Country (required)
[checkbox* your-country use_label_element "China" "India" "San Marino"]

Select Sports
[radio your-sports label_first default:2 "Football" "Tennis" "Pole-vault"]

Select Fruit (required)
[checkbox* your-fruit exclusive "Apple" "Banana" "Grape"]

Select Browser (required)
[select* your-browser include_blank "Firefox" "Safari" "Opera" "Lynx"]

Select Ghkdsjdf
[select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"]

[submit "Send"]

11. Checkboxes, radio buttons, and menus

Checkboxes and radio buttons#Checkboxes and radio buttons

Drop-down menus#Drop-down menus

Demo#Demo