【Contact Form 7】お問い合わせフォームの設置方法を簡単解説

WordPress
まるこ
まるこ

Webサイト上で、商品やサービス内容などの問い合わせ窓口として欠かせないのが「お問い合わせフォーム」です。

WordPressを導入したWebサイトにお問い合わせフォームを設置するときは、「Contact Form 7」というプラグインの利用が便利です。専門知識がなくても、簡単にお問い合わせフォームの設置ができます。

本記事では、「Contact Form 7」の特徴や基本設定について、簡単に解説します。

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つです。

  1. プラグインのインストール~有効化
  2. フォームの作成(新規追加)
  3. メールの設定(お知らせメール/自動返信メール)
  4. メッセージの設定
  5. フォームの反映(公開ページへの設置)

①プラグインのインストール~有効化

まずは、プラグインをインストールしましょう。

WordPressの管理画面(ダッシュボード)から、[プラグイン]→[新規追加]と進み、表示されたページの検索窓に「Contact Form 7」と入力します。
検索結果に「Contact Form 7」が表示されたら、[今すぐインストール]をクリックします。

Contact Form 7プラグインのインストール画面

インストールが完了したら、[有効化]をクリックします。プラグインが有効になると、管理画面に[お問い合わせ]項目が追加されます。フォームの設定はこの[お問い合わせ]内で行います。

Contact Form 7有効化済み画面

これでContact Form 7を使用する準備は整いました。

②フォームの作成(新規追加)

次はフォームの作成です。[お問い合わせ]→[新規追加]と進むと、お問い合わせフォームの基本設定画面が表示されます。

タイトル欄には、作成するフォームの名前をつけます。フォーム管理に必要なため、わかりやすい名前をつけるといいでしょう。

タイトル欄の下にある「フォーム」タブ内で、お問い合わせフォームに設定したい項目が編集できます。一般的なWebサイトに設定される項目(お名前やメールアドレスなど)は既に用意されていますので、必要に応じて追加・削除を行います。

※項目ごとの詳しい設定方法については、次章【フォームに設定できる各種項目について】でご紹介します。

フォーム追加画面

編集が完了したら下部にある[保存]をクリックし、作成したフォームを保存します。
作成したフォームは、[お問い合わせ]→[コンタクトフォーム]に一覧表示されます。

③メールの設定(お知らせメール/自動返信メール)

編集画面の「メール」タブ内では、フォームから問い合わせがあった際に送るメールの設定ができます。
2つの送信先が登録でき、以下のように使い分けるケースが主です。

  • サイト管理者にお問い合わせがあった旨を知らせる「お知らせメール」
  • お問い合わせ送信者にフォーム内容を受け付けた旨を知らせる「自動返信メール」

設定項目

送信先メールを受信するアドレス
送信元メール送信者の名前(サイト名/お問い合わせ送信者名など)
題名メールの件名
追加ヘッダー追加したいメールアドレス(CCなど)
メッセージ本文メール本文(問い合わせ内容など)

自動返信メールの設定

お問い合わせを送信した方宛に、「自動返信メール」の設定ができます。自動返信メールには、メッセージを受け付けた旨や、お問い合わせ内容への返答期限などを記載しておくと親切です。

設定は、メールタブの下部にある[メール(2)を使用する]にチェックを入れて行います。

自動返信メールの設定例
自動返信メールの設定例

④メッセージの設定

「メッセージ」タブ内では、フォームの送信が完了したときや、入力内容に誤りがあったときなどに表示されるメッセージを設定できます。

メッセージ設定の例
メッセージ設定の例

⑤フォームの反映(公開ページへの設置)

必要な設定が完了したら、内容を保存します。保存するとタイトル欄の下に作成したフォーム専用のショートコードが表示されますので、公開したい固定ページなどにコードを貼り付けます。

作成したフォームのショートコード表示例
作成したフォームのショートコード
フォーム反映後の公開ページの表示例
フォームを設置したお問い合わせページ

ページにフォームが反映されたら、フォーム入力や送受信メールの動作に問題がないか、誤字脱字がないかなど、必ずテストをしましょう。

問題がなければ、フォームの設置は完了です。

フォームに設定できる各種項目について

ここでは、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でお問い合わせフォームを設置してみてはいかがでしょうか。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。