MoriForms 說明文件
返回主站

第七章：提交後動作 (actions)

當一份表單被成功提交，並且所有資料都通過了伺服器端的嚴格驗證之後，真正的工作才正要開始。actions 陣列就是您用來定義「接下來該發生什麼事」的指令清單。

actions 是一個位於頂層的陣列，其中包含了一系列「動作物件」。MoriForms 的後端引擎會在儲存提交資料後，依序執行這個陣列中的每一個動作。這意味著，您可以組合多個動作，來打造一個完整的工作流程，例如：

  1. 發送一封通知信給網站管理員。
  2. 同時，發送一封確認信給填寫表單的使用者。
  3. 接著，將這份資料透過 API 傳送到您的 CRM 系統。
  4. 最後，告訴前端要將使用者重定向到一個感謝頁面。

動作物件的通用結構

雖然每個動作的具體設定不同，但它們大多共享一些通用屬性：

  • id (String, 可選): 為這個動作指定一個唯一的 ID，主要用於偵錯或日誌記錄。
  • type (String, 必需): 決定這個動作的類型，例如 "email" 或 "redirect"。
  • condition (Object, 可選): (進階功能) 讓這個動作可以被條件式執行。只有當這裡定義的條件滿足時，這個動作才會被觸發。其結構與我們在上一章學到的條件邏輯 if 區塊完全相同。

具體的動作類型

type: "success_message"

  • 用途： 定義當表單成功提交後，要回傳給前端 Skin 顯示的成功訊息。

  • 屬性：

    • message (String): 您想要顯示的訊息內容。您可以在訊息中使用 {field_id} 的語法來插入使用者提交的資料，以實現個人化訊息。

  • 注意： 通常，您應該在 success_message 和 redirect 之間擇一使用。

  • 範例： JSON

    {
  "id": "show_success_msg",
  "type": "success_message",
  "message": "感謝您，{customer_name}！我們已經收到您的訊息。"
}
type: "redirect"

  • 用途： 將使用者重新導向到一個新的 URL。常用於「感謝頁面」或下一步流程的頁面。

  • 屬性：

    • url (String): 您希望使用者被重定向到的目標網址。您也可以在 URL 中透過查詢參數傳遞表單資料。

  • 範例： JSON

    {
  "id": "redirect_to_thankyou",
  "type": "redirect",
  "url": "https://yoursite.com/thank-you?name={customer_name}"
}
type: "email"

  • 用途： 發送電子郵件。這是最常用、也最重要的動作之一。您可以設定多個 email 動作來滿足不同需求（例如，通知管理者 vs. 回覆使用者）。

  • 屬性：

    • to (String): 收件人 Email。可以是固定的地址，也可以是 {field_id} 變數。
    • subject (String): 郵件主旨。
    • body (String): 郵件內文，支援 HTML。您可以使用 {field_id} 來插入特定欄位的資料，或使用一個特殊的 {all_fields} 變數來自動生成一個包含所有提交資料的整齊表格。
    • from (String, 可選): 寄件人 Email。
    • replyTo (String, 可選): 回覆至 Email。設為 {customer_email} 非常實用。
    • cc / bcc (String, 可選): 副本 / 密件副本。

  • 範例 1：給管理員的通知信 JSON

    {
  "id": "email_admin_notification",
  "type": "email",
  "to": "admin@yoursite.com",
  "replyTo": "{customer_email}",
  "subject": "網站有新的聯絡表單提交！",
  "body": "<h3>您有一封新訊息：</h3>{all_fields}"
}

  • 範例 2：給使用者的自動回覆信（有條件執行） JSON

    {
  "id": "email_user_confirmation",
  "type": "email",
  "condition": { // 只有當使用者勾選「寄送副本給我」時才執行
    "rules": [{ "fieldId": "send_copy_to_me", "operator": "is", "value": true }]
  },
  "to": "{customer_email}",
  "subject": "我們已收到您的訊息 - [您的網站名稱]",
  "body": "親愛的 {customer_name}，<br><p>感謝您的來信，這是一份您提交的資料備份：</p>{all_fields}"
}
type: "api_call" (或 Webhook)

  • 用途： 將提交的資料發送到一個第三方的 API 端點或 Webhook URL。這對於整合 CRM、專案管理工具 (如 Trello)、通訊軟體 (如 Slack) 或任何自訂的後端服務至關重要。

  • 屬性：

    • endpoint (String): 目標 API 的 URL。
    • method (String): HTTP 請求方法，通常是 "POST"。
    • headers (Object, 可選): 自訂的請求標頭，例如用於身份驗證的 Authorization: Bearer YOUR_API_KEY。
    • payload (Object): 定義要發送的 JSON 資料結構。您可以在這裡將表單欄位的 id 映射到目標 API 所需的鍵名。

  • 範例：將新銷售線索傳送到 CRM JSON

    {
  "id": "send_to_crm",
  "type": "api_call",
  "endpoint": "https://api.mycrm.com/v1/leads",
  "method": "POST",
  "headers": {
    "Authorization": "Bearer crm_secret_api_key",
    "Content-Type": "application/json"
  },
  "payload": {
    "lead_name": "{customer_name}",
    "email_address": "{customer_email}",
    "source": "Website Contact Form",
    "message": "{customer_message}"
  }
}

下一步

至此，我們已經完成了對「表單 Schema」三大核心——layout、conditions 和 actions——的深入探討。您現在所擁有的知識，已經足以讓您定義出市面上絕大多數複雜的表單。

從下一章開始，我們將進入「進階」部分，首先會完整地剖析 manifest.json 的所有設定，讓您對 Skin 的配置有更深層的掌控。

本頁目錄