如何在WordPress中创建联系表单

安装和自定义设置联系表单
Zac
Zac

Web360编辑

上次更新时间:2021年4月2日

作为网站管理员,你应该学习如何在WordPress中创建联系表单。

你的网站、文章内容都不是匿名的,很多读者都想和作者进行沟通互动。

因此,在本文中,你将学习如何在WordPress中添加联系表单。这篇文章首先会介绍为什么要使用联系表单,然后学习如何通过插件在网站上添加联系表单的操作。

我们还将讨论如何修改表单的设计并实施垃圾邮件防护。此外,我们将研究联系表单和个人数据保护-这是最近更受关注的话题。最后,你会看到一个插件列表,可以用它在WordPress中创建联系表单。

OK,让我们开始吧!

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

在探讨如何进行操作之前,让我们先了解为什么要使用联系表单。在你的网站上使用联系表单而不是直接发布你的电子邮件地址有很充分的理由。

  • ·防止垃圾邮件-垃圾邮件是一种有害的东西。当你的WordPress网站使用博客评论时,你很快就会发现到大量的垃圾评论。垃圾邮件发送者所做的一件事就是自动扫描网站上未受保护的电子邮件地址,然后将其添加到他们的邮件列表中。为了避免这种情况的发生,联系表单给访客一个不公布你的地址就可以联系你的机会。
  • ·要求提供必要的信息——和你联系的人不会把你需要的所有信息都发给你。使用联系表单,你可以预先明确地要求它。联系表单还提供了一种过滤查询的方法,例如按类型过滤。这使你们的交流更容易,减少了很多来回。
  • ·通知你的客户——联系表单也可以作为你的第一个信息源。你可以为用户提供信息,让他们知道预期的回复时间以及他们可以提前采取的步骤来解决他们的询问。这样可以减少同一个联系人多次发送邮件的可能性。

你觉得联系表单有用吗?接下来,让我们进入实际操作部分。

如何在WordPress中添加Contact Form 7

有很多WordPress插件可以在网站上添加联系表单,有免费的也有付费的。我们将在本文中讨论其中的一些插件。接下来的操作指南中,我们将使用Contact Form 7

这款插件可以在WordPress目录中免费下载使用,它一直是最受欢迎的插件之一(事实上,在写这篇文章的时候,它还是排名第一)。除此之外,它很容易上手使用,具有一个不错的功能列表和有用的附加组件。

这就是为什么我们选择它来教你如何在WordPress添加联系表单的原因。

第1步:安装Contact Form 7插件

安装Contact Form 7与其他任何WordPress插件一样。登录到你的网站后台,进入“插件”>“添加新项”,然后在搜索框中输入其名称。

它应该出现在第一位。单击立即安装将其下载到你的网站。完成后,点击“激活”就可以开始使用该插件了。

第2步:创建新的联系表单

安装完成后,你会在WordPress侧边栏中发现一个名为Contact的新菜单项。单击它将进入这个页面。

你会得到许多工具提示,可以让联系人表单增加更多功能,例如使用垃圾邮件保护。稍后我们将介绍这些内容。

更重要的是,你可以在网站上找到所有联系表单的列表。它包括一个理论上可以立即使用的示例表单。点击它开始编辑,或者点击屏幕顶部的Add New。两者都能让你看到这个页面:

一开始它看起来有点复杂,但是不要担心——你很快就会理解它的。

联系表单需要不同的字段。字段是访问者输入他们的姓名、电子邮件地址或他们想要发送的信息,或是你希望他们填写任何信息的地方。

Contact Form 7会创建一些带有HTML以及自定义的标签。<label>…</label>之间的所有内容表示联系人表单的一个字段以及所属表格的文字说明。实际的字段是由方括号之间的内容创建的。

这是否意味着创建联系表单,你需要学习编程语言吗?当然不需要,该插件附带了自动生成这些内容的工具。

第3步:设置联系表单

目前,默认表单将在页面上如下所示。

这是一个标准联系表单。假设你想添加一个下拉菜单来选择与你联系的目的。这样,您就可以立即看到要优先处理的消息。

要做到这一点,首先需要将光标放在联系表单中希望出现菜单的位置。在本例中,就是在电子邮件地址和主题之间。

单击顶部工具栏中的下拉菜单。可以看到这个菜单:

以下是填写这些字段的方法:

  • 字段类型-选择该字段是否需要提交联系表单。
  • 名称-表示标签中使用的名称。它不会显示给访问者,但是使您更容易记住标记的用途,并在以后配置发送到您帐户的电子邮件。
  • 选项-使用下拉菜单输入可供访客使用的选项。每行放一个。你还可以选择允许多项选择,并默认使用空白项。
  • Id/Class属性-在这里,你可以为该字段分配一个CSS类或Id。这对于自定义样式非常有用。我们稍后再讨论。

我们是这样填写的:

完成后,单击“插入标签”将其放入表格中。

注意:一旦了解了标签的工作原理,就可以创建标签或在文本字段中进行修改。例如,要将新的下拉菜单设为非必填字段,只需在选择后删除星号即可。使用该插件的次数越多,你对它的工作原理的了解就越多。

现在剩下的就是添加标签。这是联系表单字段随附的文本,用来解释其功能。只需从其他字段复制并粘贴现有代码,然后根据需要进行调整即可。

第4步:编辑电子邮件设置

接下来,配置从联系表单发送给你的电子邮件。你可以在顶部的“Mail(邮件)”选项卡下执行此操作。

你会发现与之前的联系表相似的,预填充了类似标签的字段。它还提供了可用的字段标记,包括之前创建的新标记(如果已保存了表单)。你可以使用它们来自定义从联系表单接收消息的方式。

以下是每个字段的含义:

  • 收件人-邮件将发送到的电子邮件地址。通常可以保持原样。
  • 发件人-发件人的电子邮件。默认情况下,设置为使用联系表单的人的姓名。
  • 附加消息头-用于附加消息头字段的部分。标准设置是,当你点击“回复”时,你的回复将发送到联系的人的电子邮件中,而不是回复到网站的电子邮件。也可以把收件人放入抄送或密送中
  • 邮件正文-你将收到的邮件的正文部分。
  • 从输出中删除带有空白邮件标签的行-选中此项时,如果任何使用的标签为空,则插件会将其从消息中删除。
  • 使用HTML内容类型-默认情况下,邮件以纯文本格式发送。选中此框可改用HTML。
  • 文件附件——如果你的表单允许文件上传,这些文件的标签设置在这里。也可以使用它来上传文件到服务器上托管
  • 邮件(2)-一个额外的邮件模板,经常用作自动回复。选中后激活。

标准选项相当不错。对于我们的示例,需要更改的惟一内容是主题行。

使用上面的格式,你现在可以在邮件程序中设置一个过滤器,按主题行对消息进行分类,从而优先进行业务查询。这就是目前关于邮件设置的所有内容。

第5步:添加表单消息

接下来是“Messages(消息)”选项卡。配置访问者在使用表单时可能会遇到的消息。

包括错误消息、成功消息,或者是有关如何正确使用表单的提示。我们发现这些已经相当不错了,通常将所有内容保持原样。如果需要修改(例如,以适合你的网站的风格),可以随时进行更改。

第6步:其他自定义设置

最后,来到其他设置。

默认情况下,这些为空。你可以做自定义设置–限制仅登录人员提交联系表单的功能,将表单设置为演示模式用来进行测试。这对我们而言并不重要,但是您可以在文档中找到所有设置选项。

第7步:将联系表单添加到网站

你已经完成了表单的配置,现在可以将它添加到你的网站上了。第一步是点击保存按钮保存表单。

在此之前,需要在顶部添加一个名称。这样在创建多个表单时更容易区分。

保存表单后,屏幕上会出现一行简码:

你可以使用它将表单放置在任何所需的地方。第一步是全选并复制它。完成后,来到要放置表单的页面。例如,你可以创建一个新页面并将其命名为Contact。将短代码粘贴到WordPress编辑器中。

发布页面,然后,访问这个页面:

注意,我们之前创建的下拉菜单。它现在是联系表单的必选项。

非常简单,对吧?你可以使用相同的方法将表单放置到任何地方。

第8步:在边栏中添加联系表单(可选)

在侧边栏中放置联系表单非常容易。进入外观>小部件。添加一个文本小部件到希望联系表单出现的位置,然后粘贴短代码。

别忘了忘记保存小部件!刷新网站页面,显示如下:

你已经掌握了在WordPress中添加联系表单的基本知识,但是还没有结束呢。要进一步改进表单,还有很多工作要做。

WordPress中的联系表单–后续步骤

将表单放到在网站上后,工作还没有结束。仍然关注一些重要的事情,例如,设置表单的样式、保护其免受电子邮件垃圾邮件发送者的侵扰以及对个人数据采取保护措施。让我们按顺序执行以下操作:

1.修改表单设计

理想情况下,不需要更改联系表单的样式。在我们的例子中因为Contact Form 7使用标准HTML代码(例如labelinput[type=”text”]创建表单字段)。

在设计良好的WordPress主题中,这些是在样式表中已经定义了。联系表单很会自动适应你的网站设计。你可以在上面的示例网站中看到这一点。如果仍然需要做出调整,有几种选择。

如前所述,Contact Form 7表单具有标准的HTML标记。你可以简单地更改相关的CSS,修改表单的外观。记住,这会对网站上其他共用相同标记的字段产生影响。

此外,使用Contact form 7创建的每个表单都带有特定于插件的代码。你可以使用浏览器中的开发人员工具来查找代码。

例如,你可以通过使用.wpc7-form CSS类来修改整个表单的样式。注意,它会对所有使用Contact Form 7创建的表单产生影响,但不会影响网站上的其他字段。

如果你想只针对特定的表单修改样式。从上面的截图可以看到,每个Contact Form 7表单都有自己的CSS id。

你可以使用它来针对每个表单定位元素。还可以为表单上的元素提供自己的CSS类和ID。

有了这些,你就能更明确地定位目标。

简而言之,无论你想要修改表单的任何设计,都可以使用现有的工具来实现。

2.实施垃圾邮件防护

当涉及到网页和网站时,垃圾邮件都是一个大话题。如果你把电子邮件地址随意添加在网站上,不设置任何保护,有很多自动程序会抓取它们,然后开始给你发送未经请求的报价邮件、钓鱼电子邮件等垃圾邮件。

同样,联系表单也是如此。除非你设置适当的措施来防止它,否则还会有一些自动程序可以通过联系表单向你发送垃圾邮件。

幸运的是,Contact Form 提供了一些简单的方法来防止这种情况的发生。其中一个简单方法:在表单中加入一个机器人无法回答的测试,例如一个简单的计算题。

测验标签是一个不错的选项。它与Contact Form 7中的所有标签一样易于使用,你可以在此处找到更多信息

除此之外,还有reCAPTCHA。这是Google推出的专门打击垃圾邮件的服务。需要一个API密钥并将其与Contact Form 7集成。在此处查找说明。这会对保护个人信息产生影响。下一节将对此进行更多介绍。

可以使用reCAPTCHA标签将其添加到表单中。Contact Form 7也有一款验证码插件叫做Really Simple Captcha

你还可以使用第三方插件来保护垃圾邮件。当然,最著名的是Akismet和Contact Form 7提供了如何结合使用这两款插件的详细说明

还有其他的插件,例如Contact Form 7 HoneypotWPBruiser。后者,你需要付费才能和Contact Form 7一起使用。你也可以很容易地找到更多的选项。

3.使其符合GDPR

你应该已经知道最近欧洲的互联网隐私法发生了一些变化。2018年5月25日,《通用数据保护条例》(GDPR)正式生效。

该条例对涉及在线使用个人信息的法律进行了一系列修改。还威胁要对任何违反规定的人处以巨额罚款。

联络表单收集个人资料,所以了解GDPR非常重要。如果你的网站处于法规的管辖范围内,需要注意一些事情。

  1. 不要收集不需要的数据-联系表单可以选择需要提交哪些信息字段。如果确实不需要任何数据,就不要收集它们。这样,如果发生违规行为,得不偿失。
  2. 禁用跟踪-如果你正在使用跟踪cookie、用户代理和或用户IP的联系表单,那么现在需要禁用它们。Contact Form 7似乎没有任何作用,因此无事可做。如果您还有其他用途,请检查您选择的联系方式。
  3. 获得用户同意-在你的表单中添加一个选项,让用户同意你收集他们的数据。例如,Contact Form 7提供了一个接受框。重要提示:请勿将复选框默认设置为启用。必须让用户自己选择。另外,还需要附上一条消息,说明你收集了什么以及出于什么目的,还要添加隐私权政策页的链接。
  4. 制定适当的隐私权政策-根据GDPR规定,每个专业网站都需要有隐私权政策,说明其收集哪些数据以及如何使用这些数据。还需要获得用户个人数据的使用和删除权。这是一个更为复杂的话题。可以从最下面的的链接中查找更多信息。
  5. 实施HTTPS——使用SSL/HTTPS加密浏览器和服务器之间的数据交换。这对于联系表保持个人数据安全很重要。现在也被认为是惯例。查看我们的指南,了解如何实现它。

以上内容可以使联系表单符合新法律的要求。当然,对于网站管理员来说,这个话题还有很多可以讨论。

你可以访问这个链接了解更多信息。

发表评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注