Contact Form 7 の画面遷移が動かない原因と解決策

WordPress で Contact Form 7 を使用してお問い合わせフォームを作成した際に、
送信完了後に特定のページへ遷移させようとしたが、正常に動作しないという問題が発生しました。

1. 発生したエラー

お問い合わせページに以下の JavaScript を埋め込んだところ、確認画面に遷移できませんでした。

<script>
    // 「ご依頼にあたってのお願い」に同意のチェックをつけた時に、ボタンを有効化する。
    const checkbox = document.getElementById('check-box');
    const sendingButton = document.getElementById('sending-btn');

    // チェックボックスの状態が変更されたときの処理
    checkbox.addEventListener('change', function() {
        // チェックボックスが選択されているかどうかでボタンの有効/無効を切り替え
        sendingButton.disabled = !this.checked;
    });

    // お問い合わせ 完了画面遷移
    document.addEventListener('wpcf7submit', function(event) {
        location = './contact-thanks/';
    }, false);
</script>

ブラウザのデベロッパーツールのコンソール (F12 → Console タブ) を開き、エラーが発生していないか確認すると、
チェックボックスの状態が変更されたときの処理部分で、下記のエラーが発生していました。

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

2. スクリプトの実行順序の問題

scriptタグ内の処理が、ページの DOM が完全に読み込まれる前に実行されると、 document.getElementById('check-box') は null になります。

そのため、DOMContentLoaded イベントを使い、ページの読み込みが完了してからスクリプトを実行する必要があります。

3. 修正コード

以下のように修正することで、スクリプトが DOM の読み込み完了後に実行され、エラーを回避できました。

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 要素の取得
        const checkbox = document.getElementById('check-box');
        const sendingButton = document.getElementById('sending-btn');

        // 要素が存在する場合のみイベントリスナーを設定
        if (checkbox && sendingButton) {
            checkbox.addEventListener('change', function() {
                sendingButton.disabled = !this.checked;
            });
        } else {
            console.error("チェックボックスまたは送信ボタンが見つかりません。");
        }

        // お問い合わせ 完了画面遷移
        document.addEventListener('wpcf7mailsent', function(event) {
            location.href = './contact-thanks/';
        }, false);
    });
</script>

5. まとめ

document.getElementById() が null になる原因は 要素が存在しない or JavaScript の実行順が早すぎる場合があります。

DOMContentLoaded を使うことで、HTML の読み込みが完了してから JavaScript を実行できました。