Author 诗语

管理员画面

 

此联系表的标题 (❶) 。此标题只是联系表格的标签，仅用于管理目的。您可以使用任何您喜欢的标题，例如 「求职申请表」 、 「2014/02/14 活动表格」 等。

此联系表格的简码 (❷) 。复制此代码并将其粘贴到您要放置此联系表单的帖子、页面或文本小部件内容中。

您可以在此处保存、复制或删除此联系表格 (❸) 。

表格选项卡

 

表格编辑栏 （❷） 。您可以在此处使用 HTML 和 form-tags 自定义表单内容。此字段中的换行符和空行会自动使用<br /> 和<p>HTML 标记进行格式化。

标签生成器 (❶) 。通过使用这些标签生成器，您可以在不了解它们的情况下生成表单标签。

有关表单标签的更多信息，请参阅编辑表单模板和标签的工作原理。

邮件标签

 

您可以编辑作为表单提交结果发送的邮件的邮件模板。您可以在这些字段中使用邮件标签。

Mail(2) 模板是一个附加的邮件模板，它可以具有与主邮件模板不同的内容，也可用。

有关更多信息，请参阅设置邮件。

消息选项卡

 

您可以编辑用于各种情况的消息，包括 「发生验证错误」 、 「请填写必填字段」 等。

请注意，此处仅提供纯文本。不允许在消息字段中使用 HTML 标记和实体。

有关更多信息，请参阅编辑消息。

附加设置选项卡

 

您可以在此处添加自定义代码片段。有关详细信息，请参阅其他设置。

Acceptance checkbox

An acceptance checkbox is a simple checkbox dedicated to confirming the submitter』s consent for a specific condition. Contact Form 7 provides the acceptance form-tag type to represent acceptance checkboxes.

To use an acceptance checkbox in your contact form, simply insert an [acceptance] form-tag into the Form tab panel field like this:

[acceptance your-consent] I consent to the conditions. [/acceptance]

Notice that, unlike other form-tag types, the [acceptance] tag has a closing tag ([/acceptance]) at the tail. The part between the opening and closing tags is the content of the form-tag. When you set content to an acceptance checkbox form-tag, it is interpreted as the condition for consent.

If you use Flamingo to store submission data to the database, the information about submitters』 consent will also be stored, and Flamingo allows you to do future reference.

By default, an acceptance checkbox works as a required field, so you can』t submit the form without selecting the checkbox. If you set the optional option explicitly, the checkbox works as an optional field. If you set the invert option, it will invert the behavior so, in this case, you can』t submit the form without clearing the checkbox.

OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [acceptance accept-this class:y2008 class:m01 class:d01].optional The acceptance checkbox works as an optional field.invert Allow users to submit only if they clear the checkbox.default:on The checkbox is selected by default.

Demo

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

1) Default
Check here if you accept these terms.
2) Inverted
Uncheck here if you accept these terms.
3) Selected by default + Inverted
Uncheck here if you accept these terms.

Δ

View source of the preceding form:

1) Default
[acceptance accept-this-1] Check here if you accept these terms. [/acceptance]

2) Inverted
[acceptance accept-this-2 invert] Uncheck here if you accept these terms. [/acceptance]

3) Selected by default + Inverted
[acceptance accept-this-3 invert default:on] Uncheck here if you accept these terms. [/acceptance]

[submit "Send"]

Acceptance as validation#Acceptance as validation

By default, an acceptance checkbox is a different mechanism than general input validation, and it runs after all validation succeeds. You might want to change this behavior to make it work like other validation because you think it』s less confusing for submitters than the default behavior. In such cases, add this line to the Additional Settings section:

acceptance_as_validation: on

This setting makes all acceptance checkboxes in the form work like validation, and shows the usual validation error message next to the checkbox if the submitter doesn』t check the box.

See also

How to make privacy-friendly contact forms

Share this:FacebookTwitterLike this:Like Loading...

文本字段

文本输入字段是联系表单中最常见的因素。您可能知道，HTML 有两种类型的文本输入字段元素：<input type="text"> 用于单行输入；和<textarea> 多行输入。

Contact Form 7 提供了几种类型的表单标签来表示这两种类型的 HTML 元素：文本字段（text 和 text*）；电子邮件字段（email 和 email*）；电话号码字段（tel 和 tel*）；URL 字段（url 和 url*）；和文本区域（textarea 和 textarea*） 。在本文中，我将向您展示有关这些表单标签的用法和语义的详细信息。

文本域

两个 text 和 text*用于单行输入和接受任何形式的文字。它们之间的区别在于表示 text*必填字段。在联系表格 7 的约定中，所有类型的带有星号 「*」 的标签表示这些都是必填字段。

选项	例子	描述
id:（ID）	id:foo	idinput 元素的属性值。
class:（班级）	class:bar	classinput 元素的属性值。要设置两个或更多类，您可以使用多个 class: 选项，例如 [text your-text class:y2008 class:m01 class:d01].
minlength:(数量)	minlength:10	此输入字段允许的最小长度。
maxlength:(数量)	maxlength:90	此输入字段允许的最大长度。
size:(数量)	size:50	size 此输入字段的 HTML 属性值。
akismet:author		使用 Akismet 的选项。
placeholder watermark		将该值用作占位符文本而不是默认值。 watermark 作为 的别名工作 placeholder 。
default:user_login default:user_first_name default:user_last_name default:user_nickname default:user_display_name		用于检索登录用户信息作为字段默认值的选项。

这些字段的值可以为零或一，该值将用作输入字段的默认值。

例子：

[text* your-name class:required "John Smith"]

电子邮件字段

这两个 email 和 email*是单行输入，只接受电子邮件地址。 email*是必填字段。

选项	例子	描述
id:（ID）	id:foo	idinput 元素的属性值。
class:（班级）	class:bar	classinput 元素的属性值。要设置两个或更多类，您可以使用多个 class: 选项，例如 [email your-email class:y2008 class:m01 class:d01].
minlength:(数量)	minlength:10	此输入字段允许的最小长度。
maxlength:(数量)	maxlength:90	此输入字段允许的最大长度。
size:(数量)	size:50	size 此输入字段的 HTML 属性值。
akismet:author_email		使用 Akismet 的选项。
placeholder watermark		将该值用作占位符文本而不是默认值。 watermark 作为 的别名工作 placeholder 。
default:user_email		用于检索登录用户信息作为字段默认值的选项。

这些字段的值可以为零或一，该值将用作输入字段的默认值。

例子：

[email your-email "[email protected]"]

网址字段

这两个 url 和 url*是单行输入，只接受 URL 。 url*是必填字段。

选项	例子	描述
id:（ID）	id:foo	idinput 元素的属性值。
class:（班级）	class:bar	classinput 元素的属性值。要设置两个或更多类，您可以使用多个 class: 选项，例如 [url your-url class:y2008 class:m01 class:d01].
minlength:(数量)	minlength:10	此输入字段允许的最小长度。
maxlength:(数量)	maxlength:90	此输入字段允许的最大长度。
size:(数量)	size:50	size 此输入字段的 HTML 属性值。
akismet:author_url		使用 Akismet 的选项。
placeholder watermark		将该值用作占位符文本而不是默认值。 watermark 作为 的别名工作 placeholder 。
default:user_url		用于检索登录用户信息作为字段默认值的选项。

这些字段的值可以为零或一，该值将用作输入字段的默认值。

例子：

[url your-url "http://example.com"]

电话号码字段

这两个 tel 和 tel*是单行输入，只接受电话号码。 tel*是必填字段。

选项	例子	描述
id:（ID）	id:foo	idinput 元素的属性值。
class:（班级）	class:bar	classinput 元素的属性值。要设置两个或更多类，您可以使用多个 class: 选项，例如 [url your-url class:y2008 class:m01 class:d01].
minlength:(数量)	minlength:10	此输入字段允许的最小长度。
maxlength:(数量)	maxlength:90	此输入字段允许的最大长度。
size:(数量)	size:50	size 此输入字段的 HTML 属性值。
placeholder watermark		将该值用作占位符文本而不是默认值。 watermark 作为 的别名工作 placeholder 。

这些字段的值可以为零或一，该值将用作输入字段的默认值。

例子：

[tel your-tel "123-456-7890"]

文本区

这两个 textarea 和 textarea*是一个多行输入和接受任何形式的文本。 textarea*是必填字段。

选项	例子	描述
id:（ID）	id:foo	idtextarea 元素的属性值。
class:（班级）	class:bar	classtextarea 元素的属性值。要设置两个或更多类，您可以使用多个 class: 选项，例如 [textarea your-text class:y2008 class:m01 class:d01].
minlength:(数量)	minlength:10	此输入字段允许的最小长度。
maxlength:(数量)	maxlength:90	此输入字段允许的最大长度。
placeholder watermark		将该值用作占位符文本而不是默认值。 watermark 作为 的别名工作 placeholder 。

这些字段可以有零个或一个值，该值将用作输入字段的默认值。

例子：

[textarea your-message "your message here …"]

还有另一种方法可以为 textarea 字段设置默认值：

[textarea your-message]
 foo
 bar
[/textarea]

通过这种方式，您可以设置多行默认值。

演示

注意：这是一个演示。这种形式实际上不发送邮件。

 

查看上述表格的来源：

您的姓名 （必填）
[text* your-name size:30 maxlength:60]

您的邮箱 （必填）
[email* your-email "[email protected]"]

您的留言
[textarea your-message]
default value for a textarea
can be multi-line
like this
[/textarea]

[submit "发送"]

标签的工作原理

您可以使用各种类型的标签 （用方括号括起来的字符串） 来编辑表单和电子邮件的模板。 Contact Form 7 为表单模板和电子邮件模板提供了两种不同类型的标签：form-tags 和 mail-tags 。

这两种类型的语法完全不同。例如，您 [text* your-name]在表单模板和 [your-name]电子邮件模板中使用。

表单标签语法#表单标签语法

表单模板中的标签 (form-tag) 将被替换为 HTML 代码段，该代码段在呈现表单时表示输入字段。表单标签的组件可以分为四部分：类型、名称、选项和值。

类型是最重要的因素，因为它定义了将替换自己的 HTML 元素的类型，以及期望通过它的输入类型。

名称用于标识输入字段。大多数表单标签都有一个名称，但也有例外。

选项指定行为和外观的细节。选项是可选的。

在大多数情况下，值用于指定默认值。这些值也可能用于其他目的；这取决于标签的类型。值是可选的。

请注意，这些部分的顺序很重要。选项不能在名称之前，值不能在选项之前。

表单标签类型列表

• 文本字段（text，text*，email，email*，tel，tel*，url，url*，textarea 和 textarea*）
• 数字字段（number，number*，range 和 range*）
• 日期字段（date 和 date*）
• 复选框，单选按钮，和菜单（checkbox，checkbox*，radio，select 和 select*）
• 文件上传字段（file 和 file*）
• 测验( quiz)
• 接受复选框( acceptance)
• 提交按钮( submit)

邮件标签语法#邮件标签语法

邮件模板 (mail-tag) 中的标签要简单得多。邮件标签中只有一个词。在大多数情况下，这个词对应一个表单标签的名称，它会被通过它输入的表单替换。

Hidden field

A hidden field is a special input field whose value is sent with a form submission like other fields, but the field itself is not rendered and invisible on the front end.

Contact Form 7 supports the hidden form-tag type to represent hidden fields.

OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [hidden your-text class:y2008 class:m01 class:d01].default:(source)  Getting default values from the context Setting default values to the logged-in user Getting default values from shortcode attributes

Example:

[hidden your-email default:user_email "[email protected]"]
Share this:FacebookTwitterLike this:Like Loading...

Number fields

A number field is a field for numeric value input. Contact Form 7 3.4 and higher provides two types of form-tag for number fields: number and range. These work the same except that they provide different types of user interface.

The new form-tag types, number and range, correspond with the HTML5 input types number and range, respectively. Currently, only some modern browsers support these input types.

Even among modern browsers, there may be differences in how those input fields are rendered on screen. In most cases, a number input is rendered as a spinner control while a range input is rendered as a slider control.

Older browsers and some modern browsers don』t support these input types and just render them as traditional text input fields.

Number field#Number field

Both number and number* are used for number input and accept numeric value. number* is a required field.

OptionExamplesDescriptionmin:(num)min:10min attribute value of the input element. Allowed minimum value for this field.max:(num)max:99max attribute value of the input element. Allowed maximum value for this field.step:(num)step:3step attribute value of the input element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …id:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [number your-text class:y2008 class:m01 class:d01].placeholderwatermark Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[number* your-number min:10 max:99 step:3 class:required "40"]

Range field#Range field

Both range and range* are used for number input and accept numeric value. range* is a required field.

OptionExamplesDescriptionmin:(num)min:10min attribute value of the input element. Allowed minimum value for this field.max:(num)max:99max attribute value of the input element. Allowed maximum value for this field.step:(num)step:3step attribute value of the input element. When minimum number is 10 and step is 3, acceptable inputs are 10, 13, 16, 19, …id:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [number your-text class:y2008 class:m01 class:d01].placeholderwatermark Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[range* your-range min:10 max:99 step:3 class:required "40"]
Share this:FacebookTwitterLike this:Like Loading...

编辑表单模板

您可以在 「表单」 选项卡面板中编辑联系表单的表单模板。 HTML 和 Contact Form 7 的表单标签可用于表单模板。

表单标签用作 HTML 表单控件 （例如文本输入字段） 或一组表单控件 （例如一组复选框） 的占位符。呈现表单时，表单标签被 HTML 替换。

表单标签必须遵循特定的语法规则。否则，表单标签将无法正常工作。不过，没有必要记住语法，因为您可以使用标签生成器工具来生成正确的表单标签。

 

请注意，表单模板中的更改不会自动反映在联系表单的邮件设置中。因此，如果您已将表单标签添加到表单模板，则需要在 「邮件」选项卡面板中的邮件设置中手动添加相应的邮件标签。

Submit button

A submit button is an essential component of a form. As you may know, HTML represents a submit button as an input element with submit type: . You can use this HTML tag in a contact form of Contact Form 7, but you should use Contact Form 7』s own submit form-tag instead.

This is the simplest form of submit tag:

[submit]

You can add a value like this:

[submit "Send Mail"]

Did you notice that the submit tag』s syntax is bit different than other form-tags? The submit tag does not have name part, which other form tags have.

In addition to this, you can add several options to submit tag.

OptionExamplesDescriptionid:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [submit class:y2008 class:m01 class:d01].

Example:

[submit class:button id:form-submit "Send Mail"]
Share this:FacebookTwitterLike this:Like Loading...

Date field

HTML5 has introduced date input type. Browsers supporting this input type render a date field as a calendar-style date picker UI that you choose a date from. Contact Form 7 supports date and date* types of form-tag that correspond with date input type.

Currently, only some modern browsers support this date input type. Older browsers and some modern browsers including Firefox don』t support this input type and just render it as a traditional text input field. Fortunately, Contact Form 7 can provide a fallback for those browsers.

If a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08) according to the HTML5 specification. This is in most cases you don』t need to care about because browser』s date picker UI will set a value in the correct format.

OptionExamplesDescriptionmin:(date)min:2013-01-01min attribute value of the input element. Allowed minimum value for this field. You can use a relative date format as well.max:(date)max:2013-12-31max attribute value of the input element. Allowed maximum value for this field. You can use a relative date format as well.step:(num)step:3step attribute value of the input element. When minimum date is 2013-01-01 and step is 3, acceptable inputs are 2013-01-01, 2013-01-04, 2013-01-07, …id:(id)id:fooid attribute value of the input element.class:(class)class:barclass attribute value of the input element. To set two or more classes, you can use multiple class: option, like [date your-date class:y2008 class:m01 class:d01].placeholderwatermark Use the value as placeholder text instead of as default value. watermark works as an alias of placeholder

These fields can have a zero or one value, and the value will be used as the default value of the input field.

Example:

[date* your-date min:2013-01-01 max:2013-12-31 step:7 class:required "2013-04-01"]

Specifying a date with relative date formats#Specifying a date with relative date formats

As well as YYYY-MM-DD format, you can use relative date formats to specify a date used in a date or date* form-tag. Contact Form 7 5.3 and later allows you to use all date formats that the DateTimeImmutable class supports.

Using this technique, you can specify a date with natural expressions—such as 「next Friday」, seen in the following example form-tag:

[date date-123 "next Friday"]

When you use date formats in a form-tag option, be aware that you are not allowed to use a space in an option value (as a space is used as the delimiter for options) and that you need to use an underscore (_) as substitute for a space. For example:

[date date-123 max:next_Friday+7days "next Friday"]

Format date value in mail#Format date value in mail

As previously explained, if a value is specified in a date field, the value must be in YYYY-MM-DD format (e.g. 2013-04-08). When the value is inserted into mail template, the date format keeps by default. To change the format in mail, you can use a variant of mail-tag notation [_format_{field name} "{date format}"].

Example:

[_format_your-date "D, d M y"]

D, d, M, and y in the above example are date format character described in the manual page of PHP date() function. "D, d M y" will format 2013-04-08 as Mon, 08 Apr 13. As the format is affected by localization, with the same "D, d M y" format, 2013-04-08 will become 月, 08 4 月 13 in Japanese-localized WordPress.
Share this:FacebookTwitterLike this:Like Loading...