抱歉,您的瀏覽器無法訪問本站
本頁面需要瀏覽器支持(啟用)JavaScript
了解詳情 >

這個工作流接在接案網站的「聯絡我們」後面。客戶送出姓名、信箱、預算與需求後,n8n 會把這筆詢價寫入 Google Sheet,留給業務追蹤。只選擇最低預算的案件會在這裡停住;其餘案件交給 AI Agent 整理需求範圍並給出初步估價,再以正式信件回覆客戶,作為後續洽談的依據。

0. 建立工作流與準備憑證

先建好工作流,並備妥後面節點會用到的憑證。

  • 在 n8n 新增工作流,命名為 OnlineWebForm。
  • 準備 Google Sheet OAuth2 憑證。
  • 準備 OpenRouter API 憑證。
  • 準備 Gmail 應用程式密碼。

1. 線上表單節點建立

詢價從官網表單進來。用 n8n Form 當觸發節點,客戶送出後工作流才開始跑。

(1). 打開 node panel,搜尋 n8n Form。
(2). 點擊 n8n Form ⮕ 選擇 Triggers 裡的 On new n8n Form event。

1.1 ReqForm 節點參數設定畫面

(3). 把節點 On form submission 命名為 ReqForm。
(4). Form URLs 維持預設值。
(5). Authentication 選擇 None(預設值)。表單公開在官網上,不另外要求登入。
(6). Form Title 輸入 聯絡我們。
(7). Form Description 輸入:

1
2
若您有網站或系統的開發需求,請填寫以下資料。
我們會依需求整理範圍,並回覆初步估價。

(8). Respond When 維持預設值 Form Is Submitted。客戶送出表單後,頁面就結束這次填寫。

1.2 建立表單輸入欄位

在 Form Elements 加上業務估價需要的欄位:聯絡人、信箱、預算與需求說明。

(9). 點擊 + Add Form Element ⮕ Label 欄位輸入 姓
   ⮕ Element Type 欄位選擇 Text Input
   ⮕ 點擊 + Add Attributes 選擇 Required Field
   ⮕ 點擊 Required Field 欄位的 Enable 開關。

(10). 點擊 + Add Form Element ⮕ Label 欄位輸入 名
   ⮕ Element Type 欄位選擇 Text Input
   ⮕ 點擊 + Add Attributes 選擇 Required Field
   ⮕ 點擊 Required Field 欄位的 Enable 開關。

(11). 點擊 + Add Form Element ⮕ Label 欄位輸入 Email
   ⮕ Element Type 欄位選擇 Email
   ⮕ 點擊 + Add Attributes 選擇 Required Field
   ⮕ 點擊 Required Field 欄位的 Enable 開關。

(12). 點擊 + Add Form Element ⮕ Label 欄位輸入 執行專案的預算
   ⮕ Element Type 欄位選擇 Dropdown
   ⮕ Field Options 區域的 Values 1 欄位 Option 輸入 3000 NTD
   ⮕ 點擊 + Add Field Options Values 2 欄位 Option 輸入 5000 ~ 10000 NTD
   ⮕ 點擊 + Add Field Options Values 3 欄位 Option 輸入 10000 ~ 30000 NTD
   ⮕ 點擊 + Add Field Options Values 4 欄位 Option 輸入 50000+ NTD
   ⮕ 點擊 + Add Attributes 選擇 Required Field
   ⮕ 點擊 Required Field 欄位的 Enable 開關。

(13). 點擊 + Add Form Element ⮕ Label 欄位輸入 需求的描述
   ⮕ Element Type 欄位選擇 Textarea
   ⮕ 點擊 + Add Attributes 選擇 Required Field
   ⮕ 點擊 Required Field 欄位的 Enable 開關。

2. 寫入 Google Sheet 節點建立

每筆詢價先寫成一列,業務之後才查得到是誰、預算多少、要做什麼。

(14). 用即將綁到 n8n 的那個 Google 帳號,在雲端硬碟新增一份 Google Sheet。
(15). 工作表命名為 客戶需求資料,第一列寫入欄位名稱:

  • A1: 姓名
  • B1: 信箱
  • C1: 預算
  • D1: 需求
  • E1: 是否發信
  • F1: 回覆內容

(16). 複製這份 Google Sheet 的網址,下一步貼到 n8n。

2.1 建立 Google Sheets 節點

(17). 打開 node panel,搜尋 Google Sheets。
(18). 點擊 Google Sheets ⮕ 選擇 SHEET WITHIN DOCUMENT ACTIONS 裡的 Append row in sheet。
(19). 把節點命名為 AppendData2Sheet。
(20). 把 ReqForm 接到 AppendData2Sheet。

2.2 AppendData2Sheet 節點參數設定畫面

(21). Credential 選擇已連線的 Google Sheets 憑證,並確認綁定的是存放這份詢價表的 Google 帳號。
(22). Resource 維持預設值 Sheet Within Document。
(23). Operation 選擇 Append Row。每次表單送出,就在表格底部新增一列。
(24). Document 左側下拉選單選擇 By URL。
(25). Document 右側文字欄位貼上剛才複製的 Google Sheet 網址。
(26). Sheet 左側下拉選單選擇 From list。
(27). Sheet 右側下拉選單選擇 客戶需求資料。

若 Sheet 右側出現 Could not load list 與 The caller does not have permission,代表 n8n 讀不到這份表格。多半是憑證綁到別的 Google 帳號,請回到憑證確認。

(28). Sheet 選定後會出現 Mapping Column Mode,選擇 Map Each Column Manually。
(29). 接著出現 Values to Send,用來指定每個欄位要寫入的內容。

Values to Send 會讀取工作表第一列當作欄位名稱。之後若改了第一列,點 Values to Send 最右側的 ...,再選 Refresh Columns List 重新載入。

2.3 Values to Send 欄位設定

這一步只寫入客戶送來的資料。是否發信 與 回覆內容 先留在表格裡,這次不填。

(30). 姓名 欄位填入 {{$('ReqForm').item.json['姓']}}{{$('ReqForm').item.json['名']}}。
(31). 信箱 欄位填入 {{$('ReqForm').item.json['Email']}}。
(32). 預算 欄位填入 {{$('ReqForm').item.json['執行專案的預算']}}。
(33). 需求 欄位填入 {{$('ReqForm').item.json['需求的描述']}}。
(34). 是否發信 點欄位前方的垃圾桶圖示,從這次寫入移除。
(35). 回覆內容 同樣點垃圾桶圖示移除。

3. 建立預算過濾器節點

詢價已經入表。接下來只讓達到承接範圍的案件繼續估價:預算選 3000 NTD 的案子停在這裡,表格裡仍保留該筆資料。

(36). 打開 node panel,搜尋 Filter。
(37). 點擊 Filter。
(38). 把節點命名為 FilterByBudget。
(39). 把 AppendData2Sheet 接到 FilterByBudget。

3.1 FilterByBudget 節點參數設定畫面

(40). Conditions 的 Value 1 打開 f(x),輸入 {{ $('ReqForm').item.json['執行專案的預算'] }}。
(41). Operator 選擇 String ⮕ is not equal to。
(42). Value 2 輸入 3000 NTD。與表單選項的文字要完全一致,篩選才對得上。

4. 建立 AI Agent 處理需求節點

通過預算篩選的案件,交給 AI Agent 依需求與預算整理範圍,寫出可以放進回信的初步估價。

(43). 打開 node panel,搜尋 AI Agent。
(44). 點擊 AI Agent 新增節點。
(45). 把 FilterByBudget 接到 AI Agent。

4.1 AI Agent 節點參數設定畫面

(46). Source for Prompt (User Message) 選擇 Define below。
(47). Prompt (User Message) 輸入這次詢價的需求與預算:

1
2
使用者的需求: {{ $('ReqForm').item.json['需求的描述'] }}
執行專案的預算: {{ $('ReqForm').item.json['執行專案的預算'] }}

(48). 點擊 Options 的 + Add Option ⮕ 選擇 System Message。
(49). System Message 輸入顧問角色、估價原則與輸出格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
你是一位專業的網站專案顧問與專案估價分析師。
你的工作是分析使用者於表單中填寫的網站製作需求,整理需求重點,並提供合理的開發預估,作為後續回覆 Email 的內容基礎。
請依照以下原則執行:

1. 先理解使用者需求,整理主要功能、網站類型、特殊需求及可能的技術需求。
2. 根據需求評估:
- 專案複雜度(低/中/高)
- 建議開發內容
- 參考價格區間(TWD)
- 參考實作天數(工作天)
3. 若需要任何數值計算、加總、工時換算或價格推估,一律使用 Tool `機器人的計算機`,不得自行計算。
4. 若需求描述不足,請以一般企業網站開發經驗進行合理假設,並明確說明哪些內容為估算假設。
5. 不需提供最終正式報價,所有金額與天數皆為初步估算,供業務評估使用。
6. 保持專業、中立、清楚,不要過度推銷或承諾一定可以完成。

請使用以下格式輸出:
【需求摘要】
- 網站類型:
- 主要功能:
- 特殊需求:

【專案評估】
- 複雜度:
- 開發重點:

【初步估價】
- 參考價格:
- 參考實作天數:

【估算說明】
簡要說明估價依據、假設條件與可能影響價格或工期的因素。
整體內容控制於約 500 字,使用繁體中文,內容精簡且易於作為 Email 回覆內容,不需加入開頭問候、結尾或簽名。

4.2 AI Agent 的 Chat Model

(50). 從 AI Agent 的 Chat Model 分支新增節點,搜尋 OpenRouter Chat Model。
(51). 選擇 OpenRouter Chat Model。
(52). Credential 選擇已設定的 OpenRouter 憑證。
(53). 展開 Model,搜尋並選擇 openrouter/free。

4.3 AI Agent 的 Memory

每筆表單各自成一段對話,估價內容才不會混到下一筆詢價。

(54). 從 AI Agent 的 Memory 分支新增節點,選擇 Simple Memory。
(55). Session ID 選擇 Define below。
(56). Key 輸入 {{ $execution.id }}。用這次執行的編號當對話識別。
(57). Context Window Length 維持預設值 5。

4.4 AI Agent 的 Tool

System Message 要求金額與天數都透過這個工具計算,節點名稱要和提示詞裡的 機器人的計算機 一致。

(58). 從 AI Agent 的 Tool 分支新增節點,搜尋 Calculator。
(59). 把這個 Tool 節點命名為 機器人的計算機。

5. 建立通知客戶處理節點

估價寫進 HTML 信件,寄回客戶在表單留下的信箱。

(60). 打開 node panel,搜尋 Send Email。
(61). 點擊 Send Email ⮕ 選擇 Action 裡的 Send an Email。
(62). 把節點命名為 sendMail。
(63). 把 AI Agent 接到 sendMail。

5.1 sendMail 節點參數設定畫面

(64). Credential 選擇已設定的 Gmail 憑證。
(65). From Email 填入用來寄出估價信的信箱。
(66). To Email 輸入 {{ $('ReqForm').item.json.Email }}。
(67). Subject 輸入 網站需求初步估價 - {{ $('AppendData2Sheet').item.json['姓名'] }}。
(68). Email Format 選擇 HTML。
(69). HTML 貼上這份信件版型: 開啟新分頁顯示:程式碼

工作流搭建完成

詢價、入表、預算篩選、初步估價與回信已經串起來。用一筆預算高於 3000 NTD 的需求送出表單,確認 Google Sheet 新增一列,而且客戶信箱收到估價信。預算選 3000 NTD 的案件只寫入 Sheet,流程停在 FilterByBudget。

完整工作流 JSON: 開啟新分頁顯示:程式碼

後續

基本流程已經能收詢價、寫入表格、擋下最低預算,並對其餘案件寄出初步估價。接到真實客戶之前,再補下面幾件事。

估價信改成公司自己的內容

第 (69) 步的版型仍是通用草稿。{{ $json.output }} 是 AI Agent 寫好的估價,放在信件正文,欄名用「初步估價」。[公司名稱]、[事項/需求/問題]、[下一步行動]、[日期/時間]、署名、電話與地址都換成實際資料。沒有對應頁面時,拿掉「查看詳細資訊」。

開頭寫已收到需求,並附上初步估價。文末註明金額與工作天是洽談前的估算,確認範圍後另出正式報價。

寄出後把結果寫回同一列

是否發信 與 回覆內容 目前只有表頭。寫入時加一欄執行編號,值填 {{ $execution.id }}。sendMail 成功後,用 Google Sheets 的 Update Row,依這個編號找到該列:是否發信 寫成已寄出,回覆內容 寫入 {{ $('AI Agent').item.json.output }}。寄信失敗時,是否發信 寫成未寄出,業務才知道要補寄。

最低預算改為收件確認

預算為 3000 NTD 的案件停在 FilterByBudget,客戶不會收到信。從未符合條件的那一路另接一封較短的信,說明需求已收到、這個預算先由專人聯繫,信裡不附自動估價。表格仍保留該筆資料,供業務跟進。

表單網址掛到官網

工作流發布後,使用 ReqForm 的 Production URL。把這個網址嵌到官網「聯絡我們」,或做成按鈕連過去。n8n 若在本機,先完成 07. 申請內網穿透工具 ngrok,或改放到 01. 搭建自己的 n8n 服務,外部訪客才打得開表單。

完成畫面說明信會寄到信箱

Respond When 維持 Form Is Submitted 時,訪客送出後立刻看到完成頁,估價稍後才進信箱。完成頁寫上:需求已收到,初步估價將寄到您填寫的 Email。

對外寄信時換掉免費模型

openrouter/free 用來先跑通流程。正式回信改為指定的付費模型,額度與回覆比較穩。申請與測試見 06. 申請 OpenRouter 並測試 API Key。

機器人的計算機 只做加減乘除。價格區間由模型依需求判斷,加總與工時換算再交給這個工具。System Message 第 3 點改成這句分工,模型才容易把估價寫完。

上線前再核對憑證

確認三組憑證都是正式要使用的帳號:04. 建立 Google Service 的應用程式憑證、06. 申請 OpenRouter 並測試 API Key、08. Gmail 使用 SMTP 進行寄送電子郵件。

留言