【Contact Form 7】お問い合わせフォームの設置方法を簡単解説
Webサイト上で、商品やサービス内容などの問い合わせ窓口として欠かせないのが「お問い合わせフォーム」です。
WordPressを導入したWebサイトにお問い合わせフォームを設置するときは、「Contact Form 7」というプラグインの利用が便利です。専門知識がなくても、簡単にお問い合わせフォームの設置ができます。
本記事では、「Contact Form 7」の特徴や基本設定について、簡単に解説します。
目次
Contact Form 7とは
Contact Form 7は、WordPressのプラグイン（拡張機能）です。Webサイト内にお問い合わせフォームを設置する際に使用します。
お問い合わせフォームは、HTML・CSS・PHPを用いて作成することもできますが、専門知識を持っていないとプラグインを使用せずに設置するのは困難です。
Contact Form 7は、難しい操作を必要とせず、世界中で利用されているため、安心して利用できます。また、日本人の開発者が作成したプラグインなので、日本語の情報も充実しています。
Contact Form 7の特徴
- フォームに設置したい項目をボタン操作で挿入できる（テキストやラジオボタンなど）
- 自動返信メールの設定ができる
- 作成したフォームのショートコードを公開したいページに貼り付けるだけで設置できる
- 送信内容確認画面・送信完了画面はデフォルトで設定できない※
- 日本人開発者が作成したプラグインなので、日本語での情報が充実している
※Contact Form 7には、送信内容の確認画面および送信完了画面を設定する機能はありません。（送信が完了すると、フォーム下部にメッセージが表示されます。）
確認画面や完了画面を設置したい場合は、別のプラグインやコードの書き換えが必要になります。本記事では、確認画面および完了画面の作成方法については触れませんので、ご了承ください。
Contact Form 7を使用したお問い合わせフォームの設置方法
それでは、Contact Form 7を使ったお問い合わせフォームの設置方法について、見ていきましょう。手順は大きく分けて以下の5つです。
- プラグインのインストール～有効化
- フォームの作成（新規追加）
- メールの設定（お知らせメール／自動返信メール）
- メッセージの設定
- フォームの反映（公開ページへの設置）
①プラグインのインストール～有効化
まずは、プラグインをインストールしましょう。
WordPressの管理画面（ダッシュボード）から、［プラグイン］→［新規追加］と進み、表示されたページの検索窓に「Contact Form 7」と入力します。
検索結果に「Contact Form 7」が表示されたら、［今すぐインストール］をクリックします。
インストールが完了したら、［有効化］をクリックします。プラグインが有効になると、管理画面に［お問い合わせ］項目が追加されます。フォームの設定はこの［お問い合わせ］内で行います。
これでContact Form 7を使用する準備は整いました。
②フォームの作成（新規追加）
次はフォームの作成です。［お問い合わせ］→［新規追加］と進むと、お問い合わせフォームの基本設定画面が表示されます。
タイトル欄には、作成するフォームの名前をつけます。フォーム管理に必要なため、わかりやすい名前をつけるといいでしょう。
タイトル欄の下にある「フォーム」タブ内で、お問い合わせフォームに設定したい項目が編集できます。一般的なWebサイトに設定される項目（お名前やメールアドレスなど）は既に用意されていますので、必要に応じて追加・削除を行います。
※項目ごとの詳しい設定方法については、次章【フォームに設定できる各種項目について】でご紹介します。
編集が完了したら下部にある［保存］をクリックし、作成したフォームを保存します。
作成したフォームは、［お問い合わせ］→［コンタクトフォーム］に一覧表示されます。
③メールの設定（お知らせメール／自動返信メール）
編集画面の「メール」タブ内では、フォームから問い合わせがあった際に送るメールの設定ができます。
2つの送信先が登録でき、以下のように使い分けるケースが主です。
- サイト管理者にお問い合わせがあった旨を知らせる「お知らせメール」
- お問い合わせ送信者にフォーム内容を受け付けた旨を知らせる「自動返信メール」
設定項目
| 送信先 | メールを受信するアドレス |
|---|---|
| 送信元 | メール送信者の名前（サイト名／お問い合わせ送信者名など） |
| 題名 | メールの件名 |
| 追加ヘッダー | 追加したいメールアドレス（CCなど） |
| メッセージ本文 | メール本文（問い合わせ内容など） |
自動返信メールの設定
お問い合わせを送信した方宛に、「自動返信メール」の設定ができます。自動返信メールには、メッセージを受け付けた旨や、お問い合わせ内容への返答期限などを記載しておくと親切です。
設定は、メールタブの下部にある［メール（2）を使用する］にチェックを入れて行います。
④メッセージの設定
「メッセージ」タブ内では、フォームの送信が完了したときや、入力内容に誤りがあったときなどに表示されるメッセージを設定できます。
⑤フォームの反映（公開ページへの設置）
必要な設定が完了したら、内容を保存します。保存するとタイトル欄の下に作成したフォーム専用のショートコードが表示されますので、公開したい固定ページなどにコードを貼り付けます。
ページにフォームが反映されたら、フォーム入力や送受信メールの動作に問題がないか、誤字脱字がないかなど、必ずテストをしましょう。
問題がなければ、フォームの設置は完了です。
【WordPress】固定ページの使い方・作り方まとめ【ブロックエディタ版】
フォームに設定できる各種項目について
ここでは、Contact Form 7のフォームに設定できる項目についてご紹介します。
各項目をクリックすると、「フォームタグ生成」画面が表示されます。フォームタグ生成画面内では、項目ごとに設定できるオプション（必須項目やデフォルト値など）が設けられています。
オプション一覧
| 項目タイプ | 必須項目の設定。必ず入力が必要な項目の場合にチェックを入れる。必須項目に設定された項目は、入力欄が空欄のまま送信はできない。 数値フォームには、［スピンボックス］［スライダー］の選択肢がある。 |
|---|---|
| 名前 | 設定項目専用の名前。他の設定項目と重複しない名前をつける。 |
| デフォルト値 | フォーム上に表示される入力例の設定。「このテキストを項目のプレースホルダーとして使用する」にチェックを入れると、サンプル表示になる。 ※「このテキストを～」にチェックを入れないと、デフォルト値が入力された状態で表示され、ユーザーはデフォルト値を削除してから入力を行うことになる。 |
| Akismet | スパムメール対策用プラグインAkismetを使用する際にチェックを入れる。 |
| ID属性 | HTMLのid属性の設定。複数設定不可。 |
| クラス属性 | HTMLのclass属性の設定。複数設定可能。 |
| 範囲 | ［下限］［上限］値の入力範囲設定。数値、日付フォームで設定する。 |
| オプション－選択肢設定－ | 選択肢の設定。ユーザーに複数の選択肢の中から該当項目を選んで回答をしてもらう項目に設置する。ドロップダウンメニュー／チェックボックス／ラジオボタンフォームで設定する。 |
| オプション－承諾確認－ | 承諾確認フォームのチェックボックスを、任意選択にするか否かを設定。同意が必須の場合はチェックを外す。 |
| 同意条件 | ユーザーに規約等への同意を求める内容の設定。承諾確認フォームで設定する。 |
| クイズと回答 | クイズの出題と回答の設定。正しい回答を入力しないとフォームの送信はできない。（スパム対策）クイズフォームで設定する。 |
| ファイルサイズの上限(バイト) | 添付できるファイルサイズの上限値の設定。設定しない場合は、1MB（1048576バイト）が上限。 |
| 受け入れ可能なファイル形式 | 添付できるファイル形式の設定。 |
| ラベル | 送信ボタンに表示する文言の設定。設定しない場合は、「送信」と表示される。 |
テキスト／メールアドレス／URL／電話番号
1行の短いテキスト入力を行う項目に使用します。［テキスト］は、主に「名前」「住所」などの入力欄に使用されます。
［メールアドレス］［URL］［電話番号］で設定できる内容は［テキスト］と同じです。しかし、フォーム入力画面で誤った入力（メールアドレス欄にかな入力があるなど）がされると、エラーになります。
テキストエリア
1数行のテキスト入力を行う項目に使用します。主に「お問い合わせ内容の詳細」の入力欄に使用されます。
数値
数値を入力する項目に使用します。
項目タイプにある［スピンボックス］［スライダー］のどちらかを選択して設置します。範囲には、入力できる数値の「下限－上限」を設定できます。
- スピンボックス：矢印ボタンで数値を増減させて入力する。
- スライダー：スライドバーを左右に動かして入力する。※メール本文に入力した数値は表示されるが、入力時には確認できない。厳密な値を必要とする場合は、スピンボックスを使用する。
日付
「生年月日」などの日付の入力に使用します。数値同様、入力範囲の設定が可能です。
入力欄では、直接日付を打ち込むか、カレンダーアイコンから該当日を選択して入力します。
ドロップダウンメニュー／チェックボタン／ラジオボタン
ユーザーに、複数選択肢の中から該当するものを選んで回答をしてもらいたい項目に使用します。選択肢はオプション内で設定できます。（一行に1つの選択肢を設定）
- ドロップダウンメニュー：選択肢の中から該当する項目を1つ選んで回答する方式。（選択肢が多い場合に使用することが多い。）
- チェックボックス：選択肢の中から該当する項目をいくつでも選んで（複数選択）回答する方式。
- ラジオボタン：選択肢の中から該当する項目を1つ選んで回答する方式。（選択肢が少ない場合に使用することが多い。）
承諾確認
フォーム送信前に、ユーザーに利用規約などへの同意を求めるときに使用します。
同意条件には、具体的に同意を求めたい内容を設定します。
また、同意が必須の場合は、オプションの「チェックボックスを任意選択にする」のチェックを外します。同意を必須に設定した場合、チェックボックスにチェックをつけないと、送信ボタンがクリックできません。
クイズ
正しい回答を入力しないとフォームを送信できないようにしたい場合に使用します。クイズと回答欄に、「クイズ|回答」の形式で入力して設定します。クイズを複数設定すると、ランダムに出題されます。
ファイル
「履歴書」などのファイル添付が必要な場合に使用します。添付できるファイルサイズの上限や、ファイル形式を設定できます。ファイル形式は「jpg|jpeg|png」のように「|」で区切って設定できます。
送信ボタン
フォームを送信するためのボタンの設定です。ラベル欄では、ボタン上に表示される文言の設定ができます。
まとめ
今回はWordPressプラグインの「Contact Form 7」について解説しました。Contact Form 7は、専門知識不要で利用ができ、設定可能な項目も充実しているので、お問い合わせフォームを簡単に設置できます。
確認画面・完了画面の設定が不要な場合は、Contact Form 7でお問い合わせフォームを設置してみてはいかがでしょうか。
