Custom Contact Form 7 Checkboxes , Radio Buttons and Menus in Wordpress

Contact Form 7 provides several types of  checkboxes, radio buttons and drop-down menus. In this article, I will show you detailed information about the usage and semantics of these form tags.

Checkbox, Checkbox* and Radio

Both checkbox and checkbox* represent a group of checkboxes (<input type="checkbox"> in HTML). checkbox* requires the user to check at least one of the boxes.

radio represents a group of radio buttons (<input type="radio"> in HTML). Note that there is no required version of radio (“radio*”). The reason Contact Form 7 doesn’t provide “radio*” is because a radio button is a required field by nature.

Available options for checkbox, checkbox* and radio

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 multipleclass: option.
tabindex:(num)	tabindex:10	tabindex attribute value of the first input element.
default:(num)	default:2 default:1_2_3	Pre-checked 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 (_), asdefault:1_2_3.
label_first		By default, a checkbox or a radio button are put first, and a label last. By adding label_firstoption, you can reverse them.
use_label_element		Wrap each checkbox and radio button with <label> tag.
exclusive		Make checkboxes exclusive. I mean, when you check a checkbox in a group, others are unchecked, so it accepts zero checked or one checked. This is a JavaScript gimmick, so requires JavaScript. Radio button doesn’t support this option.
free_text		Append a free input text field to last item.

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"]

Select and Select*

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.

Available options for select and select*

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 multipleclass: option.
tabindex:(num)	tabindex:10	tabindex attribute value of the select element.
default:(num)	default:2 default:1_2_3	Pre-selected 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 (_), asdefault:1_2_3.
multiple		Make 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.

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

Note: This is a demo. This form doesn’t send a mail practically.

Select Country (required)
 China India San Marino

Select Sports
Football Tennis Pole-vault 

Select Fruit (required)
 Apple Banana Grape

Select Browser (required)
---FirefoxSafariOperaLynx

Select Ghkdsjdf
fsdfsklgjfkvdrie

View source of above 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"]

Tweet