經過了前面幾天簡單的 n8n 技術分享，我們已經掌握了 n8n 的幾個核心功能，像是：
今天，我們就來試試看要將這些技能融會貫通，打造一個更完整、更貼近真實商業應用的跨平台整合 (Cross-Platform Integration) 流程吧！
我們的目標情境是：「當使用者在我們的網站上提交一個『聯絡我們』的表單時，系統需要自動完成三件事：1. 將客戶資料儲存到 Google Sheet 中作為簡易 CRM；2. 立即發送一封 Email 通知給業務團隊；3. (Optional) 回寄一封確認信給填寫表單的使用者。」
這個流程可以展示 n8n 如何作為一個「數位黏著劑」，將原本孤立的各個平台無縫地串連在一起！
Webhook 節點接收來自 HTML 表單的提交資料 (姓名、Email、訊息內容)。Google Sheets 節點，將收到的資料 Append (附加) 到我們的客戶名單工作表中。Send Email 節點，將客戶的訊息整理後，寄送給內部的業務團隊 (e.g., sales@mycompany.com)。Send Email 節點，向填寫表單的使用者 ({{ $json.body.email }}) 發送一封自動確認信。這一步與 Day 26 的操作完全相同。
Webhook 節點，HTTP Method 設為 POST，如下圖：
textarea 欄位給使用者留言，要注意以下的 YOUR_N8N_PRODUCTION_WEBHOOK_URL 是你在 n8n Webhook 畫面上看的 Production URL 唷（當然你也可以先把測試的 Test URL 先放在你的 html 中！如以下圖示 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聯絡我們</title>
</head>
<body>
<h1>聯絡我們</h1>
<form action="YOUR_N8N_PRODUCTION_WEBHOOK_URL" method="POST">
<label for="name">姓名:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">您的訊息:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<button type="submit">送出</button>
</form>
</body>
</html>
最後點擊 Webhook 的 Listen For Test Event，並透過表單提交一筆測試資料，確保 n8n 能正確接收到 name, email, message 三個欄位，如以下範例：
Webhook 節點後方新增 Google Sheets 節點。Append，成功後會得到以下結果：
客戶諮詢)。
提交時間: {{ new Date().toLocaleString('zh-TW', { timeZone: 'Asia/Taipei' }) }}
姓名: {{ $json.body.name }}
Email: {{ $json.body.email }}
訊息內容: {{ $json.body.message }}
這個流程是並行的，我們希望儲存資料和寄信同時進行。n8n 的節點預設是循序執行，但我們可以從 Webhook 節點拉出第二條線，來建立一個平行的分支。
Webhook 節點，再次點擊它右邊的 +，新增一個 Send Email 節點。sales@mycompany.com。新客戶諮詢：來自 {{ $json.body.name }}。\<h3\>您有一則新的客戶諮詢！\</h3\>
\<p\>請盡快與客戶聯繫。\</p\>
\<ul\>
\<li\>\<strong\>姓名:\</strong\> {{ $json.body.name }}\</li\>
\<li\>\<strong\>Email:\</strong\> {{ $json.body.email }}\</li\>
\<li\>\<strong\>訊息:\</strong\>\<br\>\<pre\>{{ $json.body.message }}\</pre\>\</li\>
\</ul\>
同樣地，我們可以再從 Webhook 節點拉出第三條線，或者接在 Send Email (內部通知) 節點後面。
Send Email 節點。{{ $json.body.email }}，這樣才能動態地寄給填表單的人。感謝您的來信 - [您的公司名稱]。\<p\>親愛的 {{ $json.body.name }} 您好,\</p\>
\<p\>感謝您的來信！我們已經收到您的訊息，將會盡快指派專人與您聯繫。\</p\>
\<p\>以下是您提交的內容備份：\</p\>
\<blockquote\>
\<p\>\<strong\>訊息:\</strong\> {{ $json.body.message }}\</p\>
\</blockquote\>
\<p\>祝 順心\</p\>
\<p\>\[您的公司名稱\] 團隊 敬上\</p\>
Active 開關。恭喜！你已經成功建立了一個全自動的客戶資訊處理管道。
今天的整合案例，充分體現了 n8n 作為一個「自動化中樞」的強大能力。它不需要寫任何複雜的後端程式碼，只需透過視覺化的拖拉與設定，就能將 Web、資料庫、Email 這三個完全不同的平台串接起來，完成一個有商業價值的流程。
這個「觸發 → 處理/儲存 → 通知」的模式，是絕大多數自動化流程的基礎原型。你可以基於這個架構，替換其中的節點，來滿足各式各樣的需求：
Shopify 新訂單 → 寫入 ERP → 通知倉儲部門 Slack。新的 Twitter 提及 → 用 OpenAI 分析情緒 → 如果是負評就建立 Trello 卡片。明天，將是我們鐵人賽的最後一天。我們將一同回顧這 30 天的旅程，總結學到的核心知識，並展望未來還能用 n8n 玩出哪些更酷的應用！
iThome鐵人賽
看影片追技術