如何通过 5 个步骤构建 Elementor 条件逻辑表单

已发表: 2022-03-29

Elementor 表单添加条件逻辑可以提高表单提交率。

如何? 好吧,因为条件逻辑 Elementor 表单可以确保您的客户不必填写不必要的字段。 因此,它提供了更好的用户体验。

你知道 Elementor 条件逻辑形式最好的部分是什么吗?

好吧,最好的部分是构建 Elementor 条件逻辑表单是一项非常容易的任务。 特别是如果您关注这篇文章。 因为在本博客中,您将学习如何通过5 个步骤构建 Elementor 条件逻辑表单。

此外,您将了解使用 Elementor 条件逻辑形式的优势以及何时使用它。

所以,继续阅读……

内容隐藏
什么是表单中的条件逻辑?
为什么以及何时在 Elementor 形式中使用条件逻辑?
如何构建条件逻辑 Elementor 表单:分步指南
第 1 步:安装必要的插件
第 2 步:将 MetForm 小部件拖放到您的 Elementor 页面
第 3 步:创建/添加表单到您的页面
第 4 步:向 Elementor 表单字段添加条件逻辑
第 5 步:自定义与 Confirmation、Notification 相关的表单设置以完成
如何使用 MetForm 的 Pre Built 模板在 Elementor 中添加条件表单
最后的话

什么是表单中的条件逻辑?

表单中的条件逻辑是一种根据用户输入控制表单行为方式的方法。 您可以隐藏特定的表单字段或多个字段,并且仅在用户执行特定操作或在表单中选择特定值后才显示它们。

这是当今 WordPress 表单中的常见做法。 转到下一部分,了解为什么条件逻辑很受欢迎,以及人们通常何时在表单中使用它。

为什么以及何时在 Elementor 形式中使用条件逻辑?

有条件的表格实际上非常有效地确保您的客户在填写表格时获得最佳体验。 此外,它还可以确保您获得所需的确切数据量。

想知道怎么做?

好吧,客户并不特别喜欢填写表格。 让我们面对现实吧,这真的不是任何人的爱好!

最重要的是,如果您要求他们提供对他们不是特别有用/不相关的信息,那么您的用户很明显会生气。

这正是表单中的条件逻辑派上用场的地方。 因为使用条件逻辑,您可以确保您的表单只会要求用户填写相关信息,而不是表单中的所有字段。

基本上,Elementor 中的条件形式遵循“如果条件”逻辑。 例如,如果条件 A 为真,则动作 X 将发生,否则不会。 您还可以为单个操作设置多个条件。 例如,只有当条件 A 和条件 B 都为真或其中任何一个为真时,动作 X 才会发生。

让我们谈谈一个现实生活中的例子,假设您想知道一个活动会带多少孩子。

现在你不需要让每个人都填写孩子的数量。 您可以先询问他们是否打算带孩子,一旦他们同意,您就可以在表格中显示选项以选择他们将带多少孩子。

这样,那些不打算带孩子的人就不必填写孩子字段的数量。 事实上,他们将有一个较短的表格,这将激励他们完成填写表格,而不是中途放弃。

综上所述,以下是在 Elementor 形式中使用条件逻辑的优点:

  • 它节省了用户的时间,因为用户只需要填写适合他们的字段。
  • 由于条件表单更方便,因此改善了用户体验。
  • 鼓励用户填写表单,因为它们比没有条件逻辑的表单要短。
  • 您可以获得所有相关信息并提高表单提交率。

既然您知道条件逻辑有多有用,让我们继续下一部分,您将学习如何将条件逻辑添加到 Elementor 表单。

如何构建条件逻辑 Elementor 表单:分步指南

正确按照所有步骤在几分钟内创建条件逻辑 Elementor 表单。

第 1 步:安装必要的插件

要将条件逻辑添加到 Elementor 表单以及 Elementor 免费版本,您需要安装 Elementor 表单构建器 MetForm。 你将需要两者

  1. MetForm(免费)
  2. MetForm Pro

如果您在安装和激活 MetForm 的过程中需要帮助,可以查看文档。

注意:您不需要 Elementor Pro 版本来执行此过程。

立即获取 MetForm

第 2 步:将 MetForm 小部件拖放到您的 Elementor 页面

现在转到要添加 Elementor 条件逻辑表单的页面。 您可以将条件表单添加到现有页面或创建新页面。 但是,请确保您处于使用 Elementor 编辑模式。

条件逻辑 Elementor 形式

现在搜索 MetForm,找到小部件后,将其拖放到页面上。

Elementor 条件逻辑形式

第 3 步:创建/添加表单到您的页面

现在,您可以选择现有表单或创建新表单。 要创建新表单或添加现有表单,请单击“编辑表单”按钮。

条件逻辑 Elementor 形式

我已经创建了一个演示预订表格,所以我要

  • 选择“选择表格”
  • 下拉列表选择我现有的名为“Conditional logic Elementor form”的表单
  • 然后点击编辑表格。
条件逻辑 Elementor 形式

如果您想使用 MetForm 从头开始​​构建您的表单,请查看我们的博客
如何使用 MetForm 从头开始​​创建多步骤联系表格。

第 4 步:向 Elementor 表单字段添加条件逻辑

使用 MetForm 条件功能,您可以根据多个条件隐藏/显示表单字段,例如相关字段是否为空、不为空、等于(匹配某个值)、不等于、大于、大于等于、小于、等等。此外,您可以自定义是否所有条件都需要为真,或者其中任何一个条件都需要为真才能执行操作。

在本文中,我将应用其中一些条件,您可以按照相同的步骤应用所有条件。 要应用任何条件,您需要执行以下步骤:

编辑字段并启用条件逻辑

为此,在表单字段上,单击右上角的编辑图标,然后在左侧设置面板上向下滚动一点,然后展开条件逻辑选项,最后打开启用按钮。

条件逻辑 Elementor 形式

  设置标准和操作

现在,从下拉列表中选择条件匹配条件为 AND /OR和操作类型为显示此字段/隐藏此字段

条件逻辑 Elementor 形式

设置条件

现在是设置条件,设置条件的时候了

  • 点击+ 添加新项目
  • If 字段上,添加要添加条件的字段的名称
  • 匹配(比较)下拉列表中选择条件。

例如,我想让“电子邮件”字段仅在“全名”字段不为空时可见。 因此,当有人填写他们的姓名时,电子邮件字段才会出现。 为此,我将

  • 复制全名文本字段的名称
  • 返回电子邮件字段条件逻辑部分并将其粘贴到“如果字段”
  • 最后从匹配(比较)下拉列表中选择不为空
Elementor 中的条件形式 Elementor 形式条件字段

按照这些确切的步骤将条件逻辑添加到 Elementor 条件表单的所有表单字段,或者根据您的要求添加几个。

注意:如果要为具有多个选项的单选或复选框等表单字段设置条件,则需要将字段名称放在 If 字段上,并在匹配值字段上设置单选/复选框的选项值。

例如,要使其他状态字段仅在某些人选择其他人作为其材料状态时出现,您需要 

  • 选择匹配(比较)等于
  • 复制婚姻状况字段名称
  • 将其粘贴Other Status 的条件逻辑的“If”选项中
  • 婚姻状况比率字段复制其他选项的值
  • 然后将其粘贴到其他状态的条件逻辑的“匹配值”选项中
Elementor 中的条件形式

我已按照相同的步骤使Need Pet 保姆表格仅在Number of Pets 大于 1时可见。

Elementor 中的条件形式

在弹出窗口中添加表单是一种经过验证的铅磁铁。 检查如何通过3 个步骤在模式弹出窗口中添加表单。

第 5 步:自定义与 Confirmation、Notification 相关的表单设置以完成

将所有条件逻辑添加到 Elementor 表单后,单击FORM SETTINGS自定义不同的设置。 你可以

  • 在常规设置下自定义标题、成功消息、所需登录、查看次数等。
  • 您可以在确认设置下自定义选项,例如打开确认、设置电子邮件主题、电子邮件发件人、发件人电子邮件和感谢信息等。
  • 在通知设置下,您将获得电子邮件通知选项,例如向管理员启用通知邮件、电子邮件主题、电子邮件收件人、电子邮件发件人、管理员注释等。

如果需要,您还可以设置不同的付款和 CRM 集成。 有关这些主题的更多详细信息,请查看文档。 进行所有更改后向下滚动并单击保存更改。

Elementor 条件逻辑形式

单击UPDATE & CLOSE以保存您刚刚创建的条件表单。

Elementor 条件逻辑形式

现在,如果您单击预览按钮,您应该会看到如下所示的 Elementor 条件表单:

Elementor 条件逻辑形式
立即获取 MetForm

如何使用 MetForm 的 Pre Built 模板在 Elementor 中添加条件表单

现在,如果您正在寻找 Elementor 条件逻辑表单的预制模板,那么您找不到比 MetForm 更好的选择。 因为这个 WordPress 表单构建器提供了 6+ 个预制的 Elementor 条件逻辑表单模板。

要使用 MetForm 的预建条件形式,当您到达上述过程的第三步时,向下滚动一点以找到所有条件形式。 要选择您喜欢的表格,请单击表格,然后单击编辑表格。

Elementor 形式的条件逻辑

当表单加载时,点击 UPDATE & CLOSE,最后保存你的页面。 这是 MetForm 预制的 Elementor 条件逻辑表单的预览:

Elementor 条件逻辑形式 条件逻辑 Elementor 形式

相关文章:
MetForm vs Contact Form 7 vs Gravity Forms:哪个是最好的表单生成器?
如何创建引人入胜的空缺申请表

最后的话

恭喜! 现在您知道如何向 Elementor 表单添加条件逻辑了。 我希望现在您将使用此过程在您的 WordPress 网站中制作用户友好的 Elementor 条件逻辑表单。

请记住,您的工作是确保用户需要尽最大努力填写您的表单。 这就是 MetForm 的条件特性的惊人作用。 此外,MetForm 还支持简码。

不要忘记预建的 Elementor 条件逻辑表单模板。 此外,我强烈建议您查看 MetForm 的所有惊人功能。 这个 WordPress 插件的高级功能将帮助您构建更优化的 Elementor 表单。

下载 MetForm