深入了解 Drupal 8/9 的 Webform 模块

已发表: 2021-10-12

Webform 模块是 Drupal 最强大、最灵活的表单构建器和提交管理器。 它使网站建设者能够立即轻松创建复杂的表单。 它带有一定级别的默认设置，还可以让您根据自己的要求进行自定义。

查看这个令人惊叹的博客 - Drupal 8 Webform 模块 - 一个简短的教程，以帮助您开始使用 Drupal 8/9 站点中的 Webform 模块。 这将帮助您轻松了解基础知识。

Webform 模块附带了许多有趣的功能，我想在这里提几个。

网页表格模块

网络表单功能

1. 改变形式和元素

任何表单、元素及其相关设置都可以通过使用它们各自的钩子来更改。 下面是一些可用的钩子，你可以在webform.api.php文件中找到更多：

  • 形式挂钩

◦ hook_webform_submission_form_alter()
◦ 在呈现 Web 表单提交表单之前执行更改。

  • 元素挂钩

◦ hook_webform_element_alter()
◦ 更改网络表单元素。

  • 选项挂钩

◦ hook_webform_options_alter()
◦ 更改网络表单选项。

  • 处理程序钩子

◦ hook_webform_handler_invoke_alter()
◦ 在调用方法时对 webform 处理程序执行操作。

  • 更多钩子……

◦ hook_webform_access_rules_alter() 等。
◦ 更改应在每个 Web 表单级别上管理的访问规则列表。

2. YAML 源码

Webform 模块最初是一个 YAML 表单模块，它允许人们通过编写 YAML 标记来构建表单。 在某个时候，YAML 表单模块开始拥有 UI，并成为 Drupal 8 的 Webform 模块。

  • YAML 提供了一种简单易学的标记语言，用于构建和批量编辑网络表单的元素。
  • （查看）源页面允许开发人员使用 YAML 标记编辑网络表单的渲染数组。 开发人员可以使用（查看）源页面对网络表单进行手动编码，以快速更改网络表单的标签、剪切-粘贴多个元素、重新排序元素以及向元素添加自定义属性和标记。
  • 以下是联系表单及其相应 YAML 源代码的示例：

带有拖放 UI 的联系表单

带有拖放 UI 的联系人表单

YAML 源代码

联系表单的 YAML 源代码

3. 条件字段

Webform 允许您向表单中的元素添加条件逻辑。 让我们考虑一个小例子，其中我们需要根据表单中另一个元素的值有条件地处理元素的可见性。

这是一个包含两步字段的示例表单，第1步（无线电元素）带有选项“电子邮件”和“手机号码”。 第 2步（字段集）有两个元素，“电子邮件”和“手机号码”。

构建页面

表单构建页面

表单查看页面

表单查看页面

在上面的示例中，如果在步骤 1 中选择了“电子邮件”选项，我想显示“电子邮件”字段，如果在步骤 1 中选择了“手机号码”选项，则显示“手机号码”字段。

为此，请编辑您的“电子邮件”字段，单击“条件”选项卡，将“状态”选择为“可见”并将“触发器/值”设置为“步骤 1 [无线电] 值是电子邮件”。 同样，按照相同的步骤将条件逻辑添加到您的“手机号码”字段，并将“触发器/值”设置为“步骤 1 [Radios] 值是 mobile_number”。 这是 Webform 的最终外观：

编辑电子邮件元素

设置条件逻辑

步骤1

在步骤 1 中选择“电子邮件”时的表格

第2步

在第 1 步选择“手机号码”时填写表格

4. 自定义选项属性

Webform 允许您向 from 元素添加自定义选项属性。

想象一个场景，您希望根据表单中不同元素的值有条件地处理单选元素的选项。 你会怎么做？

好吧，我没有找到通过 UI 中的条件逻辑设置来处理它的任何方法。 但是有一个条款可以为您的元素设置“自定义选项属性”，您可以在其中使用 YAML 代码编写针对元素中的选项所需的条件逻辑。

这是一个例子，我们可以看到两个单选元素，根据我在第一个元素中选择的选项，第二个元素中选项的可见性应该改变。

表单构建页面

表单构建页面

自定义选项

添加任何自定义选项属性之前的表单视图页面：

  • 如果选择“类型 A”，则“选项 1”和“选项 2”应从第二个元素可见。 同样，如果选择“类型 B”，则“选项 3”和“选项 4”应该可见。 要实现此编辑第二个元素，请转到“高级”选项卡，向下滚动到“选项（自定义）属性”部分并在 YAML 中编写必要的逻辑。
选项元素编辑选项元素

设置选项属性

选择类型

选择“类型 A”时的表格

选择类型 B

选择“类型 B”时的表格

5. Webform 提交电子邮件处理程序

  • 电子邮件处理程序

电子邮件处理程序通过电子邮件发送网络表单提交。 要将电子邮件处理程序添加到您的网络表单，请转到“设置”，然后转到“电子邮件/处理程序”选项卡。 接下来，单击“添加电子邮件/添加处理程序”按钮。

电子邮件处理程序

添加电子邮件处理程序

  • 如下图所示，在“常规”选项卡上，添加“标题”并设置“发送至”和“发送自”详细信息。 根据需要添加消息“主题”和“正文”并保存配置表单。
邮件确认确认处理程序电子邮件确认处理程序信息标题描述

就是这样。 每当提交表单时，您的处理程序就会被触发。

  • 您还可以为您的网络表单设置条件电子邮件处理程序，即根据表单中某些元素的值触发不同的电子邮件处理程序。
  • 例如，让我们考虑一个值为“Type 1”和“Type 2”的“Select”元素。 如果用户提交“类型 1”，则触发已将“收件人”地址设置为“ [电子邮件保护] ”的“电子邮件 - 类型 1”处理程序。 如果用户提交“类型 2”，则触发已将“收件人”地址设置为“ [电子邮件保护] ”的“电子邮件 - 类型 2”处理程序。
  • 要将条件逻辑添加到您的电子邮件处理程序，请创建一个处理程序并将其命名为“电子邮件 - 类型 1”。 将“收件人”地址设置为“ [电子邮件保护] ”，切换到“条件”选项卡，将“状态”选择为“可见”并将“触发器/值”设置为“选择类型[选择]值是type_1”。
  • 同样，创建第二个处理程序并将其命名为“电子邮件 - 类型 2”。 将“收件人”地址设置为“ [电子邮件保护] ”，切换到“条件”选项卡，将“状态”选择为“可见”并将“触发器/值”设置为“选择类型 [选择] 值是 type_2”。
电子邮件类型

  • 预定的电子邮件处理程序

    • 它扩展了 Webform 模块的电子邮件处理程序以允许安排电子邮件。 要使用此功能，请启用“Webform Scheduled Email Handler”子模块。
    • 要安排发送表单提交的电子邮件，请单击“添加处理程序”按钮。 在此处选择“预定电子邮件”处理程序。
选择处理程序

与普通的“电子邮件处理程序”相比，“预定电子邮件”处理程序中只有一项额外的配置设置。 那就是在常规设置选项卡下添加计划电子邮件日期。

安排电子邮件处理程序

预定的电子邮件处理程序

设置触发您的处理程序的日期，当下一个 cron 运行时，您的电子邮件将被发送！

寻求帮助

您可以通过多种方式寻求有关网络表单模块的帮助。 以下是一些来源的列表：

  • 文档、食谱和截屏视频
    • https://www.drupal.org/docs/8/modules/webform
  • 网络表单问题队列
    • https://www.drupal.org/project/issues/webform
  • Drupal 答案
    • http://drupal.stackexchange.com
  • 松弛通道
    • 您始终可以在 Drupal 松弛工作区中的 #webform 频道发布有关 Webform 模块的查询。 来自社区的任何人，甚至模块维护者自己都在身边，并且很友好地指导您解决问题。

感谢 Jacob Rockowitz 对 Drupal 8/9 Webform 模块的不懈支持。 如果没有他，Webform 就不会是现在的样子。