如何使用插件添加联系表格 - P1：使用联系表格 7

如果您想拥有一个专业的网站，联系表格是最重要的元素之一。 如果您使用专用插件，创建和设置联系表单甚至并不困难。 为了帮助您轻松快速地创建带有插件的联系表单，我们编写并编写了有关如何使用最流行的联系表单插件的说明。

在“联系表”系列的第一部分中，让我们找出：

• 什么是联系表？
• 联系表格的好处
• 如何使用 Contact Form 7 插件创建表单？

什么是联系表及其好处？

什么是联系表？

联系表格是营销人员熟悉的术语。 使用联系表，用户可以发送电子邮件并直接在网站上与您联系，而无需知道您的电子邮件地址。

联系表单通常有很多字段供用户填写所需信息，例如电子邮件、电话号码、姓名、电子邮件内容……此外，它通常放置在联系页面或您需要获取客户联系信息的区域. 下面是一个例子：

联系表的好处

因为用户可以使用联系表直接在该网站上向网站所有者发送信息（留下他们的联系信息，发送支持请求或其他请求，...），所以联系更加方便快捷。

此外，使用联系表可以使您的电子邮件保密，并减少垃圾邮件和安全威胁。 因此，您不必每天处理充满垃圾邮件和垃圾的邮箱。

此外，联系表单可帮助您更轻松地收集用户信息，因为他们必须填写您在表单中请求的信息。 这是获得更多潜在客户的策略之一。

一般来说，要建立一个专业的网站并为您的企业获得更多利益，您应该使用联系表格。

如何创建联系表格

您可以编写代码以根据需要创建字段和表单。 但是，如果您不是编码员，则这是不可能的。 或者您必须支付一笔钱聘请编码员来执行此操作。

因此，为非技术用户甚至开发人员（以节省时间和精力）创建联系表单的最有用的解决方案是使用插件。 现在，有很多简单、容易、快速和免费的联系表单插件。 所以，没有理由不使用它们来创建联系表单，对吗？

在本系列的所有文章中，我将向您展示如何创建大学注册表，如下所示：

使用联系表格 7 创建表格

在“使用插件创建联系表单”系列的第一篇文章中，我使用了联系表单 7——当今最流行的免费联系表单插件之一。

首先，从 wordpress.org 上的插件存储库下载并安装此插件，或转到仪表板>插件>添加新来安装并激活它。

联系表格 7

作者：三好孝之

当前版本： 5.5.3

最后更新： 2021 年 11 月 28 日

联系表格7.5.5.3.zip

82%评分5,000,000+安装WP 5.7+需要

以下是使用此插件创建上述大学注册表的具体说明。

界面

转到仪表板>联系人>新增以创建新的联系人表单。 这是您将使用的界面：

(1)：输入联系表的名称
(2)：用于创建和设置联系表单的选项卡，包括：

• 表单选项卡：为联系表单创建字段
• 邮件选项卡：设置您从联系表单收到的电子邮件
• 消息选项卡：包括用户在输入数据错误、无法发送表单、成功提交表单等时收到的通知。
• 附加设置选项卡：向联系表单添加其他元素。

为联系表单创建字段

正如我提到的，联系表单包含允许用户输入信息或与之交互的字段。 这是用于创建这些字段的表单选项卡：

(1) 包含要添加到表单中的字段，例如姓名、电子邮件、号码、发送按钮……要添加任何字段，只需单击相应字段的名称。

(2)是以HTML格式显示表单结构的区域。 创建新的联系表单时，您将拥有包含简单字段（例如电子邮件、姓名、主题和提交按钮）的基本表单的默认结构。 您可以立即使用此表单或基于它创建一个新表单。

字段的一般说明

选择所需字段后，将显示一个弹出窗口，您可以在其中输入字段中的必要信息。 每个字段需要不同的信息，但总的来说，它们都有以下部分：

名称：名称属性
默认值：字段的默认值
Id 属性：字段的 ID
类属性：字段的类

注意： ID 属性和类属性是可选的，您可以在那里输入您的自定义信息。 如果您希望通过以下步骤更轻松地设置联系表单的样式，您应该填写这两个部分。

填写此信息后，您将在此框底部看到您创建的字段的标签。 单击“插入标签”以将此字段插入到表单的 HTML 中。

通常，使用Contact Form 7创建的联系表单中每个字段的标签将具有以下结构：

 [field* name_attribute id:field_id class:field_class "字段的默认值"]

说明：

• field *是您选择的字段类型。 这是一个领域中最重要和必备的部分。
• *表示此字段是必需的。 如果您不想强制用户输入它，请删除* 。

要了解有关 Contact Form 7 中字段标记结构的更多信息，请参阅此文档。 了解联系表单的含义和 HTML 结构将使您可以更轻松地使用代码编辑、创建和添加新字段。 尤其是编码员，他们可以根据上述语法编写 HTML 代码来创建表单。 但是，对于非编码人员，这可能很困难，因此我建议按照以下步骤操作。

对于本系列中的联系表单，我需要选择以下字段：

所有字段都有我上面说的通用信息。 因此，我现在只是指导每个领域的具体部分。

以下是每个字段的详细说明。

创建用于输入名称的字段

选择文本字段并在框中输入该字段的基本信息：

在字段类型部分，您可以选择要求，以便必须填写此字段（这是可选的）。

注意：在默认值部分，选择使用此文本作为字段的占位符以在用户输入数据之前在字段上显示此内容。 您应该使用此模式向用户解释他们需要在该字段中填写的内容。

Akismet部分与 Akismet 插件相关 - 一个反垃圾邮件插件。 如果你没有这个插件，那么不要关心这个部分。

创建用于输入电话号码的字段

选择号码字段，填写字段的基本信息。

在字段类型部分中，为此字段选择一种类型。 有两种类型的字段： Spinbox和Slider 。

滑块将显示用于选择数字的比例如下：

此样式适用于根据特定比例评分或选择数字。

同时， Spinbox允许您输入任何数字，字段中的数字顺序，例如电话号码、卡号、身份证号……所以在这个例子中我选择了 Spinbox。

“范围”部分允许您选择数量限制。 在这个例子中，我不需要这个部分，所以我没有填写任何东西。

创建用于选择专业和学习地点的字段

使用此字段，选择下拉菜单。

现在，在选项部分填写专业和地点的选项，请记住，每个选项都是一行。

如果您希望允许用户一次选择多个选项，请单击允许多选。

创建用于选择注册目的的字段

选择复选框字段。

选项部分类似于上面下拉菜单字段中的部分。 此外，复选框还有更多选项，如下所示

• 先放标签，最后放复选框
• 用标签元素包裹每个项目
• 使复选框独占（您只能选择 1 个选项）。

创建提交按钮

最后，选择提交字段，只填写如下要求的信息（注意标签是这个按钮上会出现的字，例如“提交”、“注册”、“确认”）。

值得注意的是，在创建新表单时，该插件已经自动创建了一个提交字段。 因此，您无需创建新字段即可使用此字段。

为字段添加标签

现在您已完成为联系表单创建字段。 但是，您的字段没有名称显示在联系表单上，如下所示：

因此，您需要通过在表单的 HTML 部分插入以下代码结构来为字段添加标签：

 <label> 字段标签
[字段标签] </label>

接下来，在字段标签部分写入字段的标签。 然后填写以上所有信息，点击保存。

创建字段后，我的联系表单具有以下代码结构，注意我已经安排了字段以将它们显示在前端的所需位置：

 <label> 你的名字（必填）
[text* your-name "输入你的名字"] </label> 

<label> 您的电话号码
[号码电话占位符“输入您的电话号码”] </label> <label> 您的电子邮件（必填）
[email* your-email "输入您的电子邮件"] </label>

<标签> 少校
[选择*专业“计算机科学”“语言学”“农业”“工程”“电子商务”]</label>
<label> 学习地点 
[选择*学习地点“纽约”“芝加哥”“洛杉矶”“华盛顿特区”“休斯顿”“费城”] </label>

</label> 注册到
[checkbox* register label_first "Study" "Take a tour" "Consult"] </label>

[提交“提交”]

这一次，您的联系表格仍然没有显示在网站上。 您需要执行更多步骤才能在前端显示它。

联系表格设置

设置电子邮件

“邮件”选项卡允许您自定义用户发送联系表单时将收到的电子邮件的内容。 要设置此部分，您需要在刚刚创建的联系表单中插入字段的邮件标签。 下面是一个例子：

说明：

• To : 输入负责检查联系表格的人的电子邮件。
• 发件人和主题：您应该在此处设置一个名称来确定发送此联系表格的人。
• 邮件正文：在这里添加邮件标签，以确保当你从接触形式接收电子邮件，它会显示你从用户请求的所有信息。

其他设置

消息选项卡

输入在选项卡描述中可以看到的情况中使用的消息。 例如，在用户提交表单成功或提交失败后，您应该添加一条消息让他们知道这一点。 或者当用户忘记必填字段时，您还应该添加一条消息，以便用户可以回来填写该字段。 虽然这些都是小细节，但要注意提升用户体验。

附加设置选项卡

此选项卡可帮助您添加代码片段以安装以下内容：

• 仅限订阅者模式
• 演示模式
• 跳过邮件
• 验收作为验证
• 火烈鸟设置
• 抑制消息存储
• JavaScript 代码

您应该使用一些非常有用的部分，例如：

• 仅限订阅者模式：此模式只允许您网站的登录用户提交联系表格。 这消除了垃圾邮件，并且仅适用于真正想与您联系的人。
• 接受作为验证：添加一项功能，当用户未选中此框而是移至另一个字段时，显示“接受”复选框的通知。 因为默认情况下，如果用户不选中 Acceptance 复选框，错误消息只会在他们提交表单后显示。 此接受复选框通常用于创建诸如“我同意网站条款”之类的字段，但如果您创建其他内容类型，则可能需要添加接受作为验证。

要了解有关“附加设置”选项卡中其他功能的更多信息，您可以在此处阅读更多内容。

在网站上显示联系表

最后一步是显示您刚刚在网站上创建的联系表单。

仍然在创建新表单的界面，复制短代码并将其粘贴到所需的页面或帖子上。

这是我的最终结果：

但是，我的联系表格看起来不太好，所以我需要稍微设计一下。

如果您想像我在本文开头提供的模板一样重新设置联系表单的样式，您需要按如下方式编辑表单的 HTML 以使其更易于设置样式：

 <div class="form__field form__full-width">
<label>你的名字（必填）
[文本*您的姓名占位符“输入您的姓名”]
</标签>
</div>
<div class="form__field">
<label>您的电话号码
[号码电话占位符“输入您的电话号码”]
</标签>
</div>
<div class="form__field">
<label>您的电子邮件（必填）
[电子邮件*您的电子邮件占位符“输入您的电子邮件”]
</标签>
</div>
<div class="form__field">
<标签>主要
[选择*专业“计算机科学”“语言学”“农业”“工程”“电子商务”]
</标签>
</div>
<div class="form__field">
<label>学习地点
[选择*学习地点“纽约”“芝加哥”“洛杉矶”“华盛顿特区”“休斯顿”“费城”]
</标签>
</div>
<div class="form__field form__full-width">
<标签>注册
[checkbox* register use_label_element "Study" "Take a tour" "Consult"]
</标签>
</div>
<div class="form__field form__full-width">
[提交“提交”]</div>

然后转到您主题的定制器>附加 CSS并粘贴以下代码：

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

最后，点击发布保存。

最后的话

当您第一次使用 Contact Form 7 时，如果您不是编码员，您可能会发现它不熟悉 HTML。 不过，看完这个教程，我觉得一切都变得容易了，对吧？

如果您想尝试使用其他一些工具创建联系表单，请期待我即将发布的本系列文章。 你想推荐哪个插件？ 在这篇文章下发表评论！