WordPress divi主题

如何使用条件逻辑创建多功能 Divi 联系表

| 4月 26, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

并非每个访问者都出于同样的原因访问您的网站。 您可能提供一系列产品或服务,而不仅仅是为客户和客户提供单一选择。 这就是为什么拥有多个有针对性的联系表格可以帮助您理顺您网站的用户体验,以便您的客户(和潜在客户)能够以尽可能少的摩擦与您联系,了解他们的确切需求。 使用 Divi 联系表单模块和我们的条件逻辑功能,我们将引导您尽可能地在您和您的用户之间创建最佳管道。

google广告开户

有条件联系表的预览

当一切都说完了,你的网站上就会有类似的东西,可供访问者使用。

桌面

移动的

什么是条件逻辑?

首先,我们想简要说明一下我们所说的意思 条件逻辑. 我们在本教程中要做的是设置一系列联系表单,这些表单会根据用户做出或不做出的选择而出现。

例如,您可以有一个单一的联系表格,根据访问者需要的服务或产品进行调整。 这样,您可以获取所需格式的信息,而无需他们将其写出来。 联系表单上的条件逻辑可以增强沟通并加快您为用户提供服务的能力。

考虑到这一点,让我们深入研究创建有针对性的联系表格。

如何使用条件逻辑创建联系表单

加载 Divi 生成器

由于我们使用的是 Divi Contact Form 模块,因此我们需要进入 Divi Builder。 我们将使用景观维护布局包作为本教程中的示例。 您可以使用任何您想要的布局或设计,但您需要能够使用 Divi 联系表单模块并为其设置样式。

首先从 WordPress 网站的后端进入 Divi Builder。 在页面编辑器中,您会看到一个紫色按钮,上面写着 使用 Divi Builder (或者 使用 Divi Builder 进行编辑 如果您已经创建了页面)。

使用 divi builder 进行编辑以添加联系表格

添加或查找联系表单模块

然后你会想要找到 联系表格模块 已存在于页面上或单击 黑色+圆形 图标并找到 联系表 在下拉菜单中。

divi联系表格模块

WordPress divi主题

输入联系表设置

Divi 联系表单模块默认包含 3 个字段: 姓名, 电子邮件, 和 信息. 我们要做的是创建一个联系表单,在访问者向我们提供足够的信息以指导他们的查询之前,这些选项不会出现。

divi 联系表格选项

添加第一个条件问题

在下面 内容 选项卡和表单中已有的任何字段下方,您将看到 添加新字段 按钮。 点击那个。

添加新字段

这样做会打开 字段设置 窗口,你应该看到的地方 字段 ID标题 条目。 这 字段 ID 是给你的。 这就是模块设置中显示的内容,供您跟踪。 这 标题 是您的访问者将在表单前端看到的文本。 (标题也会出现在您提交表单时收到的电子邮件中。)

条件问题

我们已经标记了 字段 ID 使用“有条件的”,因为这是访问者将在表单上看到的第一个问题。 他们对它的反应将决定他们接下来会看到什么。 这是一种跟踪表单问题和答案流程的简单方法。

添加字段选项

接下来,滚动到 内容选项卡字段选项 部分。 您将在此处添加供用户选择的选项。 这些中的每一个都将触发某些后续问题。 对于这个例子,我们使用 复选框 作为我们的输入类型。 这意味着用户可以根据需要选择任意数量。

选择字段类型

此外 复选框Divi 还允许其他选项: 输入字段 文本区域 对于用户自己输入的响应, 选择下拉菜单单选按钮 对于您提供的单一选择,以及 电子邮件字段 用于电子邮件地址输入。 默认 姓名 字段是一个 输入字段, 和 信息 是一个 文本区域.

fiverr建站WordPress程序员

复选框 选中后,我们将输入我们想要触发不同选项的选项。 然后我们要确保这是一个 必填项目 所以用户不能过早地提交表单。

联系表单字段选项

需要注意的是,我们 不要添加条件逻辑 到这一步。 这是触发器,因此无论如何它都会出现在用户面前。

为条件响应添加新字段

然而,接下来,我们将添加 条件逻辑 对于新的 字段 我们添加为后续响应。 因为我们为最初的问题提供了 3 个选项,所以我们将 在表单中添加 3 个新的对应字段. 您将为每个步骤重复以下步骤。

新的答案字段

独立站选品工具

在新字段中命名条件响应

请注意,我们使用了一个命名约定 条件 1 (表示第一个条件触发)然后 1a, 1b, 和 1c 用于后续响应。 我们还对它们进行了适当的标记,以便我们可以跟踪它们是什么。

条件问题

和第一个问题一样,我们也将输入 标题 作为访问者将看到的问题。

将条件逻辑添加到响应字段

之后,向下滚动到 条件逻辑 下的部分 内容 该字段的选项卡。 启用切换 条件逻辑. 然后,选择 关系 对于这个,这意味着您可以将其设置为 任何 (任何数量的响应都可以使此选项弹出)或 全部 (只有特定的响应组合才会出现此字段)。

如果您像我们一样只使用单个触发规则,要么 任何 或者 全部 将工作。

高质量外链购买

联系表单的条件逻辑

在下面 规则,您将看到触发该字段的字段,在右侧,您可以选择哪个选项将触发它。 中心是限定符,例如 等于、不等于、小于、大于, 等等。 对于这个特定领域,我们选择我们设置为的问题 条件 1 然后是其中专门触发此字段出现的选项。

对所有条件响应重复此操作

由于我们为单个条件问题添加了三个不同的响应,因此我们也将对其他字段重复此确切过程。 仅为该选择创建适当的相关响应。

设置联系表格恶魔“姓名/电子邮件/消息”以显示

一旦您为条件逻辑设置了响应,我们希望访问者实际上能够提交表单。 为此,我们将调整 姓名, 电子邮件, 和 信息 字段。 每一个的设置都完全相同,所以再一次,您将重复此操作 3 次。

在 – 的里面 姓名, 电子邮件, 和 信息 字段设置,进入 条件逻辑. 启用它并添加尽可能多的 最后的回应 您的有条件的后续问题。 在我们的案例中,我们有 3 个后续问题,因此我们使用了 3 个规则。

JasperAI 10000字免费额度试用

联系表单中跟进的条件逻辑

对于每个规则,选择后续问题作为触发器。 将限定符设置为 不为空,意思是只要访问者回答了问题,就满足了条件。 这将使最后一个框变灰,表明任何答案都足够了。

保存您的更改,然后 对您希望显示的任何字段重复此操作以允许提交表单. 就是这样! 您的表单将立即根据用户的需求进行调整。

最终结果

您可以在下面看到条件逻辑在实践中是如何工作的。

桌面

移动的

包起来

联系表格是网站中最普遍的元素之一。 几乎每个站点都有一个,几乎每个站点都需要一个。 但并非每个用户都出于同样的原因访问您的网站。 通过使用 Divi 的条件逻辑功能,您可以将您的联系表格自定义为一个多功能工具,供您的用户进行交流。

WordPress备份工具updrafplus

您使用 Divi 条件逻辑功能制作了哪些类型的表格?

文章特色图片来自 Kubko / shutterstock.com

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题