こんな方に読んでほしい！
- Contact Form 7 で使えるフォームの設定を知りたい！
- Contact Form 7 で使えるフォームのサンプルを見たい！
- 面倒なのでコピペしたい！
前回の記事で「Contact Form 7」のインストール、デフォルトの問い合わせフォームの確認をしました。
今回の記事では、「Contact Form 7」の基本フォームとその設定を、フォームごとにサンプルを準備して徹底解説します！
1. 「 Contact Form 7（コンタクトフォーム7） 」とは？
wordpressのプラグイン「 Contact Form 7 」は、500万回以上もダウンロードされ、問い合わせフォームを作成するプラグインの決定版と言っても過言ではない問い合わせフォーム作成プラグインです。
インターネットビジネスラボの問い合わせフォームも「 Contact Form 7 」で作成しています。
では、フォームと設定、サンプルを見ていきましょう！
2. 「 Contact Form 7 （コンタクトフォーム7）」で作成できるフォーム
Contact Form 7 では、以下のフォームを作成することができます。
- テキスト入力フォーム
- メールアドレス入力フォーム
- URL入力フォーム
- 電話番号入力フォーム
- 数値入力フォーム
- 日付入力フォーム
- テキストエリア入力フォーム
- ドロップダウンメニュー
- チェックボックス
- ラジオボタン
- 承諾確認
- クイズ
- ファイル
さらに詳しく！
この記事では割愛しますが、様々なプラグインでフォームを追加することもできます。
3. 「 Contact Form 7 （コンタクトフォーム7）」のフォームタグ
この後で解説するフォームテンプレートでは、フォームタグを使います。このフォームタグは、タイプ、名前、オプション、値の4つの要素に分けることができます。
例えば「テキスト入力フォーム」で「名前」を入力するフォームを作る場合、
このようなフォームタグを指定することになります。このフォームタグは、生成画面で選択もしくは文字を入力することで作成できるので、暗記する必要はありません。
4つの要素からできていることを覚えておいて下さい。
4. 「 Contact Form 7 （コンタクトフォーム7）」で作成できるフォームサンプルと設定
簡単なサンプルですが、もし必要ならどんどんコピーして使ってください。ただし、最後に自分のWebサイトできちんと動作するか、テストは行って下さいね。
ここがポイント！
試しにいろいろ入力してみてください。「送信されました」と表示される場合もありますが、実際には送信されませんのでご安心ください。
4-1. 「テキスト」入力フォーム
テキストは単一行（１行）の入力フォームです。改行ができません。改行したい場合は「テキストエリア」入力フォームを使いましょう。
4-1-1. フォームテンプレート
|
1 2 |
お名前を入力してください。（必須） [text* your-name akismet:author placeholder"例：佐藤一郎"] |
サンプル
4-1-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。your-name等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：佐藤一郎」等です。 |
| Akismet | 「送信者の名前の入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。（つまりスパムと判断された場合ははじかれます。） |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-2. 「メールアドレス」入力フォーム
メールアドレスは単一行（１行）の入力フォームです。改行はできません。
4-2-1. フォームテンプレート
|
1 2 |
メールアドレスを入力してください。（必須） [email* your-email akismet:author_email placeholder"exsample@hoge.com"] |
サンプル
4-2-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。your-mail等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：exsample@hoge.com」等です。 |
| Akismet | 「送信者のメールアドレスの入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。（つまりスパムと判断された場合ははじかれます。） |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-3. 「URL」入力フォーム
4-3-1. フォームテンプレート
|
1 2 |
URLを入力してください。（必須） [url* your-url akismet:author_url placeholder"https://hoge.com"] |
サンプル
4-3-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。your-url等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：https://hoge.com」等です。 |
| Akismet | 「送信者のURLの入力を要求する項目」にチェックを入れると、Akismet のスパムフィルタリングの対象となります。（つまりスパムと判断された場合ははじかれます。） |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-4. 「電話番号」入力フォーム
4-4-1. フォームテンプレート
|
1 2 |
電話番号を入力してください。（必須） [tel* your-tel placeholder"080-1234-5678"] |
サンプル
4-4-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。your-tel等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：080-0000-0000」等。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-5. 「数値」入力フォーム
4-5-1. フォームテンプレート
|
1 2 |
数値を入力してください。（必須） [number* number min:1 max:10 placeholder"5"] |
サンプル
※スピンボックスのサンプルです。フォームの右端に上下の矢印が表示されます。
4-5-2. フォーム生成画面・項目解説
| 項目タイプ | 「スピンボックス」「スライダー」から選択します。チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。number等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「5」等など。 |
| 範囲 | 下限と上限をそれぞれ設定できます。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
さらに詳しく！
スピンボックスとは、入力欄の右側のアップダウンボタンで数値を増減させて指定する入力フォームです。
スライダーとは、スライダーを左右に動かして数値を指定する入力フォームです。（スライダーは数値を表示するのにひと手間かかるので、オススメしません。）
4-6. 「日付」入力フォーム
4-6-1. フォームテンプレート
|
1 2 |
日付を入力してください。（必須） [date* your-date min:2019-01-01 max:2019-12-31 class:required "2013-04-01"] |
サンプル
4-6-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。date等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「例：2019-10-10」等です。 |
| 範囲 | それぞれ年月日を設定でき、入力範囲を指定できます。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
ここに注意！
デフォルト値の年月日はハイフン「-」でつないでください。スラッシュ「/」でつなぐと表示されません。
4-7. 「テキストエリア」入力フォーム
テキストエリアは複数行の入力フォームです。改行も可能です。
4-7-1. フォームテンプレート
|
1 2 |
お問い合わせ内容を入力してください。（必須） [textarea* your-message placeholder"こちらにお問い合わせ内容をご入力ください。"] |
サンプル
4-7-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。your-message等 |
| デフォルト値 | 入力欄にもともと入っている文字を指定します。「プレースホルダーとして使用する」にチェックを入れると、ヒントを示す文字として表示します。例えば「お問い合わせ内容をご入力ください」等など。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-8. 「ドロップダウン」フォーム
ドロップダウンは準備された選択肢から１つもしくは複数を選択できるフォームです。必須項目にできます。
4-8-1. フォームテンプレート
|
1 2 3 |
最も好きな果物は？ ドロップダウンの選択肢から回答を１つ選択して下さい。（必須） [select* favorite-fruit include_blank "りんご" "みかん" "いちご" "バナナ"] |
サンプル
4-8-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。your-menue等 |
| オプション | りんご（改行）みかん（改行）いちご のように入力してください。チェックボックスのチェックで、複数選択可能にすること、先頭に空の項目（空欄）を挿入することができます。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-9. 「チェックボックス」入力フォーム
チェックボックスは、準備された選択肢から複数（もしくは１つ）を選択するフォームです。必須項目にできます。
4-9-1. フォームテンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
一番好きな果物は？ 回答を１つ選択して下さい。（必須） １、オプションのチェックなし [checkbox* checkbox label_first use_label_element exclusive "りんご" "みかん" "いちご" "バナナ"] ２、「ラベル絵を前に、チェックボックスを後に配置する」にチェック [checkbox* checkbox label_first "りんご" "みかん" "いちご" "バナナ"] ３、個々の項目をlabel要素で囲む」にチェックすると選択肢の言葉をクリックしてもチェックボックスにチェックが入ります。便利！ [checkbox* checkbox use_label_element "りんご" "みかん" "いちご" "バナナ"] ４、「チェックボックスを排他化する」にチェックを入れると、１つだけしか選択できないようになります。りんごを選択後みかんをクリックすると、りんごのチェックが外れます。 [checkbox* checkbox exclusive "りんご" "みかん" "いちご" "バナナ"] |
サンプル
4-9-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。check-box等 |
| オプション | りんご（改行）みかん（改行）いちご のように入力してください。チェックボックスについては上のサンプルをご確認ください。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-10. 「ラジオボタン」フォーム
ラジオボタンは、準備された選択肢から１つを選択するフォームです。必須項目にはできません。
4-10-1. フォームテンプレート
|
1 2 3 4 5 6 7 8 9 10 11 |
一番好きな果物は？ 回答を選択して下さい。（必須） １、オプションのチェックなし [radio radio-256 default:1 "りんご" "みかん" "いちご" "バナナ"] ２、「ラベルを前に、チェックボックスを後に配置する」にチェック [radio radio-256 label_first default:1 "りんご" "みかん" "いちご" "バナナ"] ３、「個々の項目をlabel要素で囲む」にチェックすると選択肢の言葉をクリックしてもチェックボックスにチェックが入ります。便利！ [radio radio-256 use_label_element default:1 "りんご" "みかん" "いちご" "バナナ"] |
サンプル
4-10-2. フォーム生成画面・項目解説
| 名前 | 判別するための名前です。check-box等 |
| オプション | りんご（改行）みかん（改行）いちご のように入力してください。チェックボックスについては上のサンプルをご確認ください。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-11. 「承諾確認」入力フォーム
プライバシーポリシーへの同意などに使う承諾確認のチェックボックスを表示します。
4-11-1. フォームテンプレート
|
1 |
[acceptance optional] プライバシーポリシーに同意して申し込む場合は、チェックしてください。 [/acceptance] |
サンプル
4-11-2. フォーム生成画面・項目解説
| 名前 | 判別するための名前です。acceptance等 |
| 同意条件 | 問い合わせフォームであれば、「プライバシーポリシーに同意します」などとします。 |
| オプション | チェックを入れると任意選択になります。外すとチェックが必須になります。同意条件によって変えてください。 |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-12. 「クイズ」フォーム
クイズに正解することで送信ができるようになります。スパム対策に使うフォームです。
4-12-1. フォームテンプレート
|
1 2 |
正しい答えを入力し、送信ボタンをクリックしてください。 [quiz capital-quiz "フランスの首都は？|パリ" "日本の首都は？|東京"] |
サンプル
※問題は、読み込むたびにランダムで表示されます。
4-12-2. フォーム生成画面・項目解説
| 名前 | 判別するための名前です。capital-quiz等 |
| クイズと回答 | 一行に一対の、パイプで区切られたクイズと答えを入力します。 例：フランスの首都は？|パリ |
| ID属性 | 必要に応じて、idを指定できます。 |
| クラス属性 | 必要に応じて、classを指定できます。 |
4-13. 「ファイル」入力フォーム
メールアドレスは単一行（１行）の入力フォームです。改行はできません。
4-13-1. フォームテンプレート
|
1 2 |
ファイルを添付してください。（必須） [file* your-file limit:10mb] |
サンプル
4-13-2. フォーム生成画面・項目解説
| 項目タイプ | チェックを入れると必須項目になります。 |
| 名前 | 判別するための名前です。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の良いところはたくさんありますが、インターネット上にたくさんのカスタマイズ事例など「情報」があるのが大きいですね！僕もいろいろ勉強させてもらいました。
調べる中で、基本フォームとその設定について書かれている記事が少なく分かりにくかったたため、今回記事にまとめてみました。
みなさんのお役に立てば嬉しいです。
