WEB制作プライバシーポリシーお問い合わせサイトマップContactForm7で選択できる各項目を掘り下げて解説!2019.06.18プラグインHOMEプラグインContactForm7で選択できる各項目を掘り下げて解説!便利なContactForm7ですが、各設問で実際に何ができるのかがイマイチはっきりとしなかったのでフォームタブ内で選択できる項目について改めて調べてみました。ContactForm7では15個のクイックタグが用意されており、それらを使う事で簡単にお問い合わせフォームを作成する事ができます。出来ることは多い反面、いざ「こういう項目を聞きたい」「このタグってどう設定するんだろう」という時に何を使ってどう設定すればいいのか分からないという事にもなりかねません。今回はContactForm7の各設問について掘り下げたいと思います。使い方や設定方法に悩んだ時にお役立てください。用意されているクイックタグは以下の15個です。・ファイル・送信ボタンこの中から必要な設問をピックアップしてお問い合わせフォームを作っていくのがContactForm7の使い方になります。各項目で選択できる内容を見ていきますので、必要な箇所だけ確認していただければと思います。テキスト、メールアドレス、URL、電話番号ユーザーに情報を入力してもらう項目です。メールアドレス、URL、電話番号はそれぞれ専用にクイックタグが用意されていますが、名前や他に聞きたい内容がある場合はテキストタグを使用して設問を作成します。・項目タイプチェックを入れることで回答時に選択必須の項目にすることができます。名前や住所を入れるテキストフィールドや、連絡先としてメールアドレスは入力必須にしたいという場合はチェックをいれておきます。●●~]という表記に変わります。基本的にはデフォルトで入っているままで問題ありません。メールの設定をする際に名前をショートコードとして設定することができるので入力項目が多い場合などは「your-name」「name-furigana」等、分かりやすく名前を付けておいてもよいかもしれません。・デフォルト値エリアに最初から記入しておく内容があればデフォルト値に入れておきます。設問に例として(プレースホルダーとして)表示される訳ではなく、「記入」される内容であることに注意してください。記入エリアに例としてテキストを入れておくことでインターフェース上使いやすくなりますので、デフォルトで値を設定する場合は「このテキストを項目のプレースホルダ―として使用する」に必ずチェックを入れておきましょう。・ID属性ID属性に値を入れておくことで、その内容がタグのIDとして設定されます。・クラス属性ID属性同様にクラス属性に値を入れておくことで、その内容がタグのクラスとして設定されます。ccc」のように各クラスの間に半角を入れることで実現が可能ですので覚えておきましょう。"山田太郎"]こうなります。実際にブラウザで表示するとこんな感じですね。ここに関してはシンプルな構造なのでわかりやすいかと思います。上図で1箇所、設定項目の中にはない数字があるのが分かるでしょうか?40/20と書かれている部分がそうなのですが、これはテキストフィールドのサイズと文字数制限を表しています。前の数字(40)がテキストフィールドのsize属性を、後ろの(20)がmaxlength属性を表していますので、文字数制限をかけたい時やフィールドの大きさを変更したい場合は参考にしてみてください。-【ContactForm7】フォームの入力を分かりやすく!placeholderを設定してフォームに...https://wp-topics.com/plugin/733/ContactForm7はWordPressに簡単にコンタクトフォームを導入できるプラグインですが、デフォルトのままでは入力欄が表示されるのみでユーザーにとっては少し使いづらさがあります。数値を選択できる項目を作れます。古いブラウザでは対応していないものもありますので注意が必要です。・項目タイプ数値の記入はスピンボックスかスライダーかを選ぶことが可能です。スピンボックスはクリックで数値の増減ができるタイプ、スライダーはバーを動かすことで数値を変更できるタイプです。どちらもHTML5で新たに加わったnumberとrangeタグでの表示となります。"50"]こうなります。実際の見た目はこんな感じですね。スライダーで選択した数値はユーザーには見えませんので厳密な数字を求める場合は使用しないほうがよさそうです。数値の増減幅を変更したい場合スピンボックスを使う場合、デフォルトではクリック毎の数字の増減は1です。これを5ずつ増減させたい、10ずつにしたいという場合はstepをショートコードの中に記述します。"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日おきにしか日付選択できない等といった設定が可能です。"2019-06-01"]こうなります。実際の見た目はこんな感じですね。テキストエリアテキストエリアはテキストと同じように見えますが、実際にブラウザで表示させたときの形と入力制限に変化があります。テキストでは1行しか入力できないのに対し、テキストエリアでは複数行の入力が可能です。お問い合わせの詳細などでユーザーに自由入力を求める際にはこちらを使うことが望ましいです。複数項目の中から1つを選ぶ際に使うのがドロップダウンメニューです。都道府県の選択等でよく見かけるで見たことがある方も多いかと思います。・オプションチェックボックスやドロップダウンメニューの場合はデフォルト値ではなくオプションに項目が変わります。...と、一つの項目ごとに改行していく事で複数個の選択肢を作ることが可能です。・複数選択を可能にするチェックを入れておくことでドロップダウンメニューをShift+クリックで複数選択できるようになります。・空の項目を先頭に挿入するチェックを入れておくとブラウザで表示した時にセレクトボックスを未選択の状態に見せることができます。デフォルト値を設定するデフォルトで選択させておきたい項目があればdefaultを使う事で設定が可能です。上記の都道府県を例にdefaultの使い方を説明します。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が使えます。この記述を入れておくことで、選択項目の最後にテキストフィールドを表示させることが可能です。その他こんな感じの設問を用意する場合は是非使ってみてください。"その他"]こうなります。ポリシーにどういしていただけましたか?」「送信者は本人ですか?」などフォームの送信前にユーザーに同意を求めたい場合はその内容を記入します。・オプションデフォルトではチェックボックスを任意選択にするにチェックが入っています。選択が必須の内容ならチェックを外しておきましょう。invertを使って「チェックを外さないと送信できない」設定にすることでユーザーの同意を取る事が可能です。コードの中にinvertと記述する事で上記の状態にすることができます。クイズ・クイズと回答スパム対策や認証鍵がないと送れないようなフォームを作成したい場合はクイズの項目を使って実現する事ができます。|(縦棒)を使ってクイズと回答を区切ることで、その内容がマッチしていない場合は送信できないフォームになります。例:1+1=|2例:送信用の認証鍵を記入してください|12345等としておくことで、答えが違う場合にフォームの送信をブロックする事が可能です。ドロップダウン等と同様に、改行して複数のクイズを登録しておくこともでき、その場合は毎回ランダムに出題される形になりますのでボットによるスパム対策として入れることも想定されます。UIが損なわれますので、分かりやすい答えにする等でカバーする必要がありそうですが。全角と半角、大文字と小文字は同じものとして扱われますので規制はある程度緩いものになっています。テキストフィールドですのでテキストの項目で触れた40/20をコードに記述する事でサイズと入力文字数の上限を定めることが可能です。設定するとこんな感じ実際の見た目はこのようになり、答えが違うと間違えている旨の表示がされます。ファイル・ファイルサイズの上限(バイト)添付できるファイルサイズの上限を決めておくことができます。数字で入力するほか、数字の後ろにkb、mbをつけて指定する事も可能です。1.2kb、2.5mbのように.5等と省略して記入することはできません。デフォルトでは1mb(1048576バイト)までしか受信できません。受信できるファイルの拡張子を制限できます。ように、拡張子を|(縦棒)で繋ぐことで指定したファイルの受信のみ可能になります。送信ボタン・ラベル送信ボタンの文言を変更したい場合はここに記入します。デフォルト(未記入)では「送信」となっていますので使いやすい言葉に自由に変更してください。まとめという事で長々とContactForm7の設問についてまとめてみました。ここまで読まれた方は果たしているのでしょうか...普通に利用する分にはここまで色々考える必要もないのですが、いざ何かしたいと思った時にここどうすればいいの?となりがちなContactForm7。多機能ゆえの悩みですね。この項目ってこんなことできないかなーと思った時は是非参考にしてみてください。2019.10.04ブログを続けていくと気になってくるのがサイトがどれぐらい人に見られているか、ですよね。プロフィールWEB屋さんの端くれ。