深入了解 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 就不會是現在的樣子。