[Contact Form 7]送信完了時にモーダルウィンドウを表示する

「Word Press」用プラグイン「Contact Form 7」は使いやすい便利なメール送信フォーム作成プラグインです。

しかし、メール送信完了時のアクションがフォームの下に文言が追加されるだけとなっており「メールが送信できたのか」が少し気づきにくい仕様となっています。
そこで今回は、非常に簡単に実装できる「送信完了時にモーダルウィンドウを表示するアイデア」を考えてみました。

仕様デモ
目指したもの
実装手順
CSS
Javascript
補足

仕様デモ

上記のデモでは実際にメールは送信されません。

目指したもの

メール送信完了時にモーダルウィンドウを表示する
モーダルには自由なメッセージとリンク先を設定する

実装手順

下記のCSSとJavascriptをContact Form 7を設置するページに反映させます。

コードの利用は自己責任でお願いします。
利用しているテーマやテンプレートによっては正常に動作しない場合があります。

もしくは、以下をまるごと対象のページやContactForm7編集ページに貼り付けます。

まるごとコピペするならこちら

<style>
    /* 本来の送信メッセージとエラーメッセージは非表示にする */
    .wpcf7 form.sent .wpcf7-response-output,
    .wpcf7-not-valid-tip {
        display: none;
    }
    /* モーダルウィンドウを作成する */
    #cf7-modal {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
    }
    #cf7-modal__bg {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
        z-index: -1;
    }
    #cf7-modal__wrap {
        background-color: #ffffff;
        border-radius: 10px;
        width: 90%;
        padding: 20px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        text-align: center;
    }
</style>
<script>
    // 送信完了後に表示するテキスト
    const submitText = 'ありがとうございます。メッセージは送信されました。';
    // 送信完了後に表示するリンク
    const submitLink = '/';
    // モーダル要素を作成する
    const modalElement = document.createElement('div');
    modalElement.id = 'cf7-modal';
    const modalBg = document.createElement('div');
    modalBg.id = 'cf7-modal__bg';
    const modalWrap = document.createElement('div');
    modalWrap.id = 'cf7-modal__wrap'
    const modalText = document.createElement('p');
    modalText.appendChild(document.createTextNode(submitText));
    const modalLink = document.createElement('a');
    modalLink.href = submitLink;
    modalLink.appendChild(document.createTextNode('戻る'))
    // モーダル要素をDOMツリーに追加する
    modalElement.appendChild(modalBg);
    modalElement.appendChild(modalWrap);
    modalWrap.appendChild(modalText);
    modalWrap.appendChild(modalLink);
    // モーダルをbody直下に追加する
    const bodyElement = document.getElementsByTagName('body');
    bodyElement[0].appendChild(modalElement);
    // 送信完了時にモーダルを表示する
    document.addEventListener('wpcf7mailsent', function(e) {
        modalElement.style.display = 'flex';
    });
</script>

CSS

/* 本来の送信メッセージは非表示にする */
.wpcf7 form.sent .wpcf7-response-output {
    display: none;
}

/* モーダルウィンドウを作成する */
#wpcf7-modal {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}

#wpcf7-modal__bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: -1;
}

#wpcf7-modal__wrap {
    background-color: #ffffff;
    border-radius: 10px;
    width: 90%;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    text-align: center;
}

Javascript

// 送信完了後に表示するテキスト(*1)
const submitText = 'ありがとうございます。メッセージは送信されました。';

// 送信完了後に表示するリンク(*1)
const submitLink = '/';

// モーダル要素を作成する
const modalElement = document.createElement('div');
modalElement.id = 'wpcf7-modal';
const modalBg = document.createElement('div');
modalBg.id = 'wpcf7-modal__bg';
const modalWrap = document.createElement('div');
modalWrap.id = 'wpcf7-modal__wrap'
const modalText = document.createElement('p');
modalText.appendChild(document.createTextNode(submitText));
const modalLink = document.createElement('a');
modalLink.href = submitLink;
modalLink.appendChild(document.createTextNode('戻る'))

// モーダル要素をDOMツリーに追加する
modalElement.appendChild(modalBg);
modalElement.appendChild(modalWrap);
modalWrap.appendChild(modalText);
modalWrap.appendChild(modalLink);

// モーダルをbody直下に追加する(*2)
const bodyElement = document.getElementsByTagName('body');
bodyElement[0].appendChild(modalElement);

// 送信完了時にモーダルを表示する(*3)
document.addEventListener('wpcf7mailsent', function(e) {
    modalElement.style.display = 'flex';
});

文言やリンクを変更する場合には「submitText」「submitLink」の中身を編集する
サイドメニュー等の干渉を避けるためbody直下にモーダルを設置している
（テーマやテンプレートによって表示に失敗する場合はこの辺が原因になりそう）
「wpcf7mailsent」はContact Form 7で用意されている送信完了時に処理を行うDOMイベントのため、他のDOMイベントを設定すれば、送信完了時以外でもモーダルを表示することが可能

DOM イベント | Contact Form 7 [日本語]

補足

今回の内容は非常に単純で以下の様なタグをbody直下に生成し、それをイベントで呼び出しているだけです。

<div id="wpcf7-modal">
    <div id="wpcf7-modal__bg"></div>
    <div id="wpcf7-modal__wrap">
        <p>ありがとうございます。メッセージは送信されました。</p>
        <a href="/">戻る</a>
    </div>
</div>

実際にはモーダル用タグを最初からページに埋め込んでおき、それを呼び出すだけの方がコードも少なく、内容の自由度も上がるかもしれません。