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で置換するとやりやすいので、色々試してみると柔軟に対応できるはずです。

Request Materials資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

• ● web広告の改善事例が知りたい方
• ● 現在お願いしている代理店との比較をしたい方
• ● サービスの全体像・料金を知りたい方

資料請求

サービス概要・運用方針などを掲載！
アカウント分析の資料サンプルや実際の事例などサービスをご検討の方はぜひご一読ください。

ご相談お問い合わせ

Web広告をご検討中の方はお気軽にご相談ください。
お客さまの目的や広告運用状況に合わせて、最適なWeb広告運用プランをご提案いたします。