HippoBlog
Web開発に関する備忘録や
日々の雑記ブログ
  • #WordPress
  • 2024年6月23日
ENTRY TITLE

Contact Form 7 でメール送信後に PDF をダウンロードさせる

TEXT BY @hippohack@hippohack
TEXT BY @hippohack@hippohack
  • このエントリーをはてなブックマークに追加

前提

  • カスタム投稿を設定済み
  • カスタム投稿のカスタムフィールドにダウンロードさせたい PDF のURL を持たせている
    • PDF は、メディアライブラリに置いているので URL を知っている人は見れるというゆるい状態
  • Contact Form 7 でフォームは作成済み

実装

PHP 側の処理です。

メール送信後のフック wpcf7_mail_sent を利用します。

[functions.php]

// メール送信後のタイミングのフックを利用して PDF のURLをセッションに保存するアクションフックを定義
function after_mail_sent_action($contact_form) {
    if ($contact_form->id() == 999) { // フォームのID を適宜設定する
        $submission = WPCF7_Submission::get_instance();

        if ($submission) {
            // CONTACT FORM が埋め込まれている投稿ページのID を取得する
            $post_id = $submission->get_meta('container_post_id');

            // カスタムフィールドからファイルのURLを取得する
            if (function_exists('CFS')) {
                $file_url = CFS()->get('download_file_url', $post_id);

                if ($file_url) {
                    session_start();
                    $_SESSION['download_url'] = $file_url;
                }
            }
        }
    }
}
add_action('wpcf7_mail_sent', 'after_mail_sent_action');

// PDF ダウンロード用のエンドポイントを定義
add_action('rest_api_init', function () {
    // URL は適宜
    register_rest_route('custom/v1', '/get-download-url', array(
        'methods' => 'GET',
        'callback' => 'get_download_url',
    ));
});

// セッションを参照して PDF のURL を返す
function get_download_url() {
    session_start();
    if (isset($_SESSION['download_url'])) {
        $download_url = $_SESSION['download_url'];
        unset($_SESSION['download_url']);
        return new WP_REST_Response(array('download_url' => $download_url), 200);
    } else {
        return new WP_REST_Response(array('download_url' => null), 404);
    }
}

続いて、js の処理です。

こちらもメール送信後のイベント wpcf7mailsent を利用します。

[script.js]

// ダウンロード用エンドポイントをたたいて URLを取得しアンカーのダウンロード属性を利用してPDFをダウンロードする
document.addEventListener('wpcf7mailsent', function(event) {
    if (event.detail.contactFormId == 999) {
        fetch('/wp-json/custom/v1/get-download-url')
            .then(response => response.json())
            .then(data => {
                if (data.download_url) {
                    const link = document.createElement('a');
                    link.href = data.download_url;
                    link.download = '';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            });
    }
}, false);

最後までお読みいただき、ありがとうございました。

ご意見などありましたら@hippohackへDMをお願いいたします。

  • このエントリーをはてなブックマークに追加