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

Contact Form 7

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

但,認真想想,有網站一天到晚在開表單讓人填嗎?(還真有)但整個來說需求偏少。所以像是這樣工程一點的表單外掛很適合開好表單,把需求滿足後再另開收集表單的外掛來讓客戶端接收資料,處理資料流的部分。參考: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 短碼包裝過來做互動的操作。

Facebook 外掛功能


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[//////////____30%_________]

參與討論

4 則留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *