【Contact Form 7】送信完了メッセージを改行する方法

Contact Form 7のアップデートに伴い、管理画面から<br>タグをいれても消えてしまったり、保存時にエラーが出たりして困っていませんか？

これはCF7のセキュリティ強化（HTMLタグの制限）が原因です。本記事では、テーマのファイル（functions.php）を汚さず、JavaScriptを使って確実にメッセージを改行・カスタマイズする方法を解説します。

問題：送信完了メッセージで改行がうまくいかない原因

Contact Form 7（バージョン6.x以降）では、セキュリティのため、メッセージ設定欄でのHTML使用が制限されています。

• HTMLタグの直接入力
  保存時に「HTMLタグは使用できません」とエラーが出る。
• Enterキーでの改行
  保存できたとしても、出力時にエスケープされて1行にまとめられてしまう（環境依存）。
• PHPフィルターの無効化
  出力直前でタグが除去されるため、nl2br などのフィルターが効かない。

最新バージョンでは普通にEnter改行が保存・表示される環境も増えてきているようです。もしEnterキーで通常の改行が効かない場合は、以下を試してみてください。

解決策：JavaScriptでメッセージを上書きする

最終的に、JavaScriptで送信完了時にメッセージを書き換える方法が確実でした。functions.php編集不要で、HTMLタグも自由に使えます。

実装手順

• フォームを設置しているページの編集画面を開く。
• 「カスタムHTML」ブロックを追加する。
• 以下のコードを貼り付ける。

実装コード：

<script>
document.addEventListener('wpcf7mailsent', function(event) {
    // 200ミリ秒待機（メッセージがDOMに生成されるのを待つ）
    setTimeout(function() {
        // 送信されたフォームを特定
        var form = event.target.closest('form.wpcf7-form');
        if (!form) return;
        
        var responseOutput = form.querySelector('.wpcf7-response-output');
        
        if (responseOutput) {
            // ここに表示したいメッセージを記述（HTML使用可）
            responseOutput.innerHTML = `
                ありがとうございます。<br>
                メッセージは正常に送信されました。<br><br>
                <strong>担当者より3営業日以内にご連絡いたします。</strong>
            `;
        }
    }, 200);
}, false);
</script>

応用：フォームIDごとにメッセージを出し分ける

複数のフォーム（「問い合わせ」と「予約」など）がある場合、IDを判定して出し分けることができます。

// 条件分岐のコア部分
var formId = event.detail.contactFormId;

if (formId == 123) {
    responseOutput.innerHTML = 'お問合せ完了。<br>返信をお待ちください。';
} else if (formId == 456) {
    responseOutput.innerHTML = '資料ダウンロードURLを<br>メールで送信しました。';
}

まとめ

Contact Form 7 6.x以降で送信完了メッセージを改行するには

1. CF7 6.x以降は、管理画面からのHTML入力が難しい。
2. JavaScriptの wpcf7mailsent イベントを使えば、安全かつ確実に改行が可能。
3. innerHTML を使うことで、リンクや装飾も自由自在。

お使いの環境でEnter改行が保存されない場合も、このJavaScript方法なら改行・HTMLが反映されるかと思います。お困りの際は、一度試してみてください。