移至主內容

網頁表單Webform

2026/6/3 , written by Wanding

Webform 是 Drupal 生態系中功能最完整的表單建構模組,Webform模組可讓您建立任何類型的表單,收集任何類型的數據,並將數據提交到任何應用程式或系統。無論您需要包含多列輸入佈局和條件邏輯的多頁面表單,還是將資料推送至 Salesforce/CRM 的簡單聯絡表單,Webform模組都能讓你輕鬆實現。

Webform提供了強大的功能和靈活性,使您能夠創建各種不同類型的表單,從簡單的聯絡表單到複雜的多頁面調查表單。您可以它用來收集用戶輸入、進行數據驗證、設置條件邏輯以及將數據提交到外部系統。

另外,Webform還提供了豐富的功能,例如:多列輸入佈局、條件邏輯、多頁面表單、數據驗證、數據導出等。這些功能使您能夠創建高度自訂的表單,以滿足您的特定需求。

核心架構

Webform的架構分成三層:表單設計層、提交處理層、輸出與整合層

Webform架構圖

主要功能特點

50多種欄位類型,涵蓋基本輸入(文字、日期、下拉、checkbox)、進階元素(文件上傳、簽名欄、地址自動完成、評分星號),以及複合型元素如可動態新增列數的 Table、支援子表單巢狀結構的 Composite Element。

**條件邏輯(Conditional Logic)**是 Webform 的核心亮點,可設定「當 A 欄位等於 X 時,顯示/隱藏/必填 B 欄位」,完全不需寫 JavaScript,邏輯在後台 UI 直接配置。

**多步驟精靈(Wizard)**將長表單切割成多個頁面,每頁可各自設定標題和進度條,適合報名流程、問卷調查或申請書。

Handler 系統是可選用的提交後動作,內建包含:

  • 發送 Email(支援 Token 動態填入欄位值)
  • 儲存到資料庫(或刻意「不儲存」只發 email)
  • 重新導向到指定頁面
  • 執行自訂 PHP 動作(需寫 Plugin)

與 Drupal 生態系的深度整合

Webform 產生的提交資料是標準的 Drupal Entity,因此可以:

  • 透過 Views 建立後台管理列表,加篩選、排序、匯出
  • 透過 Rules 或 ECA 模組觸發進階自動化流程
  • 透過 Paragraphs 或任何 Content Type 的參照欄位嵌入表單
  • 透過 Webform REST API 子模組讓 decoupled 前端(如 Next.js)遠端提交

使用情境

Webform 模組適用於各種不同的使用情境,以下是一些常見的使用情境:

  • 聯絡表單:讓用戶可以輕鬆地與您聯繫。
  • 調查表單:讓您可以收集大量的數據和反饋。
  • 報名表單:讓用戶可以輕鬆地註冊活動或課程。
  • 申請表單:讓用戶可以輕鬆地提交申請,例如工作申請或獎學金申請。
  • 訂閱表單:讓用戶可以輕鬆地訂閱您的電子報或其他內容。

進階子模組

Webform 本體非常輕量,大量進階功能以子模組形式按需啟用,例如 webform_ui(GUI 編輯器)、webform_submission_export(匯出)、webform_node(與 Node 掛鉤)、webform_access(權限控管)。

Webform 七大應用場景互動展示

大學

課程 / 活動報名

多步驟精靈,收集姓名、學號、飲食偏好,自動寄確認信,後台 Views 一鍵匯出名冊。

  • 步驟進度條
  • 名額上限自動關閉
  • 確認 Email 自動發送

2025 研討會報名 — 步驟 1 / 3

醫療

病患預約掛號

日期時間選擇器+科別下拉,條件邏輯依選擇顯示不同問題,資料可不落地只發 email。

  • 條件邏輯顯示欄位
  • 提交資料不儲存選項
  • 自動通知診間人員

線上掛號

骨科初診請攜帶 X 光片(若有)
問卷

課後 / 服務滿意度問卷

評分星號元件、NPS 量表、開放式意見欄,後台自動統計並可匯出 Excel 報表。

  • 星號評分 / NPS 量表
  • 匯出 CSV / Excel
  • Views 顯示統計圖

本次課程滿意度調查

分數:8
生技

樣品送測申請

動態新增多筆樣品(Table 元素),上傳規格文件,條件邏輯依樣品類型顯示不同必填欄位。

  • 動態多筆資料輸入
  • 文件上傳附件
  • 依類型切換必填欄位

樣品送測申請單

樣品名稱數量樣品類型
拖曳或點選上傳 PDF / DOCX
大學

設備借用申請

填寫借用日期區間後,Handler 自動寄通知給設備管理員,並在 Views 列表顯示目前借用狀況。

  • 日期範圍選擇器
  • 管理員 Email 通知
  • 借用狀態後台管理

儀器設備借用申請

此設備目前 6/3–6/5 已有借用,請錯開日期
企業

TTQS 訓練出席 / 回饋單

與 Drupal 節點綁定,每堂課自動建立對應表單,結訓後彙整成訓練記錄,符合 TTQS 稽核需求。

  • 綁定訓練課程節點
  • 電子簽名確認出席
  • 結訓報告自動彙整

訓練出席暨滿意度回饋單

課程:Linux 伺服器管理實務 日期:2025-06-10 時數:6H
滿意
醫療

受試者同意書 / 健康問卷

長文條款顯示後才能勾選同意、多頁分段填答、提交後觸發 Webhook 通知臨床系統,資料可加密。

  • 條款閱讀後才可同意
  • Webhook 通知外部系統
  • 提交資料加密儲存

受試者知情同意書

本研究計畫由○○醫學中心倫理審查委員會核准(案號:IRB-2025-012)。您的參與完全出於自願,可於任何時間退出而不影響您所接受之醫療服務。所收集之個人資料將依個人資料保護法規定,以加密方式儲存,僅供本研究使用…(請向下捲動閱讀完整條款)

網頁表單Webform

2026/6/3 , written by Wanding

Webform 是 Drupal 生態系中功能最完整的表單建構模組,Webform模組可讓您建立任何類型的表單,收集任何類型的數據,並將數據提交到任何應用程式或系統。無論您需要包含多列輸入佈局和條件邏輯的多頁面表單,還是將資料推送至 Salesforce/CRM 的簡單聯絡表單,Webform模組都能讓你輕鬆實現。

Webform提供了強大的功能和靈活性,使您能夠創建各種不同類型的表單,從簡單的聯絡表單到複雜的多頁面調查表單。您可以它用來收集用戶輸入、進行數據驗證、設置條件邏輯以及將數據提交到外部系統。

另外,Webform還提供了豐富的功能,例如:多列輸入佈局、條件邏輯、多頁面表單、數據驗證、數據導出等。這些功能使您能夠創建高度自訂的表單,以滿足您的特定需求。

核心架構

Webform的架構分成三層:表單設計層、提交處理層、輸出與整合層

Webform架構圖

主要功能特點

50多種欄位類型,涵蓋基本輸入(文字、日期、下拉、checkbox)、進階元素(文件上傳、簽名欄、地址自動完成、評分星號),以及複合型元素如可動態新增列數的 Table、支援子表單巢狀結構的 Composite Element。

**條件邏輯(Conditional Logic)**是 Webform 的核心亮點,可設定「當 A 欄位等於 X 時,顯示/隱藏/必填 B 欄位」,完全不需寫 JavaScript,邏輯在後台 UI 直接配置。

**多步驟精靈(Wizard)**將長表單切割成多個頁面,每頁可各自設定標題和進度條,適合報名流程、問卷調查或申請書。

Handler 系統是可選用的提交後動作,內建包含:

  • 發送 Email(支援 Token 動態填入欄位值)
  • 儲存到資料庫(或刻意「不儲存」只發 email)
  • 重新導向到指定頁面
  • 執行自訂 PHP 動作(需寫 Plugin)

與 Drupal 生態系的深度整合

Webform 產生的提交資料是標準的 Drupal Entity,因此可以:

  • 透過 Views 建立後台管理列表,加篩選、排序、匯出
  • 透過 Rules 或 ECA 模組觸發進階自動化流程
  • 透過 Paragraphs 或任何 Content Type 的參照欄位嵌入表單
  • 透過 Webform REST API 子模組讓 decoupled 前端(如 Next.js)遠端提交

使用情境

Webform 模組適用於各種不同的使用情境,以下是一些常見的使用情境:

  • 聯絡表單:讓用戶可以輕鬆地與您聯繫。
  • 調查表單:讓您可以收集大量的數據和反饋。
  • 報名表單:讓用戶可以輕鬆地註冊活動或課程。
  • 申請表單:讓用戶可以輕鬆地提交申請,例如工作申請或獎學金申請。
  • 訂閱表單:讓用戶可以輕鬆地訂閱您的電子報或其他內容。

進階子模組

Webform 本體非常輕量,大量進階功能以子模組形式按需啟用,例如 webform_ui(GUI 編輯器)、webform_submission_export(匯出)、webform_node(與 Node 掛鉤)、webform_access(權限控管)。

Webform 七大應用場景互動展示

大學

課程 / 活動報名

多步驟精靈,收集姓名、學號、飲食偏好,自動寄確認信,後台 Views 一鍵匯出名冊。

  • 步驟進度條
  • 名額上限自動關閉
  • 確認 Email 自動發送

2025 研討會報名 — 步驟 1 / 3

醫療

病患預約掛號

日期時間選擇器+科別下拉,條件邏輯依選擇顯示不同問題,資料可不落地只發 email。

  • 條件邏輯顯示欄位
  • 提交資料不儲存選項
  • 自動通知診間人員

線上掛號

骨科初診請攜帶 X 光片(若有)
問卷

課後 / 服務滿意度問卷

評分星號元件、NPS 量表、開放式意見欄,後台自動統計並可匯出 Excel 報表。

  • 星號評分 / NPS 量表
  • 匯出 CSV / Excel
  • Views 顯示統計圖

本次課程滿意度調查

分數:8
生技

樣品送測申請

動態新增多筆樣品(Table 元素),上傳規格文件,條件邏輯依樣品類型顯示不同必填欄位。

  • 動態多筆資料輸入
  • 文件上傳附件
  • 依類型切換必填欄位

樣品送測申請單

樣品名稱數量樣品類型
拖曳或點選上傳 PDF / DOCX
大學

設備借用申請

填寫借用日期區間後,Handler 自動寄通知給設備管理員,並在 Views 列表顯示目前借用狀況。

  • 日期範圍選擇器
  • 管理員 Email 通知
  • 借用狀態後台管理

儀器設備借用申請

此設備目前 6/3–6/5 已有借用,請錯開日期
企業

TTQS 訓練出席 / 回饋單

與 Drupal 節點綁定,每堂課自動建立對應表單,結訓後彙整成訓練記錄,符合 TTQS 稽核需求。

  • 綁定訓練課程節點
  • 電子簽名確認出席
  • 結訓報告自動彙整

訓練出席暨滿意度回饋單

課程:Linux 伺服器管理實務 日期:2025-06-10 時數:6H
滿意
醫療

受試者同意書 / 健康問卷

長文條款顯示後才能勾選同意、多頁分段填答、提交後觸發 Webhook 通知臨床系統,資料可加密。

  • 條款閱讀後才可同意
  • Webhook 通知外部系統
  • 提交資料加密儲存

受試者知情同意書

本研究計畫由○○醫學中心倫理審查委員會核准(案號:IRB-2025-012)。您的參與完全出於自願,可於任何時間退出而不影響您所接受之醫療服務。所收集之個人資料將依個人資料保護法規定,以加密方式儲存,僅供本研究使用…(請向下捲動閱讀完整條款)