CONTACT form 7プラグイン（中編） ～WordPressでブログを始める～
前回の「CONTACT form 7プラグイン（前編）」の記事
前回、Contact Form 7で基本的な問い合わせのページを作成した。
その時には設定をしなかったデフォルト値やクラス属性、また使わなかったURLや電話番号などのフォームタグを試してみる。
コンテンツ
テキスト
テキスト入力の為のフォームタグ。１行のみの入力の時に使用する。
複数行の入力の場合はテキストエリアを使用する。
項目タイプ | 必須項目にチェックをすると入力が必須になる |
名前 | 項目名（任意の名前） |
デフォルト値 | デフォルトで表示する値。 「このテキストを項目のプレースホルダーとして使用する」にチェックをする事により入力例として使用できる。
入力フォーム
※ちょっと見にくいけど”山田 太郎” 部分が入力例 |
Akismet | スパムコメントを自動的に振り分けてくれるAkismetプラグインを有効にしている時に使用可能。 Akismetについては別記事で。 |
ID属性、クラス属性 | CSSにID、クラスを定義する事により項目のスタイルを変更する事ができる。 クラス属性の使用例については下記参照。 |
クラス属性の使用の仕方
例えば前述の”お名前（必須）”の背景色をクラス属性を設定して変更してみる。
まず該当項目にどの様なスタイルが設定されているのかを確認する。
ChromeでF12でデバッグモードに切り替えて１. 矢印マークをクリックして、２. ソースやクラスを表示したい項目をクリックすると、３. 選択している項目のクラス（.wpcf7 input[type=text]）が表示される。
backgroundに#f5f5f5（薄いグレー）が設定されているので別の色に変える為に独自のクラスを定義する。
WordPressのメニューから外観ー＞テーマの編集、現在使用しているテーマを選んでスタイルシート（style.css）を選択する。
style.cssに以下のコードを追記する。
input[type=text].wpcf7_r
{
background: #fdeff2; /* 薄桜うすざくら */
}wpcf7_r は独自クラス。
Chromeのデバッグモードで調べて要素（input[type=text]）を指定したのは、これが無いとスタイルの優先順位の関係でどうにもスタイルが反映されなかったので。
選択しているテーマ（Hueman）によっても動作がちがってくるのかも知れない。
フォームタグ生成のクラス属性欄に先程作成した独自クラスを指定する。
Chromeのデバッグモードで確認してみるとclass=wpcf7_rが指定されてbackgroundが#fdeff2に変更されて背景色が変わった。
メールアドレス・URL・電話番号
メールアドレス・URL・電話番号入力の為のフォームタグ。項目についてはテキストと同様。
それぞれのフォーマットのみ受け付けるようにエラーチェックがはいる。
数値
数字入力用のフォームタグ。
項目タイプでスピンボックス／スライダーの２方式の選択が可能。また下限、上限が設定できる。
他の項目はテキスト等と同様。
スピンボックス
スライダー（左右にスライド）
日付
日付入力の為のフォームタグ。
最新のブラウザであればカレンダー形式のUIで入力が可能。
古いブラウザやFireFoxではテキスト形式の入力になる模様。
数値と同様、下限と上限が指定できる。
カレンダー入力フォーム
テキストエリア
複数行入力可能なテキストの為のフォームタグ。
ドロップダウンメニュー
ドロップダウンメニューのフォームタグ。
オプション | ドロップダウンするリストを指定する。 |
複数選択を可能にする | チェックをいれるとCtrlキーを押しながらの複数選択が可能になる。 |
空の項目を先頭に挿入する | １行目が空（未選択）になる。 |
ドロップダウンメニューの例
チェックボックス
チェックボックスのフォームタグ。
オプション | チェックボックスの選択肢リストを指定する |
ラベルを前に、チェックボックスを後に配置する | 通常の表示
チェックするとラベルが前になる
|
個々の項目を label 要素で囲む | チェックをするとラベルの部分をクリックしても反応する。
|
チェックボックスを排他化する | チェックをすると排他的に動作するので一度に複数のチェックができなくなる。 |
ラジオボタン
ラジオボタンのフォームタグ。
オプション | ラジオボタンの選択肢リストを指定する |
ラベルを前に、チェックボックスを後に配置する | チェックをするとラベルが前に表示される。 通常の表示
チェックをした時の表示
|
個々の項目を label 要素で囲む | チェックをするとラベルの部分をクリックしても反応する。 |
承諾確認
チェックボックスにチェックをしないと送信できないようにする時に使用する。
例）プライバシポリシーの承認など
同意条件 | 同意条件を記入する。 例）”プライバシポリシーに同意しますか？”
|
このチェックボックスをデフォルトでチェックされた状態にする | 初期状態でチェック済にするかどうか |
これの挙動を反対にする | チェックすると ”チェックを外す” ことで承認となる（通常の逆） |
クイズ
クイズをランダムに出題して正解の時のみ送信を可能にする。
クイズと回答 | クイズと回答をパイプラインで区切って入力する。 複数行入力の場合、ランダムに出題される。 例） 日本の首都は？|東京
テーマ（Hueman）との関係か、問題と解答欄のレイアウトがイマイチだった。つかう場合はCSSで調整した方が良いと思う 間違った時の表示
|
reCAPTCHA
Googleが提供しているreCAPTCHAでスパム対策を行う為の機能。
ファイル
ファイル送信受付用。
ファイルサイズの上限 (バイト) | 受付可能なファイルサイズの上限を指定する。 単位は kb、mbの指定が可能
|
受け入れ可能なファイル形式 | 受け入れ可能なファイルタイプをパイプラインで区切って指定する。 例）gif|png|jpg|jpeg |
送信ボタン
フォームを送信するフォームタグ。
以上でフォームタグの説明は終了。
reCAPTCHAについては後編の記事で試してみる。
最近のコメント