WordPressプラグイン「Contact Form 7」小技カスタマイズ

お問い合せフォームの定番プラグイン「Contact Form 7」の小技をまとめてみました。

サイトのイメージや用途に合わせて、フォームもそれなりに工夫したいですものね。

基本的な使い方の説明は省略しました。

チェックボックス　フォーム画面に1項目ずつ改行して表示

チェック項目には wpcf7-list-item というクラスが振られているので、スタイルシートで下記を追加することで改行されます。

.wpcf7-list-item { display: block; }

その他の装飾も紹介されています
　Custom layout for checkboxes and radio buttons (Contact Form 7 tips)

チェックボックス　受信メール本文でも１項目ずつ改行表示

テーマフォルダ内の functions.php に下記を追記すると、メール本文内も改行表示となります。

add_filter( 'wpcf7_mail_tag_replaced', 'my_mail_tag_replaced', 10, 2 );
function my_mail_tag_replaced( $replaced, $submitted ) {
  if ( is_array( $submitted ) )
    $replaced = join( "\n", $submitted );
  return $replaced;
}

参考にしたサイト
　ContactForm7 メッセージのチェックボックス改行について

スタイルシートでどのようにでも……

フォームを成形するエリアは、スタイルシートが使えるので見た目をどのようにでもできます。

例えば、(必須)などを赤字で小振りにしたいなら、

<span class="reds">（必須）</span>

.reds{color:#cc0000;font-size:13px;}