標題說的應用其實也有不少外掛能辦到,像是「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('[contact-form-7 404 "Not Found"]')));
}
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 商品、訂單資料整合,當問卷或是客服諮詢.... 有空再說了XD

Facebook 外掛功能


Share:

作者: Chun

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

發佈留言

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