【Contact Form 7/MW WP Form】ラジオボタンやチェックボックスのテキストを途中で改行する方法

Contact Form 7やMW WP Formでフォームを作っていて、ラジオボタンやチェックボックスのテキストを途中で改行したいということがありました。

でも普通に とか入れてもそのまま表示されてしまって改行できないんですよね。

// Contact Form 7
[checkbox trigger "当サイトをを見て<br>知った" "友人から<br>すすめられた"]

// MW WP Form
[mwform_checkbox name="trigger" children="当サイトをを見て<br>知った,当サイトをを見て<br>知った"]

こんな感じで書いても当サイトを見て 知ったとそのままブラウザに出力されてしまいます。\nを使っても改行できません。

改行しないとデザイン的に微妙なのでなんとか改行したい…。

というわけで、今回はContact Form 7やMW WP Formのラジオボタンやチェックボックスのテキストを途中で改行する方法を解説します。

ラジオボタンやチェックボックスのテキストを途中で改行する方法
まとめ

ラジオボタンやチェックボックスのテキストを途中で改行する方法

JSで以下の処理を追加します。

// ラジオボタン＆チェックボックスでテキスト改行（管理画面で入力した<br>を文字列ではなく改行として出力）
$('.wpcf7-list-item-label').each(function () {
  var text = $(this).html();
  $(this).html(text.replace('&lt;br&gt;', '<br>'));
});

まずContact Form 7やMW WP Formの編集画面で改行したい位置で と書きます。ブラウザではこれがエスケープされて出力されるので、エスケープ前の に置換してブラウザ上で改行できるようにします。

.wpcf7-list-item-labelはContact Form 7でラジオボタンやチェックボックスのテキストを囲んでいるタグです。ここのテキストを取得して置換します。MW WP Formも同じ要領でできます。

まあ要はエスケープされた をエスケープ前の に置換してるだけですね。