如何使用插件添加联系表单 - P2：使用 WPForms

在“联系表单”系列的上一篇文章中，我们学习了联系表单是什么以及如何使用联系表单 7 插件。 正如所承诺的，我用 WPForms 编写了另一个教程，我将在本文中向您展示。

WPForms 是一个免费的拖放式联系表单插件，具有实时预览功能。 根据我的经验，使用这个插件很容易也很方便。

您还记得我们在本系列的第 1 部分中创建的这个大学注册表示例吗？ 现在，我们将使用 WPForms 创建相同的。

第 1 步：安装并激活 WPForms 插件

这个插件在 wordpress.org 上有一个免费版本，所以你只需要在Admin Dashboard上安装并激活插件。

WPForms 的联系表 – WordPress 的拖放表单生成器

作者（S）：WPForms

当前版本： 1.7.1.2

最后更新： 2021 年 11 月 18 日

wpforms-lite.1.7.1.2.zip

98%评分5,000,000+安装WP 4.9+需要

第 2 步：创建一个新的联系表单并选择一个模板

在您的管理仪表板上，转到WPForms > Add New 。

这是您必须使用的界面：

在左侧边栏中，您可以看到 5 个部分：

1. 设置：命名联系表单并选择其模板。
2. 字段：为联系表单添加和自定义字段。
3. 设置：配置通知、确认和常规设置。
4. 营销：与电子邮件营销工具链接，例如 Constant Contact、Campaign Monitor、Mailchimp……
5. 付款：添加来自 PayPal Standard、Stripe 和 Authorize.Net 的付款。

注意：我不开展任何电子邮件营销活动，而且我的表单不需要付款信息。 因此，我不需要营销和付款部分。

在设置部分，输入您的表单名称并选择所需的模板。

有四个默认模板：

• 简单的联系表
• 通讯报名表
• 建议
• 空白表格

除了空白表单，其他模板都有自己的预建字段，您可以利用这些字段更快地构建联系表单。 此外，您可以安装 WPForms 插件（仅适用于付费版本）以获取更多模板。

在本文中，我选择空白表单模板从头开始逐步构建联系表单。 这将帮助您更轻松、更深入地了解所有内容。

步骤 3：为联系表单添加字段

添加字段

在步骤 2 中选择空白表单模板后，您将被移至“字段”部分。

要为您的联系表单添加字段，请将所需字段从“添加字段”选项卡拖放到联系表单中。

接下来，要自定义字段，请单击它，然后在“字段选项”选项卡中编辑其参数。

此外，您可以通过将鼠标悬停在字段上并单击所需按钮来删除或复制字段。

在本文中，我需要添加以下字段：

添加所有这些字段后，您需要在接下来的步骤中自定义每个字段。

为每个字段自定义常规选项

一般来说，有两种选项可以自定义每个字段：

基本选项：所有字段都包含这些选项，您绝对应该使用它们使您的联系表格清晰易懂。

• 标签：输入要显示的字段名称。
• 描述：这是字段下方的文本显示，告诉用户要做什么。
• 必需：它是可选的！ 勾选它以强制填写此字段。

在接下来的步骤中，当我提到“基本信息”时，意味着您需要处理这些基本选项。

高级选项：每个字段都有一些高级功能。 您可以选择处理它们，但您应该注意一些重要事项：

• 占位符文本：在用户输入数据之前在字段内显示文本。 此文本可作为指南或示例，帮助用户轻松了解他们需要填写的内容。例如，您可以将电子邮件字段的占位符文本设置为“输入您的电子邮件”。
• 默认值：如果有很多人有相同的答案，您可以设置默认答案，以节省用户的时间和精力。 例如，您为居住在纽约的人制作了一个联系表格，因此您可以在“位置”字段中输入默认值“纽约”。
• CSS 类：在此框中输入 CSS 类以设置字段的样式。 在下一步中，我将在本节中包含代码以设置联系表单的样式。

注意：

• 在联系表 7 中，您可以使用默认值作为占位符文本。 但在 WPForms 中更方便，因为您有单独的占位符文本部分。 此外，WPForms 有描述部分，显示字段下的文本。 我使用这种方式是因为它使我的联系表格看起来更好。

• 您可以单击选项/字段旁边的问号按钮来阅读 WPForms 的说明。

此外，根据每个字段，还有一些不同的选项。 让我们找出它们是什么！

自定义“您的姓名”字段

选择Simple Line Text字段并填写基本信息：

在此字段中，高级选项部分还有 2 个选项：

• 限制长度：选中它以选择可在字段中输入的最大字符数的限制。
• 输入掩码：输入输入掩码以要求字段的特定格式。 在此处阅读更多详细信息。

自定义“您的电话号码”字段

这个领域没有什么特别的。 只需选择数字字段并填写基本信息：

自定义“您的电子邮件”字段

选择Email字段并填写该字段的基本信息：

该字段还有一个基本选项：启用电子邮件确认。 您可以选中它以要求用户提供两次电子邮件地址。 这可以确保他们的电子邮件是正确的。

自定义“学习地点”和“主要”领域

首先，选择下拉字段。 在“选项”部分，输入该字段的选项。 您可以单击(+) (-)添加/删除选项。

此外，您还可以单击批量添加按钮一次添加多个选项。 在“添加选项”框中，按所需顺序填写选项（每个选项是一行），然后单击“添加新选项” 。

此外，在此字段中，您应该关注 2 个高级选项：

• 样式：您可以使用两个选项设置下拉菜单的样式：经典和现代。 现代风格允许您按关键字搜索。 因此，它适用于具有大量选项（超过 10 个选项）的菜单。
• 动态选择：允许用户从帖子类型或分类法中进行选择。 例如，如果您选择Dynamic Post Type Source作为Posts ，下拉菜单中的每个选项都是您网站上的一个帖子。

自定义“注册到”字段

选择复选框字段并输入下拉字段等选项。

在此字段中，您应该关注 2 个高级选项：

• 使用图像选择：您可以使用它来说明您的选择，并使您的联系表格更具吸引力和可视化。
• 随机选择：这可以避免人们仅仅因为它是第一个选择而选择它。

步骤 4：配置联系表单

创建联系表单后，我们需要对其进行配置。 在 WPForms 的免费版本中，您可以配置以下三个部分：

配置常规设置

WPForms 插件对这一部分中的每个选项都有具体说明。 您应该单击问号按钮，仔细阅读，并注意以下字段：

• 提交按钮文本：在联系表 7 中，您必须创建提交字段。 但是在 WPForms 中，提交按钮是内置的。 您可以将本部分中此按钮的文本更改为您想要的任何内容，例如注册、发送电子邮件……
• 启用反垃圾邮件保护：有时垃圾邮件发送者可能会通过大量“垃圾邮件”来打扰您。 在这种情况下，您应该打开这个反垃圾邮件功能。

配置通知

如果您想在用户提交联系表单时收到电子邮件通知，请转到设置>通知。

您可以在此部分的字段中添加“智能标签”或文本，以更轻松地管理用户提交联系表单时收到的电子邮件。

注意：智能标签可以自动将信息添加到您的联系表单通知中。

这是我的设置示例：

配置确认

在确认部分，您可以配置用户在提交联系表单后收到的消息。

完成所有配置后，只需单击“保存”即可。

第 5 步：在页面/帖子上显示表单

要在页面/帖子上显示您的表单，有两种方法。

第一种方法是单击嵌入以在页面上显示您的表单：

之后，将联系表单嵌入到您网站上的新页面或现有页面中。

第二种方法是将联系表格的短代码插入到页面/帖子中。 我建议您应该选择第二种方式，因为它可以在帖子和页面上显示联系表。 为此，在Admin Dashboard 上，转到WPForms > All Forms ，找到您的联系表格，然后复制其短代码。

接下来，将此短代码粘贴到所需的帖子/页面。

结果如下：

它看起来不像联系表示例，所以我必须对其进行一些样式设置。

第 6 步：设置表单样式

在管理仪表板上，前往WPForms > All Forms ，找到您的联系表单，然后单击Edit 。

现在，单击每个字段，转到Advanced Options > CSS Classes ，然后添加以下值：

• 您的姓名和注册地址： ip-100
• 您的电话号码，电子邮件，学习地点，专业： ip-50

接下来，转到Customizer > Addition CSS ，添加以下代码：

 .wpforms-field-container {
    显示：弹性；
    flex-wrap: 包裹;
		justify-content: 间距
}

.ip-50 {
    宽度：48%！重要；
}

.ip-100{
		宽度：100%！重要；
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	最大宽度：100%；
}

.ip-100 ul {
	显示：弹性；
	对齐内容：间隔；
}

div.wpforms-container-full {
    底边距：24px；
    背景：#eeeeee；
    填充：20px；
}

最后，点击发布。

这是最终结果：

联系表现在看起来好多了，不是吗？ 好吧，我们刚刚完成了与我的示例完全相似的表单的最后步骤。

最后的话

根据我的经验，使用 WPForms 中的拖放界面比使用 Contact Form 7 更容易、更快捷。此外，它具有预先构建的提交按钮和 2 个更有用的部分，如Placeholder Text和Description 。 实时预览也很方便。 它可以帮助我在创建和自定义表单时更轻松地检测错误。

要了解如何使用更多联系表单插件，请关注我们即将发布的本系列文章！ 如果您对 WPForms 有任何疑问或建议任何联系表单插件，请随时将其留在评论部分。