This page explains the syntax of Contact Form 7‘s tag. If you are not familiar with basic usage of Contact Form 7, please see the plugin’s homepage.
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.
Contents
- Base syntax of form content tag
- Tags for text field (
text
,text*
,email
andemail*
) - Tags for text area (
textarea
andtextarea*
) - Tags for drop-down menu (
select
) - Tags for checkboxes (
checkbox
) - Tags for radio buttons (
radio
) - Tags for CAPTCHA image (
captchac
) - Tags for CAPTCHA text field (
captchar
)
Base syntax of form content tag
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
name
attribute of theinput
element)option =
space [0-9A-Za-z:#_/-]+
value =
space ('"' string '"' | "'" string "'")
submit
type tag is an exception. It doesn’t have name.
Tags for text field (text
, text*
, email
and email*
)
- Description
- A tag with type of
text
,text*
,email
oremail*
is replaced by a text input field. The difference among the four types is how input text is validated.text*
andemail*
suppose inputs are not blank, so they are used for required fields.email
andemail*
suppose inputs are email address. - Example
[text your-name 40/100 "Your Name"]
[email* your-email 40/ class:email akismet:author_email]
- Options
-
(size) /
(maxlength)Field size and max length. You can omit one of them, like 40/
or/100
.id:
(id)id
attribute value of theinput
element.class:
(class)class
attribute value of theinput
element. To set two or more classes, you can use multipleclass:
option, like[text your-text class:y2008 class:m01 class:d01]
.akismet:author
akismet:author_url
akismet:author_email
Options for using Akismet (spam filter). See here. - Values
- A tag with this type can accept only one value and the value is used as default input value.
Tags for text area (textarea
and textarea*
)
- Description
-
A tag with type of
textarea
ortextarea*
is replaced by a text area.textarea*
supposes input is not blank, so it is used for required fields. Whiletextarea
accepts blank input. - Example
[textarea your-message 40x10]
- Options
-
(cols) x
(rows)Columns (width) and rows (height) of text area. You can omit one of them, like 40x
orx10
id:
(id)id
attribute value of thetextarea
element.class:
(class)class
attribute value of thetextarea
element. To set two or more classes, you can use multipleclass:
option, like[textarea your-text class:y2008 class:m01 class:d01]
. - Values
- A tag with this type can accept only one value and the value is used as default input value.
Tags for drop-down menu (select
)
- Description
- A tag with
select
type is replaced by a drop-down menu and its options. - Example
[select your-menu "A" "B" "C"]
- Options
-
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), asdefault:1_2_3
.id:
(id)id
attribute value of theselect
element.class:
(class)class
attribute value of theselect
element. To set two or more classes, you can use multipleclass:
option, like[select your-menu class:y2008 class:m01 class:d01]
. - Values
- A tag with this type can accept multiple values. The values are used as options of the selection.
Tags for checkboxes (checkbox
)
- Description
- A tag with
checkbox
type is replaced by a set of checkboxes. - Example
[checkbox your-checkbox "a" "b" "c"]
- Options
-
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), asdefault:1_2_3
.id:
(id)id
attribute value of thespan
element surrounding checkboxes.class:
(class)class
attribute value of thespan
element surrounding checkboxes. To set two or more classes, you can use multipleclass:
option, like[checkbox your-checkbox class:y2008 class:m01 class:d01]
. - Values
- A tag with this type can accept multiple values. The values are used as checkbox values.
Tags for radio buttons (radio
)
- Description
- A tag with
radio
type is replaced by a set of radio buttons. - Example
[radio your-radio "a" "b" "c"]
- Options
-
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 thespan
element surrounding radio buttons.class:
(class)class
attribute value of thespan
element surrounding radio buttons. To set two or more classes, you can use multipleclass:
option, like[radio your-radio class:y2008 class:m01 class:d01]
. - Values
- A tag with this type can accept multiple values. The values are used as radio button values.
Tags for CAPTCHA image (captchac
)
- Description
- A tag with
captchac
type is replaced by a CAPTCHA image. See also how to use CAPTCHA. - Example
[captchac your-captcha size:s fg:#ffffff bg:#000000]
- Options
-
size:(sml)
Image size. Only size:s
(60×20),size:m
(72×24) andsize:l
(84×28) are available.fg:#
(hex)Foreground color of the CAPTCHA image. Put RGB color code in hex format after fg:#
asfg:#ff0000
bg:#
(hex)Background color of the CAPTCHA image. Put RGB color code in hex format after bg:#
asbg:#ff0000
id:
(id)id
attribute value of theimg
element for the CAPTCHA image.class:
(class)class
attribute value of theimg
element for the CAPTCHA image. To set two or more classes, you can use multipleclass:
option, like[captchac your-captcha class:y2008 class:m01 class:d01]
. - Values
- A tag with this type can not accept values.
Tags for CAPTCHA text field (captchar
)
- Description
- A tag with
captchar
type is replaced by a CAPTCHA text input field. See also how to use CAPTCHA. - Example
[captchar your-captcha 40/100]
- Options
-
(size) /
(maxlength)Field size and max length. You can omit one of them, like 40/
or/100
.id:
(id)id
attribute value of theinput
element.class:
(class)class
attribute value of theinput
element. To set two or more classes, you can use multipleclass:
option, like[captchar your-captcha class:y2008 class:m01 class:d01]
. - Values
- A tag with this type can accept only one value and the value is used as default input value.
102 replies on “Contact Form 7 tag syntax”
In traditional HTML, “checkbox” and “radio” elements do the opposite of what your “checkbox” and “radio” elements do:
“checkbox” elements typically create a group from which any number of “checkboxes” can be selected. This posts an array of values, each with the “checkbox” group “name”, but with iterative values reflecting which “checkboxes” were selected.
“radio” elements typically create a group from which only a single element may be selected. This posts a single entity name and value.
If “2” and “3” are selected, this posts:
groupnam[]=2&groupnam[]=3
also available as:
groupnam(2, 3)
Since only one “radio” element can be selected (no Javascript required), this returns:
radionam=2 (when “2” is selected)
I am curious as to why you decided to switch this standard HTML functionality for this plugin? Why require Javascript to do (with checkbox elements) what the form elements do by design (with radio elements)?
Hi Miyoshi, I was wondering how to replace the “–” from include_blank dropdown with another word?
Thanks, great plugin!