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

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

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

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

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

// MW WP Form
[mwform_checkbox name="trigger" children="当サイトをを見て<br>知った,当サイトをを見て<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の編集画面で改行したい位置で<br>と書きます。ブラウザではこれがエスケープされて出力されるので、エスケープ前の<br>に置換してブラウザ上で改行できるようにします。

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

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

 

まとめ

Contact Form 7とMW WP Formで解説しましたが、これらに限らず他のプラグインなどでも応用できる処理です。

プラグインによって自動で出力されるタグやテキストを制御するのはjQueryで置換するとやりやすいので、色々試してみると柔軟に対応できるはずです。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる