Contact Form 7 联系表单入门

Contact Form 7 联系表单入门

本指南介绍了 WordPress 的 Contact Form 7 插件。需要 WordPress 管理的基本知识。本教程通过各种示例说明了如何在页面上显示表单,以及如何自定义表单和邮件。

显示表格

让我们从在您的页面上显示一个表单开始。首先,打开 WordPress 管理屏幕上的联系 > 联系表单菜单。您可以在那里管理多个联系表格。

联系表 7 的管理屏幕截图

 

安装 Contact Form 7 插件后,您将看到一个名为 「Contact form 1」 的默认表单,以及如下代码:

[contact-form-7 id="1234" title="Contact form 1"]

复制此代码。然后,打开您希望在其中放置联系表格的页面 (页面 > 所有页面) 的编辑菜单。一种流行的做法是为联系表单页面创建一个名为 「Contact」 的页面。将您复制的代码粘贴到页面内容中。

联系表格 7 5.3 及更高版本支持块编辑器的联系表格选择器块。此块允许您简单地从您定义的联系表格列表中选择一个联系表格,而不是复制和粘贴短代码。

联系表单选择器块的屏幕截图
联系表单选择器块的屏幕截图

 

联系表单短代码仍然可用,当您想要添加自定义属性时,或者当您有太多联系表单无法在单个列表中显示时,您会发现它们非常有用。

现在您的联系表格设置已完成。您网站的访问者现在可以找到该表单并开始向您提交消息。

接下来,让我们看看如何自定义表单和邮件内容。

自定义表单

您可能会觉得默认表单对您来说太简单了,并且想要向其中添加更多字段。您可以在管理屏幕中编辑表单模板。

要将字段添加到表单,请为它们制作标签并将它们插入到 「表单」 选项卡面板中的表单模板中。您会在表单模板中发现不熟悉的代码,例如 [text* your-name]. 这些代码在联系表 7 的词汇表中称为 「标签」 。

标签的语法相当复杂,但别担心!你不必学习它。您可以使用标签生成器工具生成任意数量的标签

标签中的第二个字是它的名字。例如,名称 [text* your-name]为 「您的姓名」 。此名称很重要,因为它稍后会在您的邮件模板中使用。

自定义邮件

您可以像使用表单模板一样在 「邮件」 选项卡面板中编辑邮件模板。您也可以在那里使用标签,但请注意邮件标签与表单标签不同。

您可以在邮件模板中使用的标签在括号中仅包含一个单词,看起来像 [your-name]. 您应该知道这个 「您的名字」 与前面示例中提到的表单标签的名称相同。这两个标签具有相同的名称。

在邮件中,[your-name]将被用户的输入值替换,该值通过相应的表单字段提交,在本例中为 [text* your-name]

也可以看看

标签的工作原理

标签的工作原理

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

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

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

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

表单标签示例

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

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

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

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

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

表单标签类型列表

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

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

邮件标签示例

编辑表单模板

编辑表单模板

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

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

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

「表单」 选项卡面板的屏幕截图

 

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

设置邮件

设置邮件

您可以非常灵活地编辑电子邮件模板。不仅是邮件正文,您还可以编辑邮件标题字段。如果需要,您甚至可以在消息中使用 HTML 。

您可以在 「邮件」 选项卡面板中编辑电子邮件模板。

邮件选项卡的屏幕截图
邮件标签面板

字段到场

在此处设置收件人电子邮件地址。您可以在此字段中使用邮件标签

在有效的邮箱语法中指定值,否则您将收到配置错误

从字段来自外地

在此处设置发件人电子邮件地址。您可以在此字段中使用邮件标签

此字段值应该是与网站属于同一域的电子邮件地址。否则你会得到一个配置错误

主题字段学科领域

在这里设置消息的主题。您可以在此字段中使用邮件标签

附加标题附加标题

您可以在此处插入其他消息头字段,例如 Cc 和 Bcc 。每行应该有一个字段。您可以在这些字段中的任何位置嵌入邮件标签

消息正文邮件正文

这是消息体;您可以在该字段的任何位置嵌入邮件标签

如果您选中从输出中排除带有空白邮件标签的行复选框,则包含具有空值的邮件标签的行将从实际电子邮件输出的邮件正文中排除。

默认情况下,纯文本用于消息正文。要使用 HTML,请选中使用 HTML 内容类型复选框。

文件附件文件附件

如果您将上传的文件附加到此电子邮件,请将上传文件的邮件标签放入文件附件字段。您还可以从服务器附加文件 (本地文件附件) 。

邮件 (2) 邮件 (2)

邮件 (2) 是一个附加的邮件模板。它通常用作自动回复器,但您可以将其用于任何目的。仅当主邮件已成功发送时才发送邮件 (2) 。

也可以看看

Editing messages

Editing messages

You can edit messages used in various situations in the Messages tab panel. Some messages are notifications to the submitter of the status of the contact form, such as:

Thank you for your message. It has been sent.One or more fields have an error. Please check and try again.

Other messages are notifications that there is a validation error in the input field:

This field is required.This telephone number is invalid.

HTML tags or entities cannot be used in a message, so use plain text only. You』ll see a warning when you insert HTML into a message.

On the other hand, you can use Contact Form 7』s mail-tags in a message. This may be useful when you want to embed a user input into a message, like the following example:

Thanks [your-name], your message has been sent!

This [your-name] is a mail-tag that will be replaced with an actual user input through the your-name field.

See also

Contact form in your language explains how you can get the messages localized.
Share this:FacebookTwitterLike this:Like Loading...

其他设置

其他设置

您可以通过将特定格式的代码片段添加到联系表单编辑器屏幕的 「附加设置」 选项卡面板中,为每个联系表单添加附加设置。

默认情况下,Contact Form 7 支持以下类型的设置。

仅限订阅者模式

subscribers_only: true

您可能希望确保只有登录用户才能提交您的联系表单。在这种情况下,请使用仅限订阅者模式。在此模式下,未登录用户无法提交联系表单,并且会看到一条消息,通知他们需要登录,而登录用户可以照常使用。

在仅限订阅者模式下,不会为联系表单提供反垃圾邮件验证,因为只有受欢迎的人才能使用它们。如果此假设不适用于您的站点,则仅限订阅者模式可能不是您的好选择。

演示模式

demo_mode: on

如果您 demo_mode: on 在 「附加设置」 字段中进行设置,则联系表单将处于演示模式。在这种模式下,联系表单将跳过发送邮件的过程,只显示 「成功完成」 作为响应消息。

跳过邮件

skip_mail: on

该 skip_mail 设置的工作方式与 几乎相同 demo_mode,但 skip_mail 仅跳过邮件发送。与 不同 demo_mode,skip_mail 不会影响其他活动,例如使用 Flamingo 存储消息。

验收作为验证

acceptance_as_validation: on

默认情况下,接受复选框的行为与其他类型的字段不同;即使未选中该框,它也不会显示验证错误消息。如果您 acceptance_as_validation: on 在 「其他设置」 字段中进行设置,则联系表单中的接受复选框的行为方式与其他表单字段相同。

有关详细信息,请参阅接受复选框

火烈鸟设置

您可以自定义 Flamingo 管理屏幕中显示的主题和发件人字段值。有关更多详细信息,请参阅使用 Flamingo 保存提交的消息

抑制消息存储

do_not_store: true

此设置告诉消息存储模块,例如 Flamingo,不要通过此联系表单存储消息。

JavaScript 代码

on_sent_ok: "alert('sent ok');"
on_submit: "alert('submit');"

如果设置 on_sent_ok: 后跟一行 JavaScript 代码,则可以告诉联系表单邮件发送成功时应执行的代码。同样,使用 on_submit:,您可以告诉在提交表单时应该执行的代码,而不管结果如何。

另请参阅:使用 Google Analytics 跟踪表单提交在提交后重定向到另一个 URL

注意: on_sent_okon_submit 已从联系表 7 5.0 中正式删除。您可以使用 DOM 事件代替这些设置。

与外部 API 集成

与外部 API 集成

这个联系表单插件的内置功能是有限的,但是,在各种外部服务的帮助下,您的联系表单的可能性是无限的。

您可以在 联系 > 集成 中管理与外部 API 的集成。列出了多个类别的服务。如果您对这些服务感兴趣,请访问他们的说明页面以了解更多信息。

文本字段

文本字段

文本输入字段是联系表单中最常见的因素。您可能知道,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 "发送"]

Number fields

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...

Date field

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...