[WordPress] Contact Form 7 應用 – 填問卷下載檔案功能

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

標題說的應用其實也有不少外掛能辦到，像是「Download After Email」、「Email Before Download」這兩種都可以（注意，這不是那種下載管理外掛，如有需求請往「Download Manager」關鍵字尋找）。

從最簡單套 Contact Form 7 （下稱 CF7）的原生作法說起就是捕捉送出表單的事件，然後觸發寫好 JavaScript 來轉址下載。

document.addEventListener('wpcf7mailsent', function(event) {
    location = '下載的檔案連結';
}, false);

如果想使用 jQuery 捕捉 Contact Form 7 事件的話可以參考文章：[WordPress] 客製化 Contact Form 7 表單時使用 jQuery 捕捉事件

如果要再複雜一點的情境，難免需要自幹一套，不過還是可以運用 CF7 的彈性來整合。

建議打開 CF7 任督二脈：執行短碼！

function mxp_wpcf7_do_shortcode() {
    //給CF7啟用短碼機制
    add_filter('wpcf7_form_elements', 'do_shortcode');
}
add_action('admin_init', 'mxp_wpcf7_do_shortcode');

雖然本篇沒有用到，還是提一下筆記。

需求情境是檔案列表頁面且為客製化的內容類型，每個檔案下載都需要留下紀錄，不過有填過單的就不用再填，表單採用彈出對話框的方式載入。

這邊我的實作方式是接入 REST API 來動態產生每一個表單。

function mxp_ajax_get_download_form($request) {
    $nonce = $request->get_header('X-WP-Nonce');
    if (!wp_verify_nonce($nonce, 'wp_rest')) {
        wp_send_json_error(array('code' => 500, 'data' => '', 'msg' => '錯誤的請求'));
    }
    wp_send_json_success(array('code' => 200, 'data' => do_shortcode('
錯誤: 找不到符合條件的聯絡表單。
')));
}
add_action('rest_api_init', function () {
    register_rest_route('mxp/v1', 'get_download_form', array(
        'methods' => 'GET',
        'callback' => 'mxp_ajax_get_download_form',
    ));
});

儘管是使用 REST API 但也還可以參考之前寫過的這篇：[WordPress] 開發 AJAX 功能的正確流程

設定好後端 API 後，前端 JS 不多說，就是綁定點擊事件，點了「Download」字眼後會請求表單回前端置入。

這邊要記得把 CF7 表單事件綁回去：

$('div.wpcf7 > form').each(function() {
    var $form = $(this);
    wpcf7.initForm($form);
    if (wpcf7.cached）{
        wpcf7.refill($form);
    }
});

如此一來使用表單的流程都能夠完整掌控，剩下前述需求「有填過單的就不用再填」，這部分是使用 Cookie 做法來記憶，前端使用 JavaScript 控制：

// 建立cookie
function ks_createCookie(name, value, days, path) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}
//讀取
function ks_readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
//刪除
function ks_eraseCookie(name) {
    createCookie(name, "", -1);
}

與前端同事合作的方式為他先照設計圖把整個功能樣式拼裝，我來接入這後端互動。後續如有整合 Google Analytics 統計都是沒問題的～

使用 CF7 的最大彈性其實就是他的開發彈性，其他像是跟 WooCommerce 商品、訂單資料整合，當問卷或是客服諮詢.... 有空再說了ＸＤ