MENU

Contact Form 7 小技まとめ

2018 3/28

お問い合せフォームの定番プラグイン「Contact Form 7」の小技をまとめてみました。サイトのイメージや用途に合わせて、フォームもそれなりに工夫したいですものね。基本的な使い方の説明は省略しました。

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

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

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

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

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

テーマフォルダ内の 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:11px;} ← スタイル記述
目次
目次
閉じる