[WordPress] Contact Form 7 表單外掛資料串接 – 以 Google 表單為例

本篇文章更新時間：2019/10/22
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

說起來在表單中我最喜歡輕量的 Contact Form 7 ，由日本社群夥伴所開發的百萬下載量外掛。（下方簡稱 CF7）

市面上大多很強的表單外掛著眼在表單欄位建立時的易用性與延伸功能，可以說是一大包整合在一起，好處也不少！

但，認真想想，有網站一天到晚在開表單讓人填嗎？（還真有）但整個來說需求偏少。所以像是這樣工程一點的表單外掛很適合開好表單，把需求滿足後再另開收集表單的外掛來讓客戶端接收資料，處理資料流的部分。參考：Contact Form 7 Database Addon – CFDB7

本篇幅不說太多玩法，有機會寫，先專注處理後端收到資料後的處理！

需求是把表單資料同步彙整到 Google 表單

透過 Hooks 機制有以下的階段來主要操作：

function mxp_wpcf7_posted_data_filter($posted_data) {
    //收到最原始的表單請求資料
    return $posted_data;
}
add_filter('wpcf7_posted_data', 'mxp_wpcf7_posted_data_filter', 10, 1);

上述的方法可以收到最原始的請求，在這邊可以做一些加工、前置處理。

function mxp_wpcf7_validate_filter($result, $tags) {
    if (!$result->is_valid()) {
         // 資料驗證錯誤的判斷，看要做什麼處理
    }
    return $result;
}
add_filter('wpcf7_validate', 'mxp_wpcf7_validate_filter', 11, 2);

上述為驗證階段的步驟，如果使用了內建的驗證方法在這邊就能處理錯誤判斷或正確判斷時的事件。

function mxp_wpcf7_skip_mail_filter($skip_mail, $contact_form) {

    $submission = WPCF7_Submission::get_instance();
    if ($submission) {
        //取得驗證過格式沒問題準備要發信的最終資料
        $data     = $submission->get_posted_data();
        $response = wp_remote_post("https://docs.google.com/forms/d/e/表單編號/formResponse", array(
            'method'      => 'POST',
            'timeout'     => 20,
            'redirection' => 5,
            'httpversion' => '1.1',
            'blocking'    => false,
            // 'headers'     => array(),
            'body'        => array(
                '表單對應欄位A' => $data['your-name'], //稱呼
                '表單對應欄位B'  => $data['tel-num'], //電話
                '表單對應欄位C' => $data['your-email'], //Email
                '表單對應欄位D'  => $data['your-company'], //公司單位名稱
                '表單對應欄位E'  => $data['project-deadline'], //專案期限
                '表單對應欄位F' => $data['budgets-est'], //預算
                '表單對應欄位G'  => $data['your-ref'], //參考網址
                '表單對應欄位H'  => $data['your-text'], //內容
            ),
            'cookies'     => array(),
        )
        );

        if (is_wp_error($response)) {
            return false;
        } else {
            //因為另外處理，所以就不發信了！
            return true;
        }
    }

    return $skip_mail;
};
add_filter('wpcf7_skip_mail', 'mxp_wpcf7_skip_mail_filter', 10, 2);

上述程式碼片段就是一個很奇妙的地方！在發信前會有一個最後確認的 Hook ，讓你有選擇要不要發，也是在這邊可以取得到驗過的資料以及同時控制要不要發信。

回傳「true」就是指「要跳過不發」，端看當下需求如何來客製化，很方便～

上述流程走完前端作用時就可以參考這篇：[WordPress] 客製化 Contact Form 7 表單時使用 jQuery 捕捉事件 ，註冊 JavaScript 事件來觸發前端反應。

過去筆記過的綜合應用可以參考這篇：[WordPress] Contact Form 7 應用 – 填問卷下載檔案功能 ，把 CF7 短碼包裝過來做互動的操作。