Contact Form 7 uses “tags” for two purposes; one is for form content and the other is for mail (to, from and subject fields and message body). Tags for form content has different syntax from ones for mail.
Example of a tag used in form content:
[email* your-email 60/200 "your-email@example.com"]
Example of a tag used in mail:
[your-email]
As seen in above examples, a tag for form content generally has more complicated syntax and many options. In the rest of this page, I write mainly about the syntax and options of form content tag.
text, text*, email and email*)textarea and textarea*)select)checkbox)radio)captchac)captchar)A form content tag consists of a type, a name, options (optional) and values (optional).
Here is the syntax rule with my bogus BNF.
form content tag ="[" type name option* value* "]"type ="text" | "text*" | "email" | "email*" | "textarea" | "textarea*" | "select" | "checkbox" | "radio" | "captchac" | "captchar"name =- (same constraint as the
nameattribute of theinputelement)option =space [0-9A-Za-z:#_/-]+value =space ('"' string '"' | "'" string "'")
submit type tag is an exception. It doesn’t have name.
text, text*, email and email*)text, text*, email or email* is replaced by a text input field. The difference among the four types is how input text is validated. text* and email* suppose inputs are not blank, so they are used for required fields. email and email* suppose inputs are email address.[text your-name 40/100 "Your Name"][email* your-email 40/ class:email akismet:author_email](size)/(maxlength) |
Field size and max length. You can omit one of them, like 40/ or /100. |
id:(id) |
id attribute value of the input element. |
class:(class) |
class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [text your-text class:y2008 class:m01 class:d01]. |
akismet:authorakismet:author_urlakismet:author_email
|
Options for using Akismet (spam filter). See here. |
textarea and textarea*)textarea or textarea* is replaced by a text area. textarea* supposes input is not blank, so it is used for required fields. While textarea accepts blank input.
[textarea your-message 40x10](cols)x(rows) |
Columns (width) and rows (height) of text area. You can omit one of them, like 40x or x10 |
id:(id) |
id attribute value of the textarea element. |
class:(class) |
class attribute value of the textarea element. To set two or more classes, you can use multiple class: option, like [textarea your-text class:y2008 class:m01 class:d01]. |
select)select type is replaced by a drop-down menu and its options.
[select your-menu "A" "B" "C"]multiple |
Make drop-down menu multi-selectable. |
include_blank |
Insert a blank item “—” into the top of options of this drop-down menu. |
default:(num) |
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. |
id:(id) |
id attribute value of the select element. |
class:(class) |
class attribute value of the select element. To set two or more classes, you can use multiple class: option, like [select your-menu class:y2008 class:m01 class:d01]. |
checkbox)checkbox type is replaced by a set of checkboxes.
[checkbox your-checkbox "a" "b" "c"]exclusive |
Make checkboxes exclusive. I mean, when you check a checkbox in the set, others are unchecked, so zero checked or one checked. This is a JavaScript gimmick, so JavaScript on client side is needed. |
default:(num) |
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. |
id:(id) |
id attribute value of the span element surrounding checkboxes. |
class:(class) |
class attribute value of the span element surrounding checkboxes. To set two or more classes, you can use multiple class: option, like [checkbox your-checkbox class:y2008 class:m01 class:d01]. |
radio)radio type is replaced by a set of radio buttons.
[radio your-radio "a" "b" "c"]default:(num) |
Pre-checked options. The integer following default: is the position in the order of items. 1 is the first one. |
id:(id) |
id attribute value of the span element surrounding radio buttons. |
class:(class) |
class attribute value of the span element surrounding radio buttons. To set two or more classes, you can use multiple class: option, like [radio your-radio class:y2008 class:m01 class:d01]. |
captchac)captchac type is replaced by a CAPTCHA image. See also how to use CAPTCHA.
[captchac your-captcha size:s fg:#ffffff bg:#000000]size:(sml) |
Image size. Only size:s (60×20), size:m (72×24) and size:l (84×28) are available. |
fg:#(hex) |
Foreground color of the CAPTCHA image. Put RGB color code in hex format after fg:# as fg:#ff0000 |
bg:#(hex) |
Background color of the CAPTCHA image. Put RGB color code in hex format after bg:# as bg:#ff0000 |
id:(id) |
id attribute value of the img element for the CAPTCHA image. |
class:(class) |
class attribute value of the img element for the CAPTCHA image. To set two or more classes, you can use multiple class: option, like [captchac your-captcha class:y2008 class:m01 class:d01]. |
captchar)captchar type is replaced by a CAPTCHA text input field. See also how to use CAPTCHA.
[captchar your-captcha 40/100](size)/(maxlength) |
Field size and max length. You can omit one of them, like 40/ or /100. |
id:(id) |
id attribute value of the input element. |
class:(class) |
class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [captchar your-captcha class:y2008 class:m01 class:d01]. |