如何为WordPress网站配置Contact Form 7

如何为WordPress网站配置Contact Form 7

在2022年,与观众保持联系非常重要。使用MailChimp等服务建立电子邮件列表可帮助您将内容直接发送给订阅者。

电子邮件列表很棒,但如果读者或潜在客户想直接与您联系怎么办?这就是联系表格的来源!在本文中,我们将介绍如何为您的WordPress网站配置流行的Contact Form 7插件。

  1. 如何安装Contact Form 7
  2. 拥有联系表的利弊
  3. Contact Form 7设置概述
  4. 如何创建WordPress联系表
  5. 如何使用表单标签构建联系表单
  6. 在Contact Form 7中配置邮件设置
  7. Contact Form 7邮件递送问题
  8. Contact Form 7表格提交消息
  9. 如何保护您的联系表

如何安装Contact Form 7

Contact Form 7自2009年以来一直存在,在过去十年中获得了超过500万次下载。Contact Form 7可以直接从WordPress插件库安装。如果您搜索“Contact Form 7”,您将能够找到该插件以及各种附加组件。

安装Contact Form 7插件

安装Contact Form 7插件

安装插件后,您会在WordPress仪表盘的侧边栏中看到一个标有“Contact”的菜单项。在这里可以配置Contact Form 7的所有设置。

自定义Contact Form 7设置

自定义Contact Form 7设置

联系表单的利弊

在我们深入研究如何为您的WordPress网站配置Contact Form 7之前,让我们快速了解一下向您的网站添加联系表格的一些利弊。

拥有联系表的优点

  1. 联系表格允许读者、客户和粉丝直接与您联系。根据您的WordPress网站的目的,访问者与您交流的能力可能非常重要。例如,不向电子商务网站添加联系表格可能会对您的业务造成经济损失,因为如果相关方对您的产品有疑问,他们将无法与您联系。
  2. 联系表格为您的WordPress网站或业务增加了合法性。许多人将联系表格的存在视为某种信任因素。能够与网站所有者联系的想法使您的内容更值得信赖。

有联系表的缺点

  1. 对于评论框和联系表等公共表单,垃圾邮件可能是一个问题。幸运的是,使用Contact Form 7,您可以使用reCAPTCHA过滤掉垃圾邮件。您甚至可以配置Cloudflare页面规则来进一步保护自己。我们将在本文后面详细介绍如何在Contact Form 7中设置垃圾邮件保护。
  2. 向您的站点添加联系表单后,您可能需要花时间回复消息。这不一定是一件坏事,这取决于你如何看待它。有些人害怕回复电子邮件的过程,而另一些人则真正享受它。根据我们的经验,在您的网站上拥有联系表格所体现的关系通常超过了审核成本,因此我们建议您通过它来提供动力!

Contact Form 7设置概述

使用Contact Form 7插件创建联系表单非常简单。要开始使用,请单击WordPress侧栏中的Contact > Contact Forms。在此页面上,您可以查看所有联系表单及其相关元数据详细信息。

Contact Form 7中的联系表格

Contact Form 7中的联系表格

首次安装Contact Form 7时,它也会创建一个示例表单。在我们了解如何创建自定义联系表单之前,让我们先看一下示例表单,以更好地了解Contact Form 7的工作原理。单击Contact Form 1以查看表格设置。

配置您的WordPress联系表格

配置您的WordPress联系表格

“编辑联系表”页面分为四个部分。

  1. Form –使用“文本”、“电子邮件”、“复选框”等各种字段选项自定义您的HTML联系人表单模板。您还可以在表单自定义框中编写自定义HTML。
  2. Mail –自定义用于通知电子邮件的电子邮件模板和设置。
  3. Message –自定义在特定操作后显示的消息。例如,您可以设置在某人提交联系表单后显示的唯一消息。
  4. Additional Setting –指定片段以启用附加功能,如仅限订阅者模式、演示模式和邮件跳过。

现在让我们仔细看看每个部分并创建一个自定义联系表单!

如何创建WordPress联系表单

要创建新的联系表格,请单击“联系表格”旁边的Add New。

在Contact Form 7中创建一个新的联系表

在Contact Form 7中创建一个新的联系表

为新的联系表格命名,然后单击“保存”。

保存新的WordPress联系表

保存新的WordPress联系表

在“Form”部分,为您的联系表单添加必要的HTML。您可以使用各种预设按钮为流行的表单标签生成简码。为方便起见,请查看以下说明,了解Contact Form 7附带的预设表单标签。

  • Text –为单行文本创建表单标签。文本字段对于名字、姓氏和其他不需要多行的基于文本的片段很有用。
  • Email –为电子邮件地址创建表单标签。
  • URL –为URL创建一个表单标签。
  • Tel –为电话号码创建表单标签。
  • Number –为数字创建表单标签。与“文本”或“文本区域”输入字段不同,“数字”字段仅允许数字。
  • Date –为日期创建表单标签。
  • Text area –为文本区域创建表单标签。与普通的“文本”输入字段不同,“文本区域”字段允许多行文本。它们是输入消息正文的理想选择。
  • Drop-down menu – 为下拉菜单创建表单标签。
  • Checkboxes——为复选框创建一个表单标签。
  • Radio buttons——为单选按钮创建一个表单标签。
  • Acceptance –为接受复选框创建一个表单标签。
  • Quiz –为问答对创建表单标签。
  • File –为文件上传字段创建表单标签。
  • Submit –为提交按钮创建一个表单标签。

现在让我们继续自定义联系表单。为了完整起见,我们将创建一个使用Contact Form 7中所有预设表单标签的联系表单。

“Text”表单标签

当您单击Contact Form 7中的预设表单标签时,您将看到如下所示的弹出菜单。在此菜单中,您可以配置表单标签的设置。在底部,您会看到一个可以嵌入到您的联系表单模板中的简码。

Contact Form 7中的“文本”表单标签

Contact Form 7中的“文本”表单标签

对于“Text”表单标签,我们使用下面的设置来创建名称的输入字段。

  • Field Type –必填字段
  • Name – text-711(自动生成)
  • Default Value – 您的姓名(用作默认占位符文本)
  • Akismet –未选中
  • ID Attribute (CSS) – cf7-your-name
  • Class Attribute (CSS) – cf7-your-name

这些设置生成下面的简码。

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

现在,只需单击“Insert Tag”按钮即可将表单标签添加到联系人表单模板中。稍后我们将添加更多HTML标记来构建表单。

“email”表单标签

接下来,我们将创建一个电子邮件表单标签,它允许我们的联系表单收集电子邮件地址。

Contact Form 7中的“电子邮件”表单标签

Contact Form 7中的“电子邮件”表单标签

对于“email”表单标签,我们配置了以下设置。

  • Field Type –必填字段
  • Name- email-632(自动生成)
  • Default Value– 您的电子邮件
  • Akismet –未选中。
  • ID Attribute (CSS) –您的电子邮件
  • Class Attribute (CSS) –您的电子邮件

这些设置生成下面的简码。

[email* email-632 id:email class:email placeholder "Your Email"]

“URL”表单标签

在某些情况下,您可能希望在您的联系表单上有一个输入字段来收集某人的网站。虽然从技术上讲,您可以在Contact Form 7中为此使用普通的“文本”表单标签,但我们建议改用“URL”表单标签。“URL”表单标签将生成一个验证URL的输入字段,以确保它们的格式正确。

Contact Form 7中的“URL”表单标签

Contact Form 7中的“URL”表单标签

对于“url”表单标签,我们配置了以下设置。

  • Name – url-601(自动生成)
  • Default Value – 您的网站
  • Akismet –未选中。
  • ID Attribute (CSS) – cf7-your-website
  • Class Attribute (CSS) – cf7-your-website

这些设置生成下面的简码。

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

“tel”表单标签

与URL类似,您也可以使用标准的“text”表单标签来收集电话号码。但是,最好使用“tel”表单标签来确保电话号码有效。

Contact Form 7中的“电话”表格标签

Contact Form 7中的“电话”表格标签

对于“tel”表单标签,我们配置了以下设置。

  • Name – tel-842(自动生成)
  • Default Value – 您的电话号码
  • ID Attribute (CSS) – cf7-your-phone-number
  • Class Attribute (CSS) – cf7-your-phone-number

这些设置生成下面的简码。

[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]

“date”表单标签

Contact Form 7的“date”表单标签可让您生成日历样式的日期选择器。此“date”输入字段对于在联系表单中指定约会日期很有用。

Contact Form 7中的“日期”表格标签

Contact Form 7中的“日期”表格标签

对于“date”表单标签,我们配置了以下设置。

  • Name – date-389(自动生成)
  • Default Value – 您的预约日期
  • Range –我们的自定义日期范围。
  • ID Attribute (CSS) – cf7-appointment-date
  • Class Attribute (CSS) – cf7-appointment-date

这些设置生成下面的简码。

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]

“Textarea”表单标签

“textarea”表单标签让您可以创建一个多行文本框,让访问者提交更长的消息。文本区域对于捕获消息正文最有用。

Contact Form 7中的“textarea”表单标签

Contact Form 7中的“textarea”表单标签

对于“textarea”表单标签,我们配置了以下设置。

  • Name –textarea-795(自动生成)
  • Default Value -您的消息
  • ID Attribute (CSS) – cf7-your-message
  • Class Attribute (CSS) – cf7-your-message

这些设置生成下面的简码。

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]

“Drop-Down Menu”表单标签

Contact Form 7的“下拉菜单”表单标签可让您创建具有多个选项的下拉菜单。下拉菜单对于您希望访问者选择特定选项以与表单一起提交的情况很有用。例如,如果您经营一家WordPress维护公司,您可以配置一个下拉菜单,让访问者在您提供的服务之间进行选择。

Contact Form 7中的“下拉菜单”表单标签

Contact Form 7中的“下拉菜单”表单标签

对于“下拉菜单”表单标签,我们配置了以下设置。

  • Name – menu-24(自动生成)
  • Options –选项 1、选项 2、选项 3、选项 4
  • Allow Multiple Selections –选中
  • Insert a Blank Item as the First Option –选中
  • ID Attribute – cf7-drop-down-menu
  • Class Attribute – cf7-drop-down-menu

这些设置生成下面的简码。

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

“Checkbox”表单标签

复选框表单标签允许您创建HTML复选框。与下拉菜单类似,复选框也可用于选择预定义选项。根据您的联系表单的性质,复选框可能比下拉菜单更有效。例如,如果您有少量选项可供选择,则复选框可减少进行选择所需的点击次数。另一方面,如果您的联系表单有很多选项,下拉菜单可能会更好,因为它占用的垂直空间更少。

Contact Form 7中的“复选框”表单标签

Contact Form 7中的“复选框”表单标签

对于“复选框”表单标签,我们配置了以下设置。

  • Name – checkbox-948(自动生成)
  • Options –选项 1、选项 2、选项 3
  • Wrap Each Item with Label Element –选中
  • ID Attribute – cf7-checkbox
  • Class Attribute – cf7-checkbox

这些设置生成下面的简码。

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

“Radio Buttons”表单标签

“单选按钮”表单标签可让您创建具有多个选项的单选按钮。与复选框和下拉菜单不同,单选按钮只允许您选择一个选项。

Contact Form 7中的“单选按钮”表单标签

Contact Form 7中的“单选按钮”表单标签

对于“单选按钮”表单标签,我们配置了以下设置。

  • Name – radio-708(自动生成)
  • Options –选项 1、选项 2、选项 3
  • Wrap Each Item with Label Element –选中
  • ID Attribute – cf7-radio
  • Class Attribute – cf7-radio

这些设置生成下面的简码。

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]

“Acceptance”表单标签

Contact Form 7的“接受”表单标签可用于生成单个复选框,以用于接受条款和条件。使用接受表单标签设置,您可以指定要显示的消息。

Contact Form 7中的“接受”表格标签

Contact Form 7中的“接受”表格标签

对于“acceptance”表单标签,我们配置了以下设置。

  • Name – acceptance-545(自动生成)
  • Condition –选中此框以接受条款。
  • ID Attribute – cf7-acceptance
  • Class Attribute – cf7-acceptance

这些设置生成下面的简码。

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]

“Quiz”表单标签

“Quiz”表单标签可用于在您的联系表单中创建基本问答测验。要创建测验问题,请使用以下格式分隔问题和答案 – 问题|答案。在下面的截图中,我们的问题是“ WordPress是哪一年发布的?”,答案(由“|”字符分隔)是2003。

Contact Form 7中的“Quiz”表格标签

Contact Form 7中的“Quiz”表格标签

对于“Quiz”表单标签,我们配置了以下设置。

  • Name – quiz-461(自动生成)
  • Condition –选中此框以接受条款。
  • ID Attribute – cf7-quiz
  • Class Attribute – cf7-quiz

这些设置生成下面的简码。

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]

“File”表单标签

Contact Form 7的“file”表单标签让您可以将文件上传功能添加到联系表单。这对于您希望访问者能够上传图像或PDF文件以与表单一起提交的情况很有用。例如,如果您运行一个摄影博客,其中包含发布来宾提交的照片库,您可以添加文件上传功能供人们上传图像。

在表单标签设置中,您可以指定各种设置来保护您的表单。我们建议始终设置文件大小限制,以防止恶意用户上传大文件。同样,指定“可接受的文件类型”可以帮助您将表单锁定为您想要和期望的文件格式。考虑到摄影博客示例,您可能希望将文件大小限制为1MB (1024 KB),并将可接受的文件类型限制为仅JPG和PNG等已知图像格式。

Contact Form 7中的“file”表格标签

Contact Form 7中的“file”表格标签

对于“File”表单标签,我们配置了以下设置。

  • Name –文件 658(自动生成)
  • File Size Limit – 1024kb
  • Acceptable File Types – jpg|png|gif
  • ID Attribute – cf7 文件
  • Class Attribute – cf7-file

这些设置生成下面的简码。

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

“Submit”表单标签

最后但同样重要的是Contact Form 7的“Submit”表单标签。您可能已经猜到了,此表单标签可让您为联系表单生成提交按钮。

Contact Form 7中的“Submit”表格标签

Contact Form 7中的“Submit”表格标签

对于“Submit”表单标签,我们配置了以下设置。

  • Label– 提交
  • ID Attribute – cf7-submit
  • Class Attribute  – cf7-submit

这些设置生成下面的简码。

[submit id:cf7-submit class:cf7-submit "Submit"]

如何使用表单标签构建联系表单

现在我们已经设置了所有表单标签,是时候创建联系表单了。此时,您的联系表单设置应如下面的屏幕截图所示。记下我们在上面创建的所有表单标签。有了表单标签,您可以使用[contact-form-7] 简码将表单嵌入到WordPress文章或页面中。

使用contact-form-7短代码嵌入联系表格

使用contact-form-7短代码嵌入联系表格

在WordPress编辑器中,将短代码粘贴到一个空区块中。

将Contact Form 7短代码添加到文章或页面

将Contact Form 7短代码添加到文章或页面

如果您使用的是WordPress经典编辑器,您可以将短代码粘贴到内容编辑器的任何位置。

将Contact Form 7与WordPress经典编辑器一起使用

将Contact Form 7与WordPress经典编辑器一起使用

您现在应该能够在添加Contact Form 7短代码的页面上看到联系表。这是我们的联系表格与上述设置的样子。如您所见,Contact Form 7自动将表单标签转换为有效的HTML,HTML使用WordPress主题中包含的默认CSS样式呈现。

使用Contact Form 7创建的联系表格

使用Contact Form 7创建的联系表格

我们当前状态的联系表是一个很好的起点,但它缺少一个关键功能。“text”、“email”和“URL”等表单标签支持占位符,但“checkboxes”和“radio buttons”等其他元素不支持。如果没有适当的标签,复选框和单选按钮对访问者来说不会很有用,因为它们没有任何上下文。幸运的是,在Contact Form 7中添加标签非常简单!

如何在Contact Form 7中添加表单标记标签

有两种方法可以将标签添加到Contact Form 7表单标签。对于下面的表单标签,您可以简单地用标签包裹表单标签。

  • Text
  • Email
  • URL
  • Tel
  • Number
  • Date
  • Text Area
  • Acceptance
  • Quiz
  • File

看看下面的示例“Text”表单标签。

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

要为这个表单标签添加标签,我们可以用下面的代码片段替换表单标签。请注意在<label>开始标记之后的“Your Name”的附加实例。

<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>

这是我们联系表格上的变化。在这种情况下,新创建的标签与占位符的作用相同。但是,如果我们不想在表单标签中指定占位符,那么标签将有助于识别特定输入框的用途。

在Contact Form 7中为表单标签添加标签

在Contact Form 7中为表单标签添加标签

对于呈现多个表单控件(如复选框、单选按钮和下拉菜单)的表单标签,将表单标签包装在标签内会导致错误。发生这种情况是因为<label>标签只应与单个表单控件一起使用。复选框、单选按钮和下拉菜单选项的性质涉及多个表单控件,因此它们与默认标签解决方案不兼容。

对于复选框、单选按钮和下拉菜单,您必须在短代码中添加一个use_label_element参数。看看下面的复选框表单标记示例,其中use_label_element以粗体显示。

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

添加use_label_element参数后,您可以直接在联系表单编辑器中的表单标记上方添加标签。

为Contact Form 7中的复选框、单选按钮和下拉菜单添加标签

为Contact Form 7中的复选框、单选按钮和下拉菜单添加标签

为了完整起见,我们在联系表单中的所有表单标签中添加了标签。您可能不需要为生产站点执行此操作,因为某些表单标签已经包含占位符。无论如何,我们想展示标签是如何工作的。

这是我们的联系表格的样子:

带有标签的联系表格

带有标签的联系表格

在Contact Form 7中配置邮件设置

现在我们已经配置了联系表单的结构,是时候查看Contact Form 7中的电子邮件递送设置了。虽然默认的邮件递送设置对于大多数网站应该都可以正常工作,但了解各种不同的设置仍然很重要设置以防您的站点或用例需要特殊配置。

要访问邮件传递设置,请转到联系表单编辑器并选择“Mail”选项卡。

Contact Form 7中的邮件递送设置

Contact Form 7中的邮件递送设置

Contact Form 7的邮件传递设置允许您自定义模板和参数,用于在有人提交表单后生成通知并向您发送通知。如果您使用不正确的设置,您可能不会收到有关表单提交的通知。因此,在创建联系表单和更改设置后测试表单交付非常重要。

Contact Form 7允许您配置以下邮件传递设置。

  • To –发送通知的电子邮件地址。
  • From –发送通知的电子邮件地址。
  • Subject –通知电子邮件的主题。
  • Additional Headers –指定附加的电子邮件标头,例如“回复”。
  • Message Body –通知电子邮件的正文。
  • File Attachments –指定要包含在通知电子邮件中的任何附件。

现在,让我们浏览每个设置,以更好地了解它们如何影响Contact Form 7中的邮件传递。

“To”字段

请务必为“To”设置指定一个真实的电子邮件地址。默认情况下,Contact Form 7会将与您的WordPress用户帐户关联的电子邮件地址分配给“To”设置。如果您的WordPress电子邮件地址无效,请务必在您的个人资料设置中更新它,并在Contact Form 7中更改电子邮件地址。

“From”字段

“From”设置应使用以下格式 –  Your Name. 对于我们的联系表单邮件设置,我们使用wbolt<wordpress@wbolt.com>.

默认情况下,Contact Form 7将使用 填写此字段wordpress@your-domain.com。您需要确保此电子邮件地址是有效的,因为某些WordPress主机会阻止向无效地址发送电子邮件。有多种方法可以使此电子邮件地址有效。您可以为wordpress@your-domain.com设置一个专用电子邮件帐户,也可以在您的电子邮件服务提供商处启用包罗万象的功能。如果您无法设置此电子邮件地址,我们建议您将其更改为有效的电子邮件地址以避免送达率问题。

“Subject ”字段

“Subject ”设置可用于指定通知邮件的主题行。默认情况下,Contact Form 7将主题设置为Site Name “[your-subject]”– Contact Form 7默认表单模板中的主题名称。

如果您的表单中没有名为“[your-subject]”的表单标签,请务必将其更改为其他内容。例如,如果您只有一个表单标签来捕获访问者的姓名(例如 [your-name]),您可以将主题行更改为You’ve Received a Message from [your-name].

“Additional Headers”字段

在“Additional Headers”下,您可以指定电子邮件标头,例如回复、抄送和密件抄送。默认情况下,Contact Form 7添加以下标题 – Reply-To: [your-email]. 此标题允许您回复在提交的联系表单中指定的电子邮件地址。

如果您使用的是Contact Form 7的默认电子邮件表单标签,则默认回复标题很好。如果不是,请务必更改它以匹配您的电子邮件表单标签的名称。对于我们的联系表单,电子邮件表单标签的名称是“email-632”,因此必须将回复表单标签更改为Reply-To: [email-632].

“Message Body”

接下来是“Message Body”,它决定了通知电子邮件的正文内容。Contact Form 7的默认模板使用 [your-name]、[your-email]、[your-subject] 和 [your-message] 表单标签,如下所示:

From: [your-name] 
Subject: [your-subject]
Message Body:
[your-message]
-- 
This e-mail was sent from a contact form on wbolt (https://www.wbolt.com)

如果您没有在联系表单模板中使用它们,请务必更改这些表单标签。由于我们创建的联系表单收集了大量信息,我们可以使用额外的表单标签设置消息正文,如下所示:

Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795

自定义Contact Form 7通知电子邮件的消息正文

自定义Contact Form 7通知电子邮件的消息正文

Contact Form 7邮件设置 – File Attachments

如果您的联系表单涉及上传文件,您可以在通知电子邮件中包含该文件。在我们的联系表单中,我们有一个名为“[file-658]”的文件上传表单标签。因此,我们可以在“File Attachments ”下添加此表单标签,以确保该文件将包含在电子邮件通知中。

在Contact Form 7通知电子邮件中包含文件附件

在Contact Form 7通知电子邮件中包含文件附件

Contact Form 7邮件递送问题

如果您发现Contact Form 7没有发送电子邮件,您可以在联系WordPress开发人员寻求帮助之前检查一些事项。

  1. 检查您的服务器是否正在发送其他类型的电子邮件。要对此进行测试,您可以通过在博客文章上发表测试评论或在 WordPress 登录页面上提交密码重置请求来触发另一个电子邮件发送操作。如果您在执行这些操作之一后收到电子邮件,则问题可能与Contact Form 7的配置有关。如果您没有收到电子邮件,请联系房东的支持团队,让他们知道您遇到了电子邮件递送问题。
  2. 确保您的联系表单的邮件传递设置中的“To”和“From”字段配置正确。要使Contact Form 7正常工作,这两个字段都应填写真实的电子邮件地址。

Contact Form 7表格提交消息

Contact Form 7可让您自定义各种表单提交消息。这些消息在满足特定条件后显示。例如,如果访问者忘记填写必填字段,Contact Form 7将显示“该字段为必填项”消息。对于大多数用例,默认消息应该可以正常工作。但是,如果您想自定义消息,可以通过单击联系表单编辑器中的“消息”选项卡来实现。

自定义Contact Form 7情境消息

自定义Contact Form 7情境消息

如何保护您的联系表

多年来,随着自动化机器人变得更加智能和普及,垃圾邮件已成为联系表单的主要问题。由于联系表格通常对公共互联网开放,因此网络抓取工具很容易检测到它们并将垃圾邮件发送到您的电子邮件收件箱。幸运的是,有多种方法可以抵御垃圾邮件发送者并保护您的联系表格。

使用reCAPTCHA保护您的Contact Form 7

如果您曾经在Internet上提交过表单,那么您可能已经熟悉reCAPTCHA,这是一种由Google开发的用于识别自动机器人行为的技术。旧版本的reCAPTCHA (V2) 要求用户通过谜题或挑战。

最新版本的reCAPTCHA (V3) 不需要用户进行任何交互。相反,它在后台透明地监控用户活动,以区分人类和机器人访问者。由于Contact Form 7支持reCAPTCHA V3,我们建议使用此最新版本,因为它为访问者提供了更好的用户体验。

要设置reCAPTCHA,您首先需要生成一个API密钥。为此,请登录您的Google帐户并转到reCAPTCHA设置页面

为reCAPTCHA集成注册一个新站点

为reCAPTCHA集成注册一个新站点

填写注册表以创建您的reCAPTCHA。

  • Label –指定您选择的标签。
  • reCAPTCHA Type – Contact Form 7 支持 reCAPTCHA v3,因此请选择该版本。
  • Domains –如果您的站点使用根域,请添加域的非 www 和 www 版本。如果您的网站使用子域,只需添加子域。
  • Owners –默认情况下,与您的 Google 帐户关联的电子邮件地址将被添加为所有者。如果需要,请随意添加其他电子邮件地址。

填写完所有选项后,单击Submit。然后,您将看到特定于站点的“site key”和“secret key”。请务必将这些密钥保存在安全的地方,因为您需要将它们添加到Contact Form 7。

Google reCAPTCHA网站和密钥

Google reCAPTCHA网站和密钥

接下来,单击WordPress仪表盘侧边栏中的“Contact”,然后单击“Integration” 。选择reCAPTCHA选项,然后将您的站点密钥和密钥粘贴到各自的字段中。最后,单击Save Changes以完成reCAPTCHA集成。

在Contact Form 7中配置reCAPTCHA

在Contact Form 7中配置reCAPTCHA

在Contact Form 7中配置reCAPTCHA后,您将在联系表页面的右下角看到一个reCAPTCHA徽标。这意味着reCAPTCHA处于活动状态并保护您的联系表单免受垃圾邮件提交。

受reCAPTCHA V3保护的WordPress联系表格

受reCAPTCHA V3保护的WordPress联系表格

使用Cloudflare保护您的联系表(可选)

如果您使用Cloudflare来保护您的网站,您可以为您的联系表单页面设置一个特殊的页面规则,以减少垃圾邮件联系表单提交。

使用Cloudflare保护您的联系表

使用Cloudflare保护您的联系表

要添加页面规则,请单击“页面规则”选项卡,并使用以下设置来帮助保护您的联系页面。

  • If the URL Matches – *your-domain.com/your-contact-page/*
  • Browser Integrity Check –开启
  • Security Level –

Cloudflare的“浏览器完整性检查”功能分析HTTP标头。如果它检测到自动爬虫程序和垃圾邮件发送者常用的HTTP标头,则会拒绝对您网站的请求。将“Security Level”设置为高将挑战在过去两周内表现出恶意行为的所有访客。

通过使用URL匹配规则将这些设置限制在您的联系页面,您网站上的其他页面将不受这些页面规则的影响。我们推荐这种配置,因为您网站上的普通“read-only”页面通常不需要提高安全级别设置。

小结

Contact Form 7是最受欢迎的联系表格插件,这是有充分理由的!它可用于创建从基本联系表格、问答测验到支持文件附件和下拉菜单的复杂表格的所有内容。

最重要的是,它带有内置的reCAPTCHA支持,可帮助保护您的联系表单免受垃圾邮件发送者的骚扰。

评论留言