重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

因为专注,所以专业

如何在 WordPress 中创建联系表单

为什么要在 WordPress 网站上使用联系表?

在讨论如何进行之前,让我们先看看为什么它是必要的。例如,在您的网站上使用联系表单而不是直接发布您的电子邮件地址有很多很好的理由。
  • 防止垃圾邮件— 垃圾邮件是一种害虫。当您拥有一个使用博客评论的 WordPress 网站时,您会很快注意到它。垃圾邮件发送者所做的一件事是自动扫描网站以查找未受保护的电子邮件地址,以便他们可以将它们添加到他们的邮件列表中。联系表格让访问者有机会在不在线发布您的地址的情况下与他们取得联系,从而避免这种情况发生。
  • 询问正确的信息——与您取得联系的人并不总是发送您需要的所有信息。使用联系表,您可以预先明确要求。它还为您提供了一种过滤查询的方法,例如按类型。这使您的生活更轻松,并减少了很多来回。
  • 通知您的客户——相反,联系表格也可以作为第一个信息点。您可以为来电者提供信息,让他们了解预期的响应时间和他们可以提前采取的步骤来解决他们的询问。这减少了来自同一个不耐烦的人的多封电子邮件的可能性。
确信联系表格有用吗?然后让我们进入本教程的实践部分。

如何使用联系表 7 添加联系表

有许多WordPress 插件可以在您的网站上添加联系表格,包括免费和收费的。在接下来的教程中,我们将使用Contact Form 7WPForms
这些插件在 WordPress 目录中免费提供,并且一直是有史以来最受欢迎的插件之一(实际上,在撰写本文时首先是联系表 7)。除此之外,它们易于使用,具有不错的功能列表和合理的附加组件。
让我们从联系表 7 开始。

步骤 1. 安装 Contact Form 7 插件

安装 Contact Form 7 和安装任何其他 WordPress 插件一样简单。只需登录您的站点,转到插件 > 添加新并在搜索框中输入其名称。
安装联系表 7 以在 wordpress 中添加联系表
它应该首先出现。单击立即安装以将其下载到您的站点上。完成后,单击“激活”以开始使用该插件。

第 2 步。创建您的新联系表格

安装后,您会在 WordPress 侧边栏中找到一个名为Contact的新菜单项。单击它可以进入此屏幕。
联系表格 7 主菜单
您会在您的网站上找到所有联系表格的列表。它包括一个样本表格,理论上您可以立即使用。单击它开始编辑或单击屏幕顶部的添加新。两者都会带你到这里:
如何使用联系表7将联系表添加到wordpress
一开始看起来有点神秘,但别担心 - 该插件附带了自动生成代码的工具,因此您不必自己进行任何编码。

步骤 3. 配置您的表单

目前,我们在后端的默认表单在页面上看起来像这样。
联系表格配置
都是标准的。假设您想添加一个下拉菜单来选择与您联系的目的。这样,您就可以立即看到要优先处理的消息。
为此,您首先需要将光标放在希望菜单出现在联系表单中的位置。在这种情况下,它介于电子邮件地址和主题之间。
单击顶部工具栏中的下拉菜单。它让你进入这个菜单:
联系表 7 创建下拉菜单
以下是填写不同字段的方法:
  • 字段类型— 选择是否需要该字段来提交联系表单。
  • 名称——这意味着标签中使用的名称。它不会对访问者显示,但可以让您更轻松地记住标签的用途,并在以后配置发送到您帐户的电子邮件。
  • 选项— 使用下拉菜单输入可供访问者使用的选项。每行放一个。您还可以选择允许多项选择并默认使用空白项目。
  • Id/Class 属性——在这个地方你可以为字段分配一个 CSS 类或 id。这对于自定义样式非常有用。我们稍后再谈。
我们是这样填写的:
填写表格标签生成器联系表格 7
满意后,单击“插入标签” 将其放入表单中。
将下拉菜单的表单标签添加到联系表单 7
现在剩下的就是添加一个标签。这是联系表单字段附带的文本,用于解释它的作用。只需从其他字段复制并粘贴现有代码,然后根据您的需要进行调整。
将html代码添加到联系表单7中的表单标签

步骤 4。 编辑电子邮件设置

接下来,您必须配置从联系表单发送给您的电子邮件。您可以在顶部的“邮件”选项卡下执行此操作。
配置联系表单 7 邮件设置
您会发现这些字段预先填充了与之前的联系表单类似的标签。它还为您提供可用的字段标签,包括您之前创建的任何新标签(如果您已保存表单)。您可以使用它们来自定义从联系表单接收消息的方式。
以下是每个字段的含义:
  • 收件人— 消息将发送到的电子邮件地址。您通常可以保持原样。
  • 发件人— 电子邮件的发件人。默认情况下,它设置为使用您的联系表单的人员的姓名。
  • 附加标头— 用于附加消息标头字段的空间。当您点击Reply时,标准设置会将您的回复发送到与您联系的人的电子邮件,而不是来自(即您的网站)的电子邮件。也可以将收件人放在 CC 或 BCC 那里
  • 邮件正文— 您将收到的电子邮件正文。
  • 从输出中排除带有空白邮件标签的行- 当您选中此项时,如果任何使用的标签为空,插件将从消息中排除它们。
  • 使用 HTML 内容类型— 默认情况下,消息以纯文本形式发送。选中此框以使用 HTML。
  • 文件附件——如果您的表单允许上传文件,则这些文件的标签就属于这里。您还可以使用它来附加托管在您的服务器上的文件
  • 邮件 (2) — 通常用作自动回复器的附加邮件模板。检查以激活。
标准选项非常好。对于我们的示例,我们唯一需要更改的是主题行。
在您的邮件程序中设置过滤器
使用上述格式,您现在可以在邮件程序中设置过滤器,按主题行对邮件进行排序,优先处理业务查询。

步骤 5. 添加表单消息

接下来是消息选项卡。您可以配置访问者在使用表单时可能遇到的消息。
为联系表单 7 配置表单消息
这些是错误消息、成功消息,或者只是关于如何正确使用表单的提示。我们发现这些已经很不错了,所以我们通常保持原样。如果您有理由更改其中任何一项(例如,以适应您网站的基调),请随时这样做。

步骤 6. 自定义附加设置

最后,您将进入其他设置。
联系表 7 附加设置
默认情况下,这些是空的。
您可以做不同的事情——从限制只有登录的人提交联系表单的能力到将表单设置为演示模式以进行测试。这对我们的目的并不重要,但您可以在文档中找到所有不同的选项。

第 7 步。将表单添加到您的网站

现在您已经完成了表单的配置,是时候将它放到您的站点上了。您需要做的第一件事是保存表单。
在此之前,您可能希望在顶部添加一个名称。如果您创建多个表单,这将使表单更容易区分。
保存表单后,屏幕上会出现一个短代码:
联系表格 7 短代码将联系表格添加到 wordpress
您将使用它来将表单放置在您想要的任何位置。
您要做的第一件事是标记并复制它。完成后,转到要放置表单的页面。例如,您可以简单地创建一个新页面并将其命名为Contact。将短代码粘贴到 WordPress 编辑器中。
wordpress 编辑器中的联系表格 7 短代码
当您现在发布页面并转到前端时:
联系表格 7 页中的表格
就是这样。注意我们之前创建的下拉菜单。根据需要,它现在是联系表的一部分。
很简单吧?另外,您可以使用相同的方法将表单放置在其他任何位置。

如何使用 WPForms 添加联系表单

现在我们已经介绍了如何使用 Contact 7 创建表单,是时候继续使用 WPForms 了。

步骤 1. 安装 WPForms 插件

这一步你应该已经很熟悉了。转到插件 -> 添加新的. 输入 WPForms,它应该会出现在您的搜索结果中。
安装WPForm
单击“立即安装”下载并激活您的插件。

步骤 2. 创建新的联系表格

安装完成并激活插件后,您的侧边栏上应该会有一个新的菜单项“WPForms”,并且还会看到以下屏幕:
欢迎使用 WPForms
开始创建新联系表单的最简单方法是单击橙色按钮  “创建您的第一个表单”。然后您将被定向到设置页面,您必须在其中填写表单名称并选择一个模板。
WPForms 设置页面
有很多模板可供选择。例如,选择“空白表单”可以让您从头开始创建联系表单,您可以决定表单的外观。
但是,在此示例中,我们将使用“简单联系表单”模板。

步骤 3。 编辑您的表单

要开始编辑您的网站,请将鼠标悬停在所选模板上,然后单击“开始创建”。然后您将被重定向到编辑屏幕。
在我们的示例中,编辑屏幕如下所示:
简单表格联系表格编辑屏幕
如您所见,已经为您创建了联系表单。您需要做的就是根据您的需要对其进行自定义。
WPForms 的免费版本只允许您使用标准字段选项。要访问 Fancy Fields,您必须升级您的插件。
通过使用拖放编辑器,使用 WPForms 进行自定义变得非常简单。例如,要将下拉菜单添加到您的联系表单,只需将其拖到表单上您希望它出现的位置(我们将它拖到“电子邮件”和“评论”或“消息”之间),然后在屏幕左侧即可开始自定义下拉菜单:
WPForm 下拉菜单
更改“标签”名称并对“选择”执行相同操作。完成后单击“保存”
同样的逻辑也适用于其他选择。

步骤 4。 检查您的设置

一旦您对联系表单的编辑感到满意,就可以检查您的设置了。

常规设置

在常规设置下,您可以编辑表单名称、添加表单 CSS 类、编辑按钮文本等。基本上,顾名思义,所有常规设置都在那里处理。
WPForms 常规设置

通知

您想在提交表单后自动发送电子邮件吗?
如果是这样,那么“通知”选项卡就是您的下一站。
WPForms 通知
在这里您可以找到有关如何在 WPForms 中添加通知电子邮件的更多信息。

确认

WPForms 确认功能让您决定用户提交表单后会发生什么。例如,您可以选择在同一页面上简单地显示感谢信息、发送确认电子邮件或重定向到另一个页面。
WPForms 确认

步骤 5. 在您的网站上添加表单

完成对联系表单的所有设置和外观的调整后,是时候将其添加到您的网站了。
首先,保存您的所有工作并关闭 WPForms 设置页面。完成后,您应该会在WPForms -> All Forms下看到您的联系表格
WordPress 中的 WPForms 概述
注意短代码并复制它。
移动到页面- >添加。创建一个新页面并将其命名为例如“Contact”:
将简码添加到联系页面
然后将短代码复制到 WordPress 编辑器并保存页面。
如果一切顺利,您应该会在 WordPress 的前端看到联系表格,看起来像这样:
联系页面
就这样!您刚刚掌握了在 WordPress 中添加联系表单的基础知识。
然而,我们还没有走到最后。还有很多事情要做来进一步改进你的表格。

联系表格的后续步骤

一旦您的网站上有了表格,工作就不会结束。还有一些重要的事情需要处理,例如样式化您的表单、保护它免受垃圾邮件发送者的侵害,以及对个人数据实施保护措施。让我们按顺序这样做:

更改表单设计

理想情况下,无需更改联系表单的样式。
在好的 WordPress 主题中,这些是在样式表中定义的。因此,联系表单很可能会自动适合您的网站设计。如果您仍然需要进行调整,您有多种选择。

联系表格 7

Contact Form 7 表单具有标准的 HTML 标记。您可以简单地更改相关联的 CSS,从而更改表单的外观。请记住,这也会对您网站上共享相同标记的其他输入字段产生影响。
因此,为了设计您的联系表单样式,您必须学习一些 CSS。然而,这并不复杂,而且联系表格 7 有一个关于如何做到这一点的教程

WPForms

与上述类似,WPForms 联系表单也可以使用 CSS 进行样式设置。事实上,WPForms 已经创建了一个关于如何为您的表单实现自定义 CSS 样式教程
再一次,没有什么太难的。只需要一点点练习。

实施垃圾邮件防护

一般而言,垃圾邮件是 Web 和网站的一个大话题。如果您在网站上未保护您的电子邮件地址,则有很多自动程序会接收它们并开始向您发送未经请求的报价、钓鱼电子邮件,甚至更糟。
不幸的是,联系表格也是如此。除非您采取措施来阻止它,否则也有一些程序可以通过联系表格向您发送垃圾邮件。

联系表格 7

幸运的是,联系表格 7 提供了简单的方法来防止这种情况发生。
测验
其中之一很简单:在你的表单中加入一个机器人无法回答的测验,就像一个简单的等式。
通过测验联系表格 7 垃圾邮件保护
验证码
除此之外,还有 reCAPTCHA。这是一项用于打击垃圾邮件的 Google 服务。您需要一个API 密钥并将其与联系表 7 集成。这可能会对保护个人信息产生影响。
您可以使用 reCAPTCHA 标记将其添加到您的表单中。Contact Form 7 的制造商还有一个 Captcha 插件,称为 真正简单的 CAPTCHA,您可以将其用于相同的目的。
插件
您还可以使用第三方插件进行垃圾邮件保护。当然,最著名的是Akismet和 Contact Form 7 提供了有关如何一起使用两者的详细说明。
还有其他的,例如 Contact Form 7 HoneypotWPBruiser。对于后者,您需要付费扩展才能使用联系表 7。您还可以轻松找到更多选项。

WPForms

WPForms 带有自己的反垃圾邮件选项,您可以立即启用。为此,请转到Settings -> General 然后向下滚动并勾选“启用反垃圾邮件保护”框。
WPFroms 启用反垃圾邮件保护
并做了!
为了获得额外保护,您还可以在表单中添加 reCAPTCHA 和 hCaptcha

使其符合 GDPR

您可能知道欧洲的互联网隐私法发生了一些变化。2018 年 5 月 25 日,通用数据保护条例 (GDPR)生效。
它对有关在线使用个人信息的法律进行了许多更改。它还威胁要对违反规定的任何人处以巨额罚款。
为什么这很重要?联系表格收集个人数据。因此,如果您属于法规的管辖范围(现在大多数人都这样做),则需要注意一些事项。
  1. 不要收集您不需要的数据— 联系表单让您可以选择要包含的字段。如果有任何您实际上不需要的数据,请停止收集。这样,如果有漏洞,您就不会丢失它。
  2. 禁用任何跟踪— 如果您使用的是跟踪 cookie、用户代理和/或用户 IP 的联系表单,您需要禁用它以符合 GDPR。
  3. 获得绝对同意— 在您的表单中添加一种方式,让人们同意您收集他们的数据。例如,联系表 7 提供了一个接受框。(重要提示:不要将复选框设置为默认启用。用户必须自己做。另外,包括一条消息,说明您收集的内容和目的以及指向您的隐私政策的链接)。
  4. 制定隐私政策——根据 GDPR,每个专业网站都需要展示隐私政策,解释他们收集哪些数据以及如何使用这些数据。您还需要让访问者能够询问他们的个人数据并将其删除。
  5. 实施 HTTPS — 使用 SSL/ HTTPS 加密浏览器和服务器之间的数据交换。这对于保持个人数据安全的联系表格很重要。现在这也被认为是普遍做法。
您可以在此处找到有关将 GDPR 合规表格应用到联系表格中的更多信息: