WordPressプラグイン

【Contact Form7】全13の基本フォームをサンプルを使って徹底解説!

こんな方に読んでほしい!

  • Contact Form 7 で使えるフォームの設定を知りたい!
  • Contact Form 7 で使えるフォームのサンプルを見たい!
  • 面倒なのでコピペしたい!

前回の記事で「Contact Form 7」のインストール、デフォルトの問い合わせフォームの確認をしました。

今回の記事では、「Contact Form 7」の基本フォームとその設定を、フォームごとにサンプルを準備して徹底解説します!

1. 「 Contact Form 7 」とは?

wordpressのプラグイン「 Contact Form 7 」は、500万回以上もダウンロードされ、問い合わせフォームを作成するプラグインの決定版と言っても過言ではない問い合わせフォーム作成プラグインです。

インターネットビジネスラボの問い合わせフォームも「 Contact Form 7 」で作成しています。

では、フォームと設定、サンプルを見ていきましょう!

2. 「 Contact Form 7 」で作成できるフォーム

CF7_item_01_項目

Contact Form 7 では、以下のフォームを作成することができます。

  1. テキスト入力フォーム
  2. メールアドレス入力フォーム
  3. URL入力フォーム
  4. 電話番号入力フォーム
  5. 数値入力フォーム
  6. 日付入力フォーム
  7. テキストエリア入力フォーム
  8. ドロップダウンメニュー
  9. チェックボックス
  10. ラジオボタン
  11. 承諾確認
  12. クイズ
  13. ファイル

さらに詳しく!

この記事では割愛しますが、様々なプラグインでフォームを追加することもできます。

3. 「 Contact Form 7 」のフォームタグ

この後で解説するフォームテンプレートでは、フォームタグを使います。このフォームタグは、タイプ、名前、オプション、値の4つの要素に分けることができます

例えば「テキスト入力フォーム」で「名前」を入力するフォームを作る場合、

CF7_item_16_フォームタグ

このようなフォームタグを指定することになります。このフォームタグは、生成画面で選択もしくは文字を入力することで作成できるので、暗記する必要はありません。

4つの要素からできていることを覚えておいて下さい。

4. 「 Contact Form 7 」で作成できるフォームサンプルと設定

簡単なサンプルですが、もし必要ならどんどんコピーして使ってください。ただし、最後に自分のWebサイトできちんと動作するか、テストは行って下さいね。

ここがポイント!

試しにいろいろ入力してみてください。「送信されました」と表示される場合もありますが、実際には送信されませんのでご安心ください。

4-1. 「テキスト」入力フォーム

テキストは単一行(1行)の入力フォームです。改行ができません。改行したい場合は「テキストエリア」入力フォームを使いましょう。

4-1-1. フォームテンプレート

サンプル

    お名前を入力してください。(必須)

    4-1-2. フォーム生成画面・項目解説

    CF7_item_02_テキスト入力フォーム項目

    項目タイプ チェックを入れると必須項目になります。
    名前 判別するための名前です。your-name等
    デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例:佐藤一郎」等です。
    Akismet 「送信者の名前の入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。(つまりスパムと判断された場合ははじかれます。)
    ID属性 必要に応じて、idを指定できます。
    クラス属性 必要に応じて、classを指定できます。

     

    4-2. 「メールアドレス」入力フォーム

    メールアドレスは単一行(1行)の入力フォームです。改行はできません。

    4-2-1. フォームテンプレート

    サンプル

      メールアドレスを入力してください。(必須)

       

      4-2-2. フォーム生成画面・項目解説

      CF7_item_03_メールアドレス入力フォーム項目

      項目タイプ チェックを入れると必須項目になります。
      名前 判別するための名前です。your-mail等
      デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例:exsample@hoge.com」等です。
      Akismet 「送信者のメールアドレスの入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。(つまりスパムと判断された場合ははじかれます。)
      ID属性 必要に応じて、idを指定できます。
      クラス属性 必要に応じて、classを指定できます。

       

      4-3. 「URL」入力フォーム

      4-3-1. フォームテンプレート

      サンプル

        URLを入力してください。(必須)

         

        4-3-2. フォーム生成画面・項目解説

        CF7_item_04_URL入力フォーム項目

        項目タイプ チェックを入れると必須項目になります。
        名前 判別するための名前です。your-url等
        デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例:https://hoge.com」等です。
        Akismet 「送信者のURLの入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。(つまりスパムと判断された場合ははじかれます。)
        ID属性 必要に応じて、idを指定できます。
        クラス属性 必要に応じて、classを指定できます。

         

        4-4. 「電話番号」入力フォーム

        4-4-1. フォームテンプレート

        サンプル

          電話番号を入力してください。(必須)

           

          4-4-2. フォーム生成画面・項目解説

          CF7_item_05_電話番号入力フォーム項目

          項目タイプ チェックを入れると必須項目になります。
          名前 判別するための名前です。your-tel等
          デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例:080-0000-0000」等。
          ID属性 必要に応じて、idを指定できます。
          クラス属性 必要に応じて、classを指定できます。

           

          4-5. 「数値」入力フォーム

          4-5-1. フォームテンプレート

          サンプル

            数値を入力してください。(必須)

            ※スピンボックスのサンプルです。フォームの右端に上下の矢印が表示されます。

             

            4-5-2. フォーム生成画面・項目解説

            CF7_item_06_数値入力フォーム項目

            項目タイプ 「スピンボックス」「スライダー」から選択します。チェックを入れると必須項目になります。
            名前 判別するための名前です。number等
            デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「5」等など。
            範囲 下限と上限をそれぞれ設定できます。
            ID属性 必要に応じて、idを指定できます。
            クラス属性 必要に応じて、classを指定できます。

            さらに詳しく!

            CF7_item_17_数値フォームスピンボックス&スライダー

            スピンボックスとは、入力欄の右側のアップダウンボタンで数値を増減させて指定する入力フォームです。

            スライダーとは、スライダーを左右に動かして数値を指定する入力フォームです。(スライダーは数値を表示するのにひと手間かかるので、オススメしません。)

             

            4-6. 「日付」入力フォーム

            4-6-1. フォームテンプレート

            サンプル

              日付を入力してください。(必須)

               

              4-6-2. フォーム生成画面・項目解説

              CF7_item_07_日付入力フォーム項目

              項目タイプ チェックを入れると必須項目になります。
              名前 判別するための名前です。date等
              デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例:2019-10-10」等です。
              範囲 それぞれ年月日を設定でき、入力範囲を指定できます。
              ID属性 必要に応じて、idを指定できます。
              クラス属性 必要に応じて、classを指定できます。

              ここに注意!

              デフォルト値の年月日はハイフン「-」でつないでください。スラッシュ「/」でつなぐと表示されません。

               

              4-7. 「テキストエリア」入力フォーム

              テキストエリアは複数行の入力フォームです。改行も可能です。

              4-7-1. フォームテンプレート

              サンプル

                お問い合わせ内容を入力してください。(必須)

                 

                4-7-2. フォーム生成画面・項目解説

                CF7_item_08_テキストエリア入力フォーム項目

                項目タイプ チェックを入れると必須項目になります。
                名前 判別するための名前です。your-message等
                デフォルト値 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「お問い合わせ内容をご入力ください」等など。
                ID属性 必要に応じて、idを指定できます。
                クラス属性 必要に応じて、classを指定できます。

                 

                4-8. 「ドロップダウン」フォーム

                ドロップダウンは準備された選択肢から1つもしくは複数を選択できるフォームです。必須項目にできます。

                4-8-1. フォームテンプレート

                サンプル

                  一番好きな果物は?
                  ドロップダウンの選択肢から回答を1つ選択して下さい。(必須)

                   

                  4-8-2. フォーム生成画面・項目解説

                  CF7_item_09_ドロップダウン項目

                  項目タイプ チェックを入れると必須項目になります。
                  名前 判別するための名前です。your-menue等
                  オプション りんご(改行)みかん(改行)いちご のように入力してください。チェックボックスのチェックで、複数選択可能にすること、先頭に空の項目(空欄)を挿入することができます。
                  ID属性 必要に応じて、idを指定できます。
                  クラス属性 必要に応じて、classを指定できます。

                   

                  4-9. 「チェックボックス」入力フォーム

                  チェックボックスは、準備された選択肢から複数(もしくは1つ)を選択するフォームです。必須項目にできます。

                  4-9-1. フォームテンプレート

                  サンプル

                    一番好きな果物は?
                    回答を1つ選択して下さい。(必須)

                    1、オプションのチェックなし

                    2、「ラベル絵を前に、チェックボックスを後に配置する」にチェック
                    りんごみかんいちごバナナ

                    3、個々の項目をlabel要素で囲む」にチェックすると選択肢の言葉をクリックしてもチェックボックスにチェックが入ります。便利!

                    4、「チェックボックスを排他化する」にチェックを入れると、1つだけしか選択できないようになります。りんごを選択後みかんをクリックすると、りんごのチェックが外れます。
                    りんごみかんいちごバナナ

                     

                    4-9-2. フォーム生成画面・項目解説

                    CF7_item_10_チェックボックス項目

                    項目タイプ チェックを入れると必須項目になります。
                    名前 判別するための名前です。check-box等
                    オプション りんご(改行)みかん(改行)いちご のように入力してください。チェックボックスについては上のサンプルをご確認ください。
                    ID属性 必要に応じて、idを指定できます。
                    クラス属性 必要に応じて、classを指定できます。

                     

                    4-10. 「ラジオボタン」フォーム

                    ラジオボタンは、準備された選択肢から1つを選択するフォームです。必須項目にはできません。

                    4-10-1. フォームテンプレート

                    サンプル

                      一番好きな果物は?
                      回答を選択して下さい。(必須)

                      1、オプションのチェックなし
                      りんごみかんいちごバナナ

                      2、「ラベルを前に、チェックボックスを後に配置する」にチェック
                      りんごみかんいちごバナナ

                      3、「個々の項目をlabel要素で囲む」にチェックすると、選択肢の言葉をクリックしてもチェックボックスにチェックが入ります。便利!

                       

                      4-10-2. フォーム生成画面・項目解説

                      CF7_item_11_ラジオボタン項目

                      名前 判別するための名前です。check-box等
                      オプション りんご(改行)みかん(改行)いちご のように入力してください。チェックボックスについては上のサンプルをご確認ください。
                      ID属性 必要に応じて、idを指定できます。
                      クラス属性 必要に応じて、classを指定できます。

                       

                      4-11. 「承諾確認」入力フォーム

                      プライバシーポリシーへの同意などに使う承諾確認のチェックボックスを表示します。

                      4-11-1. フォームテンプレート

                      サンプル

                         

                        4-11-2. フォーム生成画面・項目解説

                        CF7_item_12_承諾確認項目

                        名前 判別するための名前です。acceptance等
                        同意条件 問い合わせフォームであれば、「プライバシーポリシーに同意します」などとします。
                        オプション チェックを入れると任意選択になります。外すとチェックが必須になります。同意条件によって変えてください。
                        ID属性 必要に応じて、idを指定できます。
                        クラス属性 必要に応じて、classを指定できます。

                         

                        4-12. 「クイズ」フォーム

                        クイズに正解することで送信ができるようになります。スパム対策に使うフォームです。

                        4-12-1. フォームテンプレート

                        サンプル

                          正しい答えを入力し、送信ボタンをクリックしてください。

                          ※問題は、読み込むたびにランダムで表示されます。

                           

                          4-12-2. フォーム生成画面・項目解説

                          CF7_item_13_クイズ項目

                          名前 判別するための名前です。capital-quiz等
                          クイズと回答 一行に一対の、パイプで区切られたクイズと答えを入力します。
                          例:フランスの首都は?|パリ
                          ID属性 必要に応じて、idを指定できます。
                          クラス属性 必要に応じて、classを指定できます。

                           

                          4-13. 「ファイル」入力フォーム

                          メールアドレスは単一行(1行)の入力フォームです。改行はできません。

                          4-13-1. フォームテンプレート

                          サンプル

                            ファイルを添付してください。(必須)

                             

                            4-13-2. フォーム生成画面・項目解説

                            CF7_item_14_ファイル項目

                            項目タイプ チェックを入れると必須項目になります。
                            名前 判別するための名前です。your-file等
                            ファイルサイズの上限 添付できるファイルサイズの上限値を設定できます。単位なしの数字が入力された場合バイト(byte)で、キロバイト、メガバイトの単位を付けることもできます。1024kb、1mbなど。指定しない場合は1mbです。
                            受け入れ可能なファイル形式 ファイル形式はjpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav、wmvから選択し、パイプ(「 | 」←これです。キーボードの右上、¥マーク付近にありませんか?)で区切って指定します。指定しない場合は全て受け入ます。
                            ID属性 必要に応じて、idを指定できます。
                            クラス属性 必要に応じて、classを指定できます。

                             

                            5. まとめ

                            Contact Form 7の良いところはたくさんありますが、インターネット上にたくさんのカスタマイズ事例など「情報」があるのが大きいですね!僕もいろいろ勉強させてもらいました。

                            調べる中で、基本フォームとその設定について書かれている記事が少なく分かりにくかったたため、今回記事にまとめてみました。みなさんのお役に立てば嬉しいです。

                            \参考になったらポチッとお願いします!/

                            -WordPressプラグイン
                            -, ,

                            © 2020 インターネットビジネスラボ