告別人肉複製貼上!n8n 聯手 Google Sheets,打造 WordPress 表單自動化印鈔機

2025/11/29 | API 串接與自動化, N8N大補帖, 技術教學資源

告別人肉複製貼上!n8n 聯手 Google Sheets,打造 WordPress 表單自動化印鈔機

嗨,我是浪花科技的資深工程師 Eric。不知道你是否跟我一樣,有時候會覺得工程師這個職業,有一半的時間在寫驚天動地的程式碼,另一半的時間…在做一些無聊透頂的複製貼上?特別是每到月底,行銷團隊總會跑來問:「Eric,上個月官網 Contact Form 7 的客戶名單可以幫我拉出來嗎?」然後,我就得登入 WordPress 後台,找到那個有點難用的表單外掛介面,匯出 CSV,再整理成他們要的格式…天啊,這種事做一次是新鮮,做十次就是折磨。

身為一個有點Geek精神的工程師,我堅信一件事:任何需要重複做三次以上的手動工作,都應該被自動化。 這不是偷懶,這是效率,是把我們寶貴的腦力從瑣事中解放出來,去做更有價值的事情。今天,我就要帶你告別這種「人肉 API」的窘境,我們要用兩大神器:n8n 和 Google Sheets,來為你的 WordPress 網站打造一條全自動、零延遲的資料流管道。這不只是同步表單資料那麼簡單,這是打造一個會自己工作的「智慧系統」的第一步。準備好了嗎?泡杯咖啡,我們開始動工!

為什麼你該立刻停止手動匯出資料?自動化的隱藏價值

我知道,很多人會想:「不過就是幾分鐘的複製貼上,有必要搞得這麼複雜嗎?」嘿,這就是典型的「線性思維」。讓我這個老司機告訴你,手動作業的成本遠比你想像的要高:

  • 時間成本:每天 10 分鐘,一個月就是 300 分鐘,也就是 5 個小時。一年下來就是 60 個小時,這足夠你開發一個小外掛或學會一個新框架了!時間,是工程師最寶貴的資產。
  • 錯誤成本:人不是機器,複製貼上總有眼花手殘的時候。一個欄位錯置、一筆資料遺漏,可能就會導致銷售機會的流失或客戶抱怨。自動化流程能確保資料 100% 的準確性。
  • 機會成本:當銷售團隊要等到月底才能拿到名單時,那些熱騰騰的潛在客戶早就涼了。透過 n8n 與 Google Sheets 自動化,客戶一送出表單,資料就能在 3 秒內出現在銷售團隊的 Google Sheet 上,他們可以立刻跟進。這種即時性,就是真金白銀的商機。

所以,別再把你的網站當成一個單純的資料孤島了。我們要做的,是把它變成一個資訊中樞,讓數據像血液一樣,自動流向需要它的地方。這,就是自動化的核心價值。

今日任務的軍火庫:我們的技術組合

要完成這個自動化任務,我們不需要什麼火箭科技,只需要準備好以下幾樣工具。這就像組裝一台電腦,選對零件,一切就水到渠成。

  • WordPress 網站:主角當然是我們的 WordPress 網站,並且安裝了國民級表單外掛 Contact Form 7
  • n8n 實例:n8n 是我們今天的自動化大腦,你可以使用 n8n Cloud 的付費服務,也可以像我一樣,在自己的伺服器上 self-host 一個,完全免費。它就像樂高積木,讓你用拖拉的方式串接各種服務。
  • Google 帳號:我們需要一個 Google 帳號來建立我們的目標資料庫 – Google Sheets。
  • 一點點的程式碼勇氣:別怕!我們會用一小段 PHP 程式碼,讓 WordPress 在表單提交時自動發出訊號。這比裝一堆功能不明的外掛來得更乾淨、更高效,也更像個 Pro!

Step-by-Step:從零打造 WordPress 到 Google Sheets 的自動化管道

理論說完了,我們來點硬核的實作。跟著我一步一步來,你也能輕鬆打造自己的自動化流程。

步驟一:準備好我們的「數據倉庫」- Google Sheets

首先,我們得有個地方存放資料。打開你的 Google Drive,建立一份新的 Google Sheets 試算表。最重要的第一步,是在第一列建立好「欄位標題」。這些標題應該要能對應到你 Contact Form 7 表單裡的欄位。

舉例來說,如果你的表單有「姓名 (your-name)」、「Email (your-email)」、「訊息 (your-message)」,你的 Google Sheet 標題就可以設定成:

  • Timestamp (用來記錄提交時間)
  • Name
  • Email
  • Message

小囉嗦一下:欄位名稱最好用英文,並且保持簡潔,這會讓後續在 n8n 裡對應資料時更直覺。先想好資料結構,是所有系統設計的好習慣。

步驟二:架設訊號接收站 – 設定 n8n Webhook 觸發器

現在,輪到我們的自動化中樞 n8n 上場了。

  1. 在 n8n 儀表板上,建立一個新的 Workflow。
  2. 你會看到一個預設的「Start」節點,點擊它,在觸發器 (Triggers) 裡搜尋並選擇「Webhook」。
  3. 在 Webhook 的設定畫面,你會看到一組「Test URL」。這就是我們暫時的訊號接收地址。點擊旁邊的複製按鈕,把這串 URL 複製下來,我們馬上會用到。
  4. 接著,點擊右下角的「Listen For Test Event」按鈕。n8n 現在會進入等待模式,像個雷達一樣,等著接收來自 WordPress 的第一個訊號。

步驟三:讓 WordPress 開口說話 – 用 Hook 送出資料

這是最關鍵也最能體現工程師價值的一步。我們不用外掛,我們要直接用 WordPress 內建的 Hooks 機制來做事。

請打開你的 WordPress 主題資料夾底下的 `functions.php` 檔案(拜託,記得先備份,或者最好使用子佈景主題),然後在檔案的最後面,貼上這段程式碼:


function roamer_send_cf7_to_n8n( $contact_form ) {
    $title = $contact_form->title();
    $submission = WPCF7_Submission::get_instance();

    // 只針對特定的表單標題,如果你想所有表單都送,可以移除這個 if 判斷
    if ( '你的表單標題' != $title ) {
        return;
    }

    if ( $submission ) {
        $posted_data = $submission->get_posted_data();
        
        // 你的 n8n Webhook Test URL
        $webhook_url = 'https://你的n8n網址/webhook-test/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';

        $body = [
            'form_title' => $title,
            'submitted_data' => $posted_data
        ];

        $args = [
            'body'        => json_encode($body),
            'headers'     => ['Content-Type' => 'application/json; charset=utf-t'],
            'timeout'     => 60,
            'redirection' => 5,
            'blocking'    => true, // 設定為 true 確保請求發送
            'httpversion' => '1.0',
            'sslverify'   => false, // 如果你的 n8n 是自簽 SSL 憑證,可能需要設為 false
            'data_format' => 'body',
        ];

        wp_remote_post( $webhook_url, $args );
    }
}
// 使用 'wpcf7_mail_sent' 這個 hook,確保只有在郵件成功寄出 (代表表單成功提交) 時才觸發
add_action( 'wpcf7_mail_sent', 'roamer_send_cf7_to_n8n', 10, 1 );

程式碼小解析:

  • 我們使用了 `wpcf7_mail_sent` 這個 Action Hook,它會在 Contact Form 7 成功寄出郵件後觸發,這是最可靠的觸發點。
  • `WPCF7_Submission::get_instance()` 幫我們取得了使用者提交的所有資料。
  • 最重要的,是把 `$webhook_url` 換成你在上一步從 n8n 複製的 **Test URL**。
  • `wp_remote_post` 是 WordPress 內建的函數,專門用來發送 POST 請求,非常方便。

儲存 `functions.php` 檔案後,回到你的網站前台,找到那個 Contact Form 7 表單,實際填寫並提交一次。如果一切順利,你會看到表單成功送出的訊息。同時,切換回 n8n 的視窗,你會驚喜地發現,它已經收到了來自 WordPress 的資料!

步驟四:資料對接 – 將 n8n 連接到 Google Sheets

n8n 已經成功接收到資料了,接下來就是把它送到 Google Sheets。

  1. 在 n8n 的 Webhook 節點旁,點擊「+」號,新增一個節點。
  2. 搜尋「Google Sheets」並選取它。
  3. 在 Credential 的地方,點選「Create New」,跟隨 n8n 的指示,透過 OAuth2 授權 n8n 存取你的 Google 帳號。這是一個標準且安全的授權流程。
  4. 在「Resource」選擇「Row」,「Operation」選擇「Append or Update」。
  5. 在「Sheet ID」欄位,n8n 會自動抓取你帳號下的所有試算表,選擇我們在步驟一建立的那份。
  6. 最神奇的一步來了!在下方的「Columns」區塊,點擊「Add Column」。你會看到 n8n 已經把你 Google Sheet 上的標題 (Timestamp, Name, Email, Message) 都讀取進來了。
  7. 現在,只需要將左邊 Webhook 傳來的資料,用滑鼠拖拉或點擊對應到右邊的欄位即可。例如,將 `{{$json[“body”][“submitted_data”][“your-name”]}}` 對應到 `Name` 欄位。對於 `Timestamp`,你可以使用 n8n 內建的表達式 `{{$now}}` 來自動填入當前時間。
  8. 點擊「Execute Node」測試一下,你會發現剛剛測試的資料已經成功寫入你的 Google Sheet 了!

步驟五:正式上線!啟動你的自動化引擎

測試都沒問題後,就剩下最後的收尾工作:

  1. 回到 n8n 的 Webhook 節點,你會看到除了 Test URL,還有一組 **Production URL**。複製這組 URL。
  2. 回到 WordPress 的 `functions.php`,將 `$webhook_url` 的值換成這組新的 Production URL。
  3. 在 n8n 的 workflow 編輯頁面,點擊右上角的「Active」開關,將它從 Inactive 切換為 **Active**。
  4. 大功告成!現在,你的自動化流程已經 7×24 小時待命了。每一次的表單提交,都會在幾秒內自動、準確地同步到你的 Google Sheets。你可以去泡杯茶,翹著二郎腿,享受科技帶來的優雅了。

不止於此:讓你的自動化流程更上一層樓

基本的資料同步已經完成,但 n8n 的強大之處在於它的擴展性。你可以像玩樂高一樣,繼續串接更多的節點,打造更複雜、更聰明的工作流:

  • 增加錯誤告警:在 Google Sheets 節點後面串接一個「IF」節點,判斷寫入是否成功。如果失敗,就自動發一封 Email 或 Slack 通知給自己,讓你第一時間掌握狀況。
  • 資料清洗與格式化:在寫入 Google Sheets 之前,可以加入「Set」或「Function」節點,預先處理資料,例如去除使用者輸入多餘的空白、將手機號碼格式化等。
  • 多通路通知:除了寫入 Google Sheets,你還可以同時把這筆客戶資料推送到公司的 CRM 系統 (如 HubSpot)、發送 LINE 通知給業務主管,甚至自動建立一個 Trello 任務卡。這一切,都只是多加幾個節點的事。

結論:自動化不是選項,而是未來

今天我們透過 n8n 與 Google Sheets 自動化,成功地將一個繁瑣的手動任務,變成了一個全自動、高效率的系統。這不僅僅是省下了時間,更是改變了我們的工作思維。當你開始用「自動化」的視角去檢視工作中的每一個環節,你會發現有無限的優化空間。

從表單提交、訂單處理、客戶服務到內容發佈,WordPress 的每一個環節都可以透過 n8n 這樣的工具串接起來,打造一個真正屬於你的「自動化帝國」。別再讓人去做機器該做的事了,現在就動手,把你第一個手動任務給自動化吧!

延伸閱讀

如果你在建置過程中有任何疑問,或者有更複雜的企業級自動化需求,浪花科技的團隊都非常樂意協助你。我們不只會寫程式,我們更擅長為你的業務流程找出最聰明的解法。

→ 立即聯繫浪花科技,讓我們為您打造專屬的自動化解決方案

常見問題 (FAQ)

Q1: 我不想在 functions.php 裡加程式碼,有更簡單的方法嗎?

A1: 絕對有!如果你對修改程式碼感到不安,可以在 WordPress 外掛市集搜尋「CF7 to Webhook」之類的外掛。它們通常提供一個簡單的介面,讓你把 Webhook URL 貼上即可。這樣做的優點是簡單快速,缺點是多安裝一個外掛會增加網站的負載與潛在的安全性、相容性風險。對於追求極致效能與安全性的我們工程師來說,一小段乾淨的程式碼通常是更優雅的選擇。

Q2: 這個方法可以用在 Gravity Forms 或 WPForms 等其他表單外掛嗎?

A2: 當然可以!核心原理是完全一樣的:找到表單成功提交時觸發的「Hook」,然後在那時機點把資料用 Webhook 送出去。許多進階的表單外掛(如 Gravity Forms Pro)甚至內建了 Webhook 功能,你只需要在設定中填入 n8n 的 URL 即可,連程式碼都不用寫。n8n 的部分則是完全不變的,它只負責接收資料,不管資料是誰送來的。

Q3: n8n 是免費的嗎?

A3: n8n 採用「Fair Code」授權模式。簡單來說,你可以免費下載 n8n 的原始碼,在自己的伺服器上安裝部署(Self-Host),功能完全沒有限制。這對於我們工程師來說是個福音。如果你不想管理伺服器,也可以選擇他們官方提供的 n8n Cloud 付費服務,他們會幫你處理好所有主機維運的大小事。

Q4: 我的資料沒有成功寫入 Google Sheets,該從哪裡開始檢查?

A4: 這是很好的除錯問題!請依照以下清單檢查:
1. n8n Workflow 是否啟用? 確認右上角的開關是「Active」。
2. Webhook URL 是否正確? 確認 `functions.php` 裡使用的是 n8n 的「Production URL」,而不是 Test URL。
3. 檢查 n8n 執行日誌: 在 n8n 的「Executions」頁面,你可以看到每一次 workflow 的執行紀錄。點開失敗的紀錄,它會明確告訴你在哪個節點出錯,以及錯誤原因(例如:Google Sheets 權限不足、欄位名稱對應錯誤等)。
4. Google Sheets 權限: 確保你在 n8n 中授權的 Google 帳號,確實擁有該份試算表的編輯權限。
跟著這個流程,99% 的問題都能被找出來!

 
立即諮詢,索取免費1年網站保固