便利なContactForm7ですが、各設問で実際に何ができるのかがイマイチはっきりとしなかったのでフォームタブ内で選択できる項目について改めて調べてみました。
ContactForm7では15個のクイックタグが用意されており、それらを使う事で簡単にお問い合わせフォームを作成する事ができます。しかし色々と出来ることは多い反面、いざ「こういう項目を聞きたい」「このタグってどう設定するんだろう」という時に何を使ってどう設定すればいいのか分からないという事にもなりかねません。
実際になりました。
ですので今回はContactForm7の各設問について掘り下げたいと思います。
使い方や設定方法に悩んだ時にお役立てください。
ContactForm7で利用できる設問
用意されているクイックタグは以下の15個です。
・テキスト
・メールアドレス
・URL
・電話番号
・数値
・日付
・テキストエリア
・ドロップダウンメニュー
・チェックボックス
・ラジオボタン
・承諾確認
・クイズ
・reCAPTHA ※使用するのにAPIキーが必要
・ファイル
・送信ボタン
この中から必要な設問をピックアップしてお問い合わせフォームを作っていくのがContactForm7の使い方になります。
各項目で選択できる内容を見ていきますので、必要な箇所だけ確認していただければと思います。
テキスト、メールアドレス、URL、電話番号
ユーザーに情報を入力してもらう項目です。メールアドレス、URL、電話番号はそれぞれ専用にクイックタグが用意されていますが、名前や他に聞きたい内容がある場合はテキストタグを使用して設問を作成します。
・項目タイプ
チェックを入れることで回答時に選択必須の項目にすることができます。名前や住所を入れるテキストフィールドや、連絡先としてメールアドレスは入力必須にしたいという場合はチェックをいれておきます。
必須項目にすると[text ●●～]が[text* ●●～]という表記に変わります。
・名前
設問の名前です。基本的にはデフォルトで入っているままで問題ありません。
メールの設定をする際に名前をショートコードとして設定することができるので入力項目が多い場合などは「your-name」「name-furigana」等、分かりやすく名前を付けておいてもよいかもしれません。
・デフォルト値
エリアに最初から記入しておく内容があればデフォルト値に入れておきます。
※ 設問に例として（プレースホルダーとして）表示される訳ではなく、「記入」される内容であることに注意してください。
記入エリアに例としてテキストを入れておくことでインターフェース上使いやすくなりますので、デフォルトで値を設定する場合は「このテキストを項目のプレースホルダ―として使用する」に必ずチェックを入れておきましょう。
・ID属性
ID属性に値を入れておくことで、その内容がタグのIDとして設定されます。
・クラス属性
ID属性同様にクラス属性に値を入れておくことで、その内容がタグのクラスとして設定されます。
複数のクラスを設定したい場合は「aaa bbb ccc」のように各クラスの間に半角を入れることで実現が可能ですので覚えておきましょう。
これらを全て設定すると
[text* your-name 40/20 id:Name class:input-name placeholder "山田太郎"]こうなります。
実際にブラウザで表示すると
こんな感じですね。
ここに関してはシンプルな構造なのでわかりやすいかと思います。
入力エリアのサイズと文字数制限
上図で1箇所、設定項目の中にはない数字があるのが分かるでしょうか？
40/20と書かれている部分がそうなのですが、これはテキストフィールドのサイズと文字数制限を表しています。
前の数字（40）がテキストフィールドのsize属性を、後ろの（20）がmaxlength属性を表していますので、文字数制限をかけたい時やフィールドの大きさを変更したい場合は参考にしてみてください。
プレースホルダーって何？入れるといいことあるの？という方はこちらもチェック！
数値
数値を選択できる項目を作れます。
古いブラウザでは対応していないものもありますので注意が必要です。
・項目タイプ
数値の記入はスピンボックスかスライダーかを選ぶことが可能です。
スピンボックスはクリックで数値の増減ができるタイプ、スライダーはバーを動かすことで数値を変更できるタイプです。
どちらもHTML5で新たに加わったnumberとrangeタグでの表示となります。
設定すると
[number number-box min:0 max:100 "50"]
[range number-box min:0 max:100 "50"]こうなります。
実際の見た目は
こんな感じですね。
スライダーで選択した数値はユーザーには見えませんので厳密な数字を求める場合は使用しないほうがよさそうです。
数値の増減幅を変更したい場合
スピンボックスを使う場合、デフォルトではクリック毎の数字の増減は1です。
これを5ずつ増減させたい、10ずつにしたいという場合はstepをショートコードの中に記述します。
[number number-box step:10 min:0 max:100 "50"]するとstepで指定した数値分ずつ増減するようになったかと思います。
なお下限が3、上限が100でデフォルト値が50でstepで10ずつ増減するような設定をした場合、50の次の数が53になった後63、73と増えていく形になってしまいます。
stepの値は割り切れる数値にしておくのがよさそうです。
日付
日付ピッカーを使ってカレンダーから日にちを選択することができる項目です。
何らかの日程を選ばせる場合はドロップダウンメニューよりも使い勝手が良いので、使い道は広がっていきそうです。
数値の項目と同じくこちらも古いブラウザには対応していませんので注意が必要です。
・範囲
下限と上限を決めておくことでその範囲内から日付を選択できるボックスが表示されます。
範囲を決める際は数値と同じくmin:で下限を、max:で上限を定めることができます。
このminとmaxの値は“today+10days””today+1week”といった相対的な形で設定する事もできますので、今日を起点に前後1ヶ月といった制限のかけ方も可能です。
常時使うお問い合わせフォームの場合は相対で記述しておく方がメンテナンスフリーで良いかもしれません。
上手く使う事で生年月日の入力だけでなく宿泊やレストラン、美容院の予約などに使えるかもしれません。
まぁ予約に関してはここでの設定値をデータベースに保存して何かと照合して…みたいなことをするより予約用プラグインでも使った方が楽ですし間違いがないんですけどね…
ちなみに日付の項目でも数値と同様stepを使うことができます。step:3と入れておくと3日おきにしか日付選択できない等といった設定が可能です。
設定すると
絶対指定
[date date-box min:2019-06-01 max:2019-06-30 "2019-06-01"]
相対指定
[date date-box min:today-2week max:today+2week "2019-06-01"]こうなります。
実際の見た目は
こんな感じですね。
テキストエリア
テキストエリアはテキストと同じように見えますが、実際にブラウザで表示させたときの形と入力制限に変化があります。
テキストでは1行しか入力できないのに対し、テキストエリアでは複数行の入力が可能です。
お問い合わせの詳細などでユーザーに自由入力を求める際にはこちらを使うことが望ましいです。
ドロップダウンメニュー
複数項目の中から1つを選ぶ際に使うのがドロップダウンメニューです。都道府県の選択等でよく見かけるで見たことがある方も多いかと思います。
・オプション
チェックボックスやドロップダウンメニューの場合はデフォルト値ではなくオプションに項目が変わります。
都道府県などを入れたい場合は
東京
埼玉
神奈川
千葉
…
と、一つの項目ごとに改行していく事で複数個の選択肢を作ることが可能です。
・複数選択を可能にする
チェックを入れておくことでドロップダウンメニューをShift+クリックで複数選択できるようになります。
あまり使いません。
・空の項目を先頭に挿入する
チェックを入れておくとブラウザで表示した時にセレクトボックスを未選択の状態に見せることができます。
デフォルト値を設定する
デフォルトで選択させておきたい項目があればdefaultを使う事で設定が可能です。
上記の都道府県を例にdefaultの使い方を説明します。
これらには上から
東京 ⇒ 1
埼玉 ⇒ 2
神奈川 ⇒ 3
千葉 ⇒ 4
… ⇒ 5,6,7～
という風に番号が割り振られています。※javascriptやphpのように0から始まるわけではないので注意！
この中から埼玉をデフォルトにしたい場合はdefauld:2と記述しておくことで初期選択を埼玉に変更できます。
チェックボックス、ラジオボタン
ドロップダウンと同じく複数の中から選択するメニューですが、チェックボックスは複数項目の選択に、ラジオボタンはより直観的にわかりやすい質問に向いています。
・オプション
項目の増やし方もドロップダウンメニューと同様です。defaultも使えますので最初からチェックを入れておきたい場合は活用してください。
またチェックボックスはdefaultで複数チェックを入れることも可能です。
その場合はdefault:1_2_3のようにアンダーバーで数字を区切って記述することで上から1～3がチェックされた状態で表示させることが可能です。
・ラベルを前に、チェックボックスを後に配置する
チェックを入れておくと
例：好きな果物は何ですか
□ りんご □ ばなな □ みかん
上記の並びが
例：好きな果物は何ですか
りんご □ ばなな □ みかん □
に変わります。
・個々の項目をlabel要素で囲む
チェックしておくことで、チェックボックスだけでなく、個々の項目名（好きな果物～のチェックボックスを例にあげると「りんご」「ばなな」「みかん」）をクリックした時もチェックが入るようになります。
デフォルトでは項目名をクリックしてもチェックボックスが反応しませんのでUI向上の為にもチェックをしておくことをお勧めします。labelを使用する場合はコードの中にuse_label_elementが表示されます。
・チェックボックスを排他化する
これを選択すると1つの項目しか選択できない状態になります。
わざわざチェックボックスで複数選択をできなくする理由もありませんので、項目の中から一つだけを選ばせたい場合は普通にラジオボタンを使うのが賢明です。
その他、自由入力欄を追加する
チェックボックスやラジオボタンを使う際はユーザーに自由入力してもらう欄があると便利な場面が多いですよね。
その場合はfree_textが使えます。
この記述を入れておくことで、選択項目の最後にテキストフィールドを表示させることが可能です。
よく使うSNSは何ですか？
□ Twitter □ Facebook □ Instagram □ その他
こんな感じの設問を用意する場合は是非使ってみてください。
設定すると
[checkbox checkbox-775 use_label_element free_text "Twitter" "Facebook" "Instagram" "その他"]
[radio radio-717 use_label_element free_text default:2 "よく利用する" "たまに利用する" "ほとんど利用しない" "利用したことがない" "その他"]こうなります。
実際の見た目は
こんな感じですね。
承諾確認
・同意条件
「個人情報保護のポリシーにどういしていただけましたか？」「送信者は本人ですか？」などフォームの送信前にユーザーに同意を求めたい場合はその内容を記入します。
・オプション
デフォルトではチェックボックスを任意選択にするにチェックが入っています。選択が必須の内容ならチェックを外しておきましょう。
もしくはinvertを使って「チェックを外さないと送信できない」設定にすることでユーザーの同意を取る事が可能です。コードの中にinvertと記述する事で上記の状態にすることができます。
クイズ
・クイズと回答
スパム対策や認証鍵がないと送れないようなフォームを作成したい場合はクイズの項目を使って実現する事ができます。
|（縦棒）を使ってクイズと回答を区切ることで、その内容がマッチしていない場合は送信できないフォームになります。
例：１＋１＝|２
例：送信用の認証鍵を記入してください|12345
等としておくことで、答えが違う場合にフォームの送信をブロックする事が可能です。
ドロップダウン等と同様に、改行して複数のクイズを登録しておくこともでき、その場合は毎回ランダムに出題される形になりますのでボットによるスパム対策として入れることも想定されます。
UIが損なわれますので、分かりやすい答えにする等でカバーする必要がありそうですが。
全角と半角、大文字と小文字は同じものとして扱われますので規制はある程度緩いものになっています。
またテキストフィールドですのでテキストの項目で触れた40/20をコードに記述する事でサイズと入力文字数の上限を定めることが可能です。
設定すると
こんな感じ
実際の見た目は
このようになり、答えが違うと間違えている旨の表示がされます。
ファイル
・ファイルサイズの上限（バイト）
添付できるファイルサイズの上限を決めておくことができます。
数字で入力するほか、数字の後ろにkb、mbをつけて指定する事も可能です。
ただし、1.2kb、2.5mbのように.5等と省略して記入することはできません。
なおデフォルトでは1mb（1048576バイト）までしか受信できません。
・受け入れ可能なファイル形式
受信できるファイルの拡張子を制限できます。
デフォルトでは、jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav,、wmvのファイルの受け取りが可能ですが、画像の投稿用に使いたいといった場合は jpg|jpeg|png|gif のように、拡張子を｜（縦棒）で繋ぐことで指定したファイルの受信のみ可能になります。
送信ボタン
・ラベル
送信ボタンの文言を変更したい場合はここに記入します。
デフォルト（未記入）では「送信」となっていますので使いやすい言葉に自由に変更してください。
まとめ
という事で長々とContactForm7の設問についてまとめてみました。
ここまで読まれた方は果たしているのでしょうか…
普通に利用する分にはここまで色々考える必要もないのですが、いざ何かしたいと思った時にここどうすればいいの？となりがちなContactForm7。多機能ゆえの悩みですね。
この項目ってこんなことできないかなーと思った時は是非参考にしてみてください。
