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

Contact Form 7で、ラジオボタンやチェックボックスのテキストを途中で改行したいということがありませんか？

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

[checkbox trigger "あああああ<br>ああああ" "いいいい<br>いいいい"]

こんな感じで書いても当サイトを見て<br>とそのままブラウザに出力されてしまいます。

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

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

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

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

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

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

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

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

まとめ

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

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

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。