【CF7対応】textarea の改行を br に反映する方法：確認画面で見やすく表示する実装術

ユーザーからの入力内容を確認画面に表示する場面では、
特に <textarea> で改行された内容を そのまま見やすく表示したいというニーズがあります。

しかし、HTMLの仕様上、改行（\n）は自動で <br> に変換されないため、
そのままだと確認画面ではすべてが一行に表示されてしまいます。
この記事では、Contact Form 7（CF7）＋Multi-Step Forms を
使ったフォームにおいて、ユーザーの改行を正しく表示する方法を解説します。

なぜ<textarea>の改行が反映されないのか？

HTMLの仕様では、<textarea> で入力された内容がどれだけ改行されていても、
表示時にそのまま出力されると 改行文字は無視されてしまうため、
次のような表示になってしまいます。

株式会社〇〇〇〇
代表取締役 〇〇〇〇

が、

株式会社〇〇〇〇 代表取締役 〇〇〇〇

のように、すべて一行で表示されてしまうのです。

解決方法：改行を <br> に変換して表示

方法の概要

1. <textarea> の入力内容を hidden フィールドに保存する
2. 確認画面ではその hidden の値を表示する
3. JavaScript で \n を <br> に置き換える

実装ステップ

ステップ①：フォーム入力ページ

<p>お札名（お名前など）</p>
[textarea* badge-name placeholder "例）株式会社〇〇〇〇\n代表取締役 〇〇〇〇"]
[hidden badge-name-confirm id:badge-name-confirm]

ステップ②：JavaScriptで hidden に反映

<script>
document.addEventListener('DOMContentLoaded', function () {
  const textarea = document.querySelector('textarea[name="badge-name"]');
  const hidden = document.getElementById('badge-name-confirm');

  if (textarea && hidden) {
    // 入力時に hidden にコピー
    textarea.addEventListener('input', () => {
      hidden.value = textarea.value;
    });

    // 初期値も反映
    hidden.value = textarea.value;
  }
});
</script>

ステップ③：確認画面で改行を反映して表示

<p id="confirm-badge-name">[multiform badge-name-confirm]</p>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const el = document.getElementById('confirm-badge-name');
  if (el) {
    const raw = el.textContent || el.innerText;
    // エスケープして <br> に変換
    const escaped = raw.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    el.innerHTML = escaped.replace(/\n/g, '<br>');
  }
});
</script>

補足：複数の textarea に使いたい場合

複数対応させたい場合は、共通クラス .multiform-nl2br を使うのが便利です。

HTML

<p class="multiform-nl2br">[multiform remarks]</p>
<p class="multiform-nl2br">[multiform message]</p>

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.multiform-nl2br').forEach(el => {
    const raw = el.textContent || el.innerText;
    const escaped = raw.replace(/</g, '&lt;').replace(/>/g, '&gt;');
    el.innerHTML = escaped.replace(/\n/g, '<br>');
  });
});
</script>

注意点とベストプラクティス

ポイント	対応方法
XSS対策	<, > にエスケープしてから .innerHTML で書き換えましょう
hidden に入れた値が空になる	フォーム初期化時に textarea の値を hidden にコピーしておく
複数項目に対応したい	クラス指定と querySelectorAll で一括処理がおすすめ

まとめ

<textarea> の改行をそのまま確認画面に表示するには、以下の流れがベストです：

1. 値を hidden に受け渡す（Multi-Stepで引き継げる）
2. 表示時に JS で改行（\n）を <br> に置き換える
3. エスケープ処理を忘れない

この処理を実装すれば、確認画面でも見やすく・正確にユーザー入力を表示でき、信頼性の高いフォーム体験につながります。

Favorite