マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 【Contact Form 7】ラジオボタンやチェックボックスのテキストを途中で改行する方法

Mighty Ace Blog

マイティーBlog

デザイン

2021.09.12

【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アナリティクス設定項目チェックシート(無料)

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.