English 
Japanese Contact Form 7 provides several types of form tags for representing 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. The HTML spec document explains it more in detail.
| 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:2default: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 (_), 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. 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. |
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.
| 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:2default: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 (_), as default: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. |
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"]See also
Demo
Note: This is a demo. This form doesn’t send a mail practically.
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"]
Great work! Congratulations and thank you for the plugin. It will be really nice to have SELECT values to be different than the visible text. Something like below.
[select contact-reason "I have a question:Question" "I have a concern:Concern" "Other:Other"]
Kind regards,
Harry
I should have explained the reason form my request. For better user experience the visible value of a selection option could be a longer phrase like “I have a question about your services” that may be too long for appending or prepending to, for example, the email subject line which may already be too long. A compact value like “question” would work precisely and give the ability to filter incoming emails. Thanks.
Maybe you can get it by utilizing the ‘pipe’ feature described in this entry.
Selectable Recipient with Pipes
How would I stack radio button values one above the other and so on?
You may find this helpful:
Custom Layout for Checkboxes and Radio Buttons
Great plugin, thanks Takayuki San.
Until now I see many use of radio and select, but I would like to know how obtain a button to select the simple choose to have CC copy:
“Do you want a Carbon Copy of your email?”
And another (different) button with:
“Yes I want to subscribe the mailing list!”
Thanks again.
hajimemashite …..(I used to work for Toyota!)
Crackerjack plugin, many thanks for producing it for free! I don’t want to sound ungrateful but if I could request a future add-on where a drop-down date list could be validated to fail on a past date… e.g. if I picked a date of Dec-09 when it’s already Jan-10 to get the red box and a fail message would be perfect…
Many thanks again..
First off, awesome plug-in. So far, it’s doing everything that I need.
Thanks to your tutorial, I was able to add a drop-down menu with 3 choices to choose from for the Subject line. Is it possible to configure one of the choices in the drop-down menu so that, when chosen, will add a few lines in the “Your Message” box? For example, a site that I am working on is for a Catholic church and school. One of the choices under the drop-down menu is “Alumni Update”. I would like to be able to add a couple of questions to be answered in the Message Box when Alumni Update is chosen. Then, when the submit button is pressed, the message with the requested info is sent on its way. I hope I didn’t just confuse everyone.
Thanks, again, for the great plug-in!