如何在 WordPress 中创建 Divi 联系表

已发表: 2022-01-20
how to create a divi contact form

寻找一种为您的 WordPress 网站创建 Divi 联系表格的简单方法?

Divi 是市场上最受欢迎的 WordPress 主题之一。 它带有一个用户友好的构建器,可让您从前端自定义您的网站。 您可以添加页面模块,例如号召性用语按钮、联系表单等。

使用 Divi 联系表模块,您无需任何第三方服务即可创建和插入联系表。 如果您想要一种简单的方法在您的网站上添加基本联系表单,这非常棒。

但是,您需要一个强大的表单构建器插件,如 WPForms,以实现用户提交、电子邮件营销等高级功能。

这就是 Divi Builder 还带有 WPForms 模块的原因,因此您只需单击几下即可轻松添加专业的联系表格。

在这篇文章中,我们将向您展示在 WordPress 中创建 Divi 联系表单的这两种方法:

  • 使用 Divi Builder 创建联系表
  • 使用 WPForms 创建 Divi 联系人

使用 Divi Builder 创建联系表

如果您还没有 Divi,首先,您需要注册一个 Divi 帐户。 然后,您将能够访问仪表板并下载您的主题文件。

Divi

在 WordPress 仪表板上安装并激活 Divi 主题后,打开要添加 Divi 联系表的任何页面或帖子。

在帖子编辑器中,您将看到使用 Divi Builder按钮。 单击按钮以在您的网站前端启动构建器。

divi builder post editor

在下一个屏幕上,您将看到从头开始构建页面、选择预制布局或克隆现有页面的选项。

对于本教程,我们将从新页面开始并添加联系表单。

build from scratch divi

然后您将看到 Divi 构建器,您可以在其中选择符合您需求的行模板。

add row divi builder

添加行后,您可以看到“插入模块”面板,该面板可让您添加不同类型的内容模块。

如果向下滚动,您会找到联系表格模块。 只需单击它即可在您的网站上插入 Divi 联系表格。

divi contact form module

默认情况下,联系表单由三个表单字段组成:姓名、电子邮件和消息。 您可以单击“添加新字段”按钮根据需要添加其他表单字段。

divi contact form editor

此外,您还可以在文本设置中找到编辑标题、提交成功消息和提交按钮文本的选项。

divi form name and settings

Divi 还允许您发送电子邮件,以便您收到有关新表单提交的通知。

此外,您还会发现其他有用的选项,例如重定向链接、垃圾邮件防护、后台设置等。

divi contact form settings

使用 Divi 联系表格模块,您可以轻松地将简单的联系表格添加到您的 WordPress 网站。 有很多自定义选项,因此您可以匹配您的品牌风格。

如果您想为 Divi 联系表单添加更多高级功能,那么您需要使用一个好的表单构建器插件。

这正是我们在下一个方法中要做的。 我们将向您展示如何使用最强大的 WordPress 表单生成器 WPForms 创建 Divi 联系人。

使用 WPForms 创建 Divi 联系表

WPForms

WPForms 是 WordPress 最好的拖放表单构建器插件。 它使您只需单击几下即可创建任何类型的表单,例如联系表单、注册表单、下载表单等。

WPForms 带有 100 多个预构建的表单模板,因此您无需从头开始创建联系表单。 您可以添加或删除任何表单字段并根据需要自定义它们。 你甚至不需要任何编码知识。

您使用 WPForms 创建的所有联系表单都将 100% 响应,因此它们将在任何屏幕尺寸上精美显示。 甚至还有一个内置的垃圾邮件保护选项,因此您可以防止在您的网站上提交垃圾邮件和欺诈表单。

WPForms 的活跃安装量超过 500 万,深受全球各类企业的喜爱。 如果您是 Divi 用户并想在您的网站上添加惊人的联系表格,那么您也可以继续使用 WPForms。

以下是您应该使用 WPForms 构建 Divi 联系表格的一些原因:

  • 易于使用和设置
  • 高级表单通知和确认
  • 文件上传和内容提交功能
  • 内置表单提交管理系统
  • 电子邮件营销集成以增加您的电子邮件列表
  • 表单放弃选项以捕获部分表单条目
  • 电子商务和支付选项的表单字段

好消息是,Divi Builder 中有一个 WPForms 模块。 因此,您可以轻松地在您的网站上添加您使用 WPForms 构建的联系表单。

此外,您可以在任何 WordPress 网站上使用 WPForms,无论是否有 Divi。 如果您决定停止为 Divi 付款,您使用 WPForms 创建的表格将在您的网站上保持不变。

话虽如此,让我们学习如何使用 WPForms + Divi 创建联系表格。

第 1 步:安装并激活 WPFroms 插件

首先,您需要注册一个 WPForms 帐户。

WPForms 提供灵活的定价计划,旨在满足所有类型企业的需求。 您可以选择适合您业务的计划。 还有一个免费的精简版。

注册后,您将能够访问您的 WPForms 仪表板。 您将在“下载”选项卡上找到插件文件以及您的许可证。

WPForms license key

您需要在您的 WordPress 网站上安装此插件文件。 有关这方面的更多详细信息,您可以查看我们关于如何安装 WordPress 插件的指南。

在您的站点上安装并激活 WPForms 后,导航到管理仪表板上的WPForms » 设置选项卡。

在这里,您需要输入许可证密钥并单击“验证密钥”按钮。

verify wpforms license

然后,您将看到验证成功消息。 现在您可以开始使用 WPForms 创建您的联系表格。

第 2 步:创建联系表

要创建新表单,请转到 WordPress 仪表板上的“添加新”选项卡。 这将启动模板库,您可以在其中搜索适合您网站的联系表单模板。

对于本教程,我们将从简单联系表单模板开始。 此模板包括联系人表单所需的所有基本表单字段,例如姓名、电子邮件和消息。 您还可以预览任何其他模板,看看哪个更适合您。

为您的联系表格输入一个名称,然后单击您选择的表格模板上的使用模板按钮。

create divi contact form in wpforms

在下一个屏幕中,您将看到 WPForm 的拖放表单构建器。 所有表单域都在左侧,表单预览在页面右侧。

您会发现大量有用的表单字段,例如数字、下拉菜单、多项选择、文件上传、评级、富文本等等。

wpforms form fields

要插入表单域,您只需从左侧将其拖动并放置在表单预览中即可。

wpforms drag and drop

如果您想自定义这些表单字段中的任何一个,您可以单击它们,您将看到字段选项。 根据表单字段,可以选择更改表单标签、描述、必需和其他附加选项。

add file upload to divi contact form

将所有必填字段添加到 Divi 联系表单后,单击表单构建器顶部的保存按钮。

接下来,您需要设置表单设置、通知和确认。

步骤 3:配置表单设置

要更改表单设置,请从表单构建器的左侧菜单面板中打开设置 » 常规选项卡。 在这里,您可以更改表单名称、表单描述、提交按钮文本等。

您还可以选择在您的网站上启用反垃圾邮件保护。 这将为您的联系表单设置 Google reCAPTCHA。

general settings wpforms

前往设置»通知选项卡为您的 Divi 联系表设置电子邮件通知。 您会看到有一个默认通知发送到管理员电子邮件地址。

您可以添加多个电子邮件地址或单击添加新通知按钮以发送多个表单通知。

有了这个,您可以通知您和您的团队成员有关新表单提交的信息,向客户发送他们的提交详细信息等等。

form notificaitons wpforms

如果您想了解更多信息,可以查看我们关于如何设置正确的表单通知和确认的指南。

同样,WPForms 让您决定用户在您的网站上提交他们的联系信息后会发生什么。 转到设置»确认选项卡,您将看到选择确认操作的选项。

wpforms-confirmations

因此,您可以在用户点击提交按钮后在前端显示自定义的“谢谢”消息。 或者,选择重定向选项将用户发送到您网站上的不同页面或外部 URL。

完成表单设置后,请确保单击“保存”按钮。

现在您的联系表格已准备就绪,您可以使用 Divi Builder 将其插入您的网站。

第 4 步:在 Divi 中添加 WPForms 模块

要在任何页面或帖子上添加此联系表单,请打开 Divi Builder 并选择一个行布局,就像我们为 Divi 联系表单模块所做的那样。

这里唯一的区别是您需要搜索WPForms模块。

divi wpforms contact form

插入 WPForms 块后,您将看到用于选择刚刚创建的联系表单的设置。 还有一些选项可以显示您的联系表格的标题和描述。

choose wpforms contact form

您甚至可以使用 Divi Builder 更改联系表单的设计和样式。 当您对 Divi 联系表的外观感到满意时,请单击右侧的勾号按钮。

第 5 步:发布您的 Divi 联系表

最后一步是发布您的联系表格。 为此,请单击 Divi Builder 底部的 3 个点按钮。

publish divi contact form

然后,您将看到不同的选项,例如缩放、响应式预览等。 在右侧,有两个按钮:保存草稿和发布。

单击发布按钮以在您的 WordPress 网站上发布您的页面和联系表格。

publish your divi contact form

您已使用 Divi 和 WPForms 成功创建了联系表单。 虽然 Divi 确实提供了一个联系表单模块,但它缺乏一些功能,如文件上传、条目管理和电子邮件列表集成。

使用 WPForms,您可以轻松解决这些问题。 它包含许多特性和功能,可帮助您创建从基本到专业的所有类型的联系表格。

WPForms 还允许您根据您的要求为任何目的创建 WordPress 表单。 您可以构建订单表、活动注册表、注册表单等等。

今天就是这样! 我们希望本教程能帮助您学习如何在 WordPress 中轻松创建 Divi 联系表单。

如果您需要有关 WordPress 表单的更多帮助,可以查看以下资源:

  • 如何在 WordPress 中创建活动注册表
  • 适用于 WordPress 的 8 个最佳电子邮件捕获工具和表单构建器
  • 如何轻松减少表单遗弃

这些帖子将帮助您在 WordPress 表单上注册用户并增加您的电子邮件列表。 最后一个将帮助您降低表单的放弃率并提高转化率。