跳转至

WordPress Contact Form 7演习

Exercise in WordPress Contact Form 7

主编：Blues_Tkun

  • DC高等教育教材
  • 通州联合大学教材
  • WordPress系列教材

点此返回 通州联合大学主页

前言

在服务器日常运营中，收集玩家意见、获取玩家反馈是不可或缺的。对此，服务器管理组常年采用问卷星、问卷网等第三方问卷平台进行收集工作。虽然这些第三方问卷平台为服务器工作人员省去了逐个联络的步骤，带来了便利，但这些平台的安全性和网络稳定性仍有待研究。特别是，在DC社群中，有一部分身处海外的玩家。据这些玩家反馈，海外常年难以进入国内的第三方问卷平台网站。这既对玩家带来了麻烦，也为服务器管理工作带来了不便。

为了解决上述问题，官网工作小组于2023年8月在官网引入了WordPress Contact Form 7插件。该插件被认为是WordPress最受欢迎也最易于使用的表单创建和扩展插件，被多个WordPress网站采用。该插件不仅保留了先前提到的第三方问卷平台的优点，还解决了信息安全存疑、境外难以访问等缺点。因此，学会使用WordPress Contact Form 7将为服务器管理工作带来无穷无尽的便利。

通州联合大学的课程一般分为讲义课程和演习课程。前者主要注重理论基础，后者主要注重实践操作。本教材将着重围绕WordPress Contact Form 7插件的使用方法进行说明。由于编者能力有限，文中可能存在纰漏，望各位读者指正。

Blues_Tkun 2023年8月16日于仙台

目录

  • 第一章 表单模板制作
  • 第二章 邮箱设置
  • 结业作业

第一章 表单模板制作

1.1 基本思想

为制作一个问卷，我们首先需要制作一个表单模板（form template）。于目前市面上的第三方问卷平台网站不同的是，创建WordPress Contact Form 7表单时，需要使用独有的源代码进行编辑。不过，WordPress Contact Form 7的源代码并不复杂，仅需了解几个基本思想即可创建出一个完整的问卷。

  1. 使用WordPress Contact Form 7自带的16个标签（文本、邮箱、地址、链接、电话、数值、日期、文本段、下拉式菜单、复选框、单选、按钮、接受、测验、文件、提交）构造出填写/选择区域；
  2. 使用<label>语句对每个标签进行解释；
  3. 在表单模板最后设置[submit "提交"]按钮；
  4. 设置邮箱、留言、额外选项等内容。

其中，第1项中提到的标签里，只有文本、日期、下拉式菜单、复选框、单选按钮、文件、提交这7种标签是十分实用的。本章将重点围绕第1项至第3项进行说明。

1.2 文本标签、日期标签和<label>语句

在一个表单中，与填写者基本信息相关的栏目是不可或缺的。假设我们需要玩家填写玩家ID、QQ号、获取白名单的日期这3个内容，我们可以参照例1和例2进行设置。

例1 基本信息栏目的设置（text标签和<label>语句的运用）

1
2
3
4
5
<label> 您的游戏ID
    [text* your-name] </label>

<label> 您的QQ号
    [text* your-qq] </label>

我们首先关注例1中的第2行和第4行。我们可以注意到，为了获知填写者的游戏ID和QQ号，我们使用了文本（text）这一标签。在text之后的星形符号（*）代表该项目为必填项。your-name和your-qq为变量名，分别代表着游戏ID和QQ号。每个不同项目都需要有不同的变量名，否则会发生错误。在以上内容编辑完毕后，我们需要用中括号[]将上述内容容纳起来，构造出一个输入框。

需要强调的是，之所以变量名不能使用name之类的词语，是因为WordPress Contact Form 7中保留了一些保留词（详见1.5节）。但由于qq并不属于保留词，因此变量名可以更改为qq之类的短词语。

设置好游戏ID和QQ号的输入框（[text* your-name]和[text* your-qq]）后，我们需要使用<label>语句对每个项目进行解释。否则，填写者看到的表单将是像下面一样的2个空白的输入框！ 

1
2
    [（输入栏）]
    [（输入栏）]
将中括号[]之内的内容放在<label>和</label>之中，然后在<label>之后输入栏目名称，即可完成解释工作。这样的话，填写者看到的表单将是如下的画面。 
1
2
3
4
5
您的游戏ID
    [（输入栏）]

您的QQ号
    [（输入栏）]

例2 日期栏目的设置（date标签的运用）

与例1类似，日期标签的设置方法也是基本相同的。如果需要得知玩家的获取白名单日期，我们可以在表单中使用日期（date）标签。 

1
2
<label> 您获取白名单的日期
    [date* your-date] </label>

此时，填写者看到的表单将是如下的画面。填写者既可以使用键盘进行输入，也可以通过点击编辑栏用鼠标设置日期。 

1
2
您获取白名单的日期
    [年/月/日]

1.3 下拉式菜单标签、复选框标签和单选按钮标签

除了文本标签和日期标签以外，下拉式菜单标签、复选框标签和单选按钮标签也是十分重要的。其中，下拉式菜单标签和单选按钮标签适合单选式题目，复选框标签则适合多选式题目。

下面，我们通过例3、例4和例5来感受以上3种标签的不同。

例3 单选题的设置（1：radio标签的运用）

假设我们正在组织一场期末考试。在期末考试中，我们需要设置几个单选题时，则可以参照以下源代码进行设置。 

1
2
3
4
5
6
7
8
<label> 第1题 请在下列聚落中，选择成立时间最早的一个。
    [radio* q1 default:1 "沃克城" "东篱" "文明城"] </label>

<label> 第2题 请在下列聚落和地区中，选择不属于聚落的一个。
    [radio* q2 default:1 "沃克城" "文明城" "西南克克"] </label>

<label> 第3题 以下玩家中，哪位是服主？请选择一个正确选项。
    [radio* q3 default:1 "kunjinkao_xs" "Blues_Tkun" "_xuxu_"] </label>

其中，radio代表单选按钮标签，*代表必填项，q1、q2、q3代表不同题目的变量名，default:1代表默认选项为第1项。

如果上述项目得到正确设置，则作答者看到的表单将是如下画面。 

1
2
3
4
5
6
7
8
第1题 请在下列聚落中，选择成立时间最早的一个。
    ●沃克城   ○东篱   ○文明城

第2题 请在下列聚落和地区中，选择不属于聚落的一个。
    ●沃克城   ○文明城   ○西南克克

第3题 以下玩家中，哪位是服主？请选择一个正确选项。
    ●kunjinkao_xs   ○Blues_Tkun   ○_xuxu_

单选按钮（radio）标签虽然能够直观地呈现出单选题的选项，但是由于默认项目的设置，有可能会让作答者误以为自己作答了所有题目，从而出现跳答、漏答的情况。因此，单选按钮（radio）标签并不一定是最佳选择。

例4 单选题的设置（2：select标签的运用）

1
2
<label> 第1题 请在下列聚落中，选择成立时间最早的一个。
    [select* q1 " " "沃克城" "东篱" "文明城"] </label>
其中，select代表下拉式菜单标签，*代表必填项，q1代表题目的变量名。

此时，作答者看到的表单将是如下画面。 

1
2
第1题 请在下列聚落中，选择成立时间最早的一个。
    [                      ]
如果玩家用鼠标点击作答栏，网页上则会出现“沃克城“、”东篱“、”文明城“这3个选项。

下拉式菜单（select）标签虽然能够避免跳答、漏答的情况，但其单选题的性质并不直观。因此，单选按钮（radio）标签和下拉式菜单（select）标签之间可能不宜任意替换，需要根据实际情况进行表单设计。

例5 多选题的设置（checkbox标签的运用）

1
2
<label> 第4题 请在下列高等院校中，选择所有在沃克城有校区的选项。
    [checkbox* q4 "南岛科学技术大学" "DC交通大学" "通州联合大学" "南柯学院"] </label>
其中，checkbox代表复选框标签，*代表必填项，q4代表题目的变量名。

此时，作答者看到的表单将是如下画面。 

1
2
第4题 请在下列高等院校中，选择所有在沃克城有校区的选项。
    □南岛科学技术大学   □DC交通大学   □通州联合大学   □南柯学院

作答者可以仅选择1个选项，也可以选择多个选项。

1.4 文件标签和提交标签

WordPress Contact Form 7还提供了提交文件的功能。该功能可通过类似于例6的file标签实现。

例6 文件提交栏的设置（file标签的运用）

假设官网工作小组需要制作一个官网投稿表单，那么我们可以通过以下源代码构造出文件提交表单。 

1
2
3
4
<label> 请提交您的稿件
   [file* your-file limit:2000000] </label>

[submit "提交"]
关于第1行至第2行，file为文件标签，*代表必填项，your-file代表文件的变量名，limit:2000000代表文件的限制大小为2000000字节（约为2 MB）。而第3行的[submit "提交"]则为提交按钮。

此时，投稿者看到的表单将是如下的画面。 

1
2
3
4
请提交您的稿件
    [选择文件] 您还没有选择任何文件

[提交]

需要注意的是，所有表单的末尾都需要添加[submit "提交"]这一串源代码。否则，表单管理者将无法获取任何回答情况。关于如何设定提交至哪个指定的电子邮箱，请见第二章。

1.5 保留词

如同Python、C++等编程语言，WordPress Contact Form 7也设有一些保留词，具体有：

1
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

在制作表单时，编辑者不能将这些保留词当做变量名，否则会被提示表单无法运行。

第二章 邮箱设置

相信通过第一章的学习，大家已经明白了如何制作一个WordPress Contact Form 7表单。 然而，如果不适当设置接收邮箱的话，表单管理者将无法接收到任何表单填写者的回答。 本章将引领大家如何设置接收回答的邮箱信息。

2.1 收件人和发件人

在邮箱页面中，我们可以看到有“收件人”、“发件人”、“主题”、“附加标题”、“消息正文”以及“文件附件”等6个项目。其中，收件人和发件人默认为： 

1
2
收件人：[_site_admin_email]
发件人：[_site_title] <wordpress@mcrail.top>

其中，[_site_admin_email]代表网站管理员电子邮箱，[_site_title]代表网站名称（DC商业梦想城）、<wordpress@mcrail.top>为默认发件人邮箱。

在绝大多数情况下，使用本教材的读者是无法登录到网站管理员电子邮箱的。因此，正如例7所示，我们需要将收件人的[_site_admin_email]更改为自己的邮箱。

例7 收件人的设置

假设某位玩家需要使用WordPress Contact Form 7收集其他玩家意见。如果他的电子邮箱为dcniubiforever@dc.mc，则收件人和发件人应当设置为： 

1
2
收件人：dcniubiforever@dc.mc
发件人：[_site_title] <wordpress@mcrail.top>

我们需要注意的是，发件人是不可变更的。否则，回答情况将无法正常发送至收件人邮箱中。

2.2 主题

与传统信件不同的是，电子邮件必须拥有一个标题。WordPress Contact Form 7表单提供了主题和附加标题这2个栏目。附加标题经实测无法达到插件原有效果，故本教材中省去。

WordPress Contact Form 7表单的默认电子邮件主题为： 

1
主题：[_site_title] "[your-subject]"

其中，[_site_title]为网站名称（DC商业梦想城），[your-subject]为表单中的同名变量名。

如果在表单制作者在表单中制作了关于变量名为[your-subject]的栏目，那么默认的电子邮件主题是十分易懂的。然而，在很多情况下，表单中并不一定含有变量名为[your-subject]的栏目。此时，我们需要参考例8来手动更改主题。

例8 电子邮箱主题的设置

如例1所示，假设某位玩家正在制作表单，并且希望电子邮件标题的格式为“沃克城运输公司公路巡线反馈（表单填写者）”，那么应该如下设置标题： 

1
标题：沃克城运输公司公路巡线反馈（[your-name]）

假设一名为Blues_YBX的玩家提交了该表单，那么表单制作者将收到名为沃克城运输公司公路巡线反馈（Blues_YBX）的电子邮件。

2.3 消息正文

所有设置在表单中的变量均可以在消息正文栏目中得到呈现。下面，我们来看一个实战例子（例9）

例9 消息正文的设置

在第5届联合会杯举办前，DC体育联合会曾进行了一次参加意向调查。该调查表单的源代码如下所示。 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<label> 您的游戏名称
    [text* your-name] </label>

<label> 您的QQ
    [text* qq] </label>

<label> 您想代表的聚落和地区代表团
    [text* team] </label>
注意：组委会无法确定您是否可以代表您想代表的聚落和地区代表团参加比赛。具体请见之后出台的相关办法。

<label> 请选择您想参加的项目
    [checkbox* event use_label_element "冰上赛艇淘汰赛" "冰上赛艇积分赛" "冰上竞技" "PVP手撸" "PVP相扑" "PVP对抗" "马术竞速" "马术竞技" "公园式射击" "30米雪球扫雷" "小鸡快跑" "60米固定靶射击" "10米手枪速射" "掘一死战" "织布竞速" "跑酷" "跳台滑翔8米平式" "跳台滑翔15米弧式" "史莱姆跳台标枪" "铁人三项" "公路拉力赛" "飞行技术" "机械三项" "钓鱼" "捕鱼" "足球多人混战制" "史莱姆篮球" "灵叶球" "台球" "户外扫雪" "劈瓜大战"] </label>
注意：本页面仅为意向调查。比赛举办时可以参加此处未勾选的项目，也可以不参加此处勾选的项目。

<label> 请选择您可以参与的时间（8月8日，星期二）
    [checkbox date1 use_label_element "13:00-14:00" "14:00-15:00" "15:00-16:00" "16:00-17:00" "17:00-18:00" "18:00-19:00" "19:00-20:00" "20:00-21:00" "21:00-22:00" "22:00-23:00"] </label>

（省略）

<label> 其他联络事项（可不填写）
    [textarea idea] </label>

[submit "提交"]

假设表单制作者希望得到上述表单中所有变量的信息，则消息正文可以如下设置。 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
消息正文：
    选手信息：[your-name]（[qq]）
    代表团：[team]
    报名项目：[event]
    8月8日：[date1]
    （省略）
    备注：[idea]

    -- 
    这封邮件来自联系表单[_site_title] ([_site_url])

2.4 文件附件

如例10所示，文件附件的设置方法与消息正文类似。

例10 文件附件的设置

假设表单制作者需要得到例6的表单中其他玩家提交的文件（变量名为your-file），那么在文件附件栏目需要如下设置。 

1
文件附件：[your-file]

结业作业

本课程《WordPress Contact Form 7演习》的目的为使学生学会制作一个完整的WordPress Contact Form 7表单。相信读者们通过以上两章的学习，已经达到了本课程的目的。

本课程的结业作业为要求学生制作一个完整的WordPress Contact Form 7表单，具体要求如下：

  • 需要包含文本、日期、提交这3种标签；
  • 需要包含下拉式菜单、复选框、单选按钮这3种标签中的1种及以上；
  • 每个标签需要有合理的说明文字。说明文字需使用<label>语句进行编辑；
  • 收件人电子邮箱设置为学生本人的电子邮箱；
  • 电子邮件的标题任意；
  • 消息正文中需要包括所有表单中出现过的变量。