誰もが当たり前にSNSを利用するようになった2024年現在、顧客や訪問者とのコミュニケーションは非常に重要です。たとえば、MailChimpのようなサービスを使ってメーリングリストを作成すれば、購読者に直接コンテンツを配信することができます。

メーリングリストは画期的なコミュニケーション手段ですが、質問や要望のあるユーザーのためにお問い合わせフォームを設置することも大切です。そこで今回は、人気お問い合わせフォームプラグイン「Contact Form 7」をWordPressサイトで使用する方法をご紹介します。

Contact Form 7のインストール

Contact Form 7は2009年にリリースされ、10年間で500万回以上ダウンロードされています。WordPressのプラグインリポジトリから入手でき、WordPress管理画面の「プラグイン」>「新規追加」で検索することができます。

WordPressのプラグインリポジトリからContact Form 7プラグインをインストール
WordPressのプラグインリポジトリからContact Form 7プラグインをインストール

プラグインをインストールすると、左サイドバーに「お問い合わせ」というメニューが出現します。このメニューでContact Form 7の設定を行います。

Contact Form 7の設定を調整
Contact Form 7の設定を調整

お問い合わせフォームを設置する利点と欠点

Contact Form 7を設定する前に、お問い合わせフォームを設置することの利点と欠点を簡単にご紹介します。

メリット

  1. 訪問者や顧客、フォロワーが直接連絡を取ることができる。WordPressサイトの目的にもよるが、訪問者がサイト所有者とコミュニケーションが取れることは非常に重要。ECサイトでは、お問い合わせフォームがないと収益に悪影響を与える可能性も。
  2. WordPressサイトやビジネスの正当性獲得につながる。ユーザーにとってお問い合わせフォームは信頼要素の1つであり、いつでも連絡を取れるという状態がコンテンツの信頼性を高める。

デメリット

  1. コメント欄やお問い合わせフォームを公開することで、スパムのような迷惑行為の標的になる可能性がある。Contact Form 7を使用すれば、reCAPTCHAを使ってスパムをフィルタリングすることができる。また、Cloudflareのページルールを設定して保護を強化することも(スパム対策の設定方法については記事の後半で)。
  2. お問い合わせ内容への返信に時間を割く必要がある。これが欠点となるかどうかはビジネスによるが、お問い合わせフォームを設置することで構築できる顧客や訪問者との信頼関係を考えれば価値があるとも言える。

Contact Form 7の設定

Contact Form 7でお問い合わせフォームを設置するのは非常に簡単です。まずは、先ほどの左サイドバーの「お問い合わせ」をクリックし、「コンタクトフォーム」を開きます。このページですべてのお問い合わせフォームとメタデータの詳細を確認できます。

Contact Form 7の「コンタクトフォーム」ページ
Contact Form 7の「コンタクトフォーム」ページ

Contact Form 7を初めてインストールする場合、サンプルフォームが生成されます。まずは、このサンプルフォームを参考に、Contact Form 7がどのように動作するかを理解しましょう。「コンタクトフォーム 1」を開きます。

お問い合わせフォームを設定
お問い合わせフォームを設定

お問い合わせフォームの編集は、以下4つのタブで行うことができます。

  1. フォーム:「テキスト」「メールアドレス」「チェックスボックス」などのフィールドを使用して、HTMLのお問い合わせフォームテンプレートを編集。自分でHTMLを書くこともできる。
  2. メール:通知メールに使用されるメールテンプレートと設定を編集
  3. メッセージ:特定のアクションの後に表示されるメッセージを編集(メッセージの送信後にユーザーに表示するメッセージなど)
  4. その他の設定:購読者限定モード、デモモード、メールスキップなどの高度な機能の設定

以下、各セクションを掘り下げながら、お問い合わせフォームを作成していきましょう。

お問い合わせフォームの作成方法

まずは、「コンタクトフォーム」ページの上部にある「新規追加」ボタンをクリックします。

Contact Form 7でお問い合わせフォームを新規作成
Contact Form 7でお問い合わせフォームを新規作成

お問い合わせフォームに名前を付けて、「保存」をクリックします。

お問い合わせフォームを保存
お問い合わせフォームを保存

「フォーム」タブでお問い合わせフォームに必要なHTMLを追加します。以下のような様々なフォームタグを使用すると、ショートコードでフィールドを作成することができます。

  • テキスト(姓や名など一行で完結する情報)
  • メールアドレス
  • URL
  • 電話番号
  • 数値(「テキスト」や「テキストエリア」とは異なり数字のみ)
  • 日付
  • テキストエリア(メッセージ本文や備考欄など複数行の入力が想定される情報)
  • ドロップダウンメニュー
  • チェックボックス
  • ラジオボタン
  • 承諾確認(利用規約やプライバシーポリシーの同意など)
  • クイズ(質問と回答のセット)
  • reCAPTCHA
  • ファイル(ファイルアップロード用フィールド)
  • 送信ボタン

これらのフォームタグを使用して、お問い合わせフォームを作成してみます。

テキストフォームタグ

「テキスト」フォームタグをクリックすると、以下のようなポップアップが表示されます。一番下にはショートコードが表示され、設定後にお問い合わせフォームのテンプレートに埋め込むことができます。

「テキスト」フォームタグ
「テキスト」フォームタグ

「テキスト」フォームタグでは、以下の設定を行うことができます。

  • 項目タイプ:必須項目にチェックをいれる(入力しないとフォームを送信できない項目に設定)
  • 名前:text-711(自動生成)
  • デフォルト値:「山田太郎」や「お名前」のような入力を促すサンプルテキスト(「このテキストを項目のプレースホルダーとして使用する」にチェックをいれる)
  • Akismet:チェックなし
  • ID属性(CSS):cf7-your-name
  • クラス属性(CSS):cf7-your-name

上記の設定で、以下のようなショートコードが生成されます。

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "(サンプルテキスト)"]

タグを挿入」をクリックしてフォームタグをテンプレートに追加してみます。フォームを構成するHTMLタグは後ほど追加します。

メールアドレスフォームタグ

づづいて、メールアドレスフィールドを作成します。

「メールアドレス」フォームタグ
「メールアドレス」フォームタグ

メールフォームタグでは、以下のように設定します。

  • 項目タイプ:必須項目
  • 名前:email-632(自動生成)
  • デフォルト値:入力を促すサンプルテキスト(架空のメールアドレスなど)
  • Akismet:チェックなし
  • ID属性(CSS):your-email
  • クラス属性(CSS):your-email

上記の設定で、以下のようなショートコードが生成されます。

[email* email-632 id:email class:email placeholder "(サンプルテキスト)"]

URLフォームタグ

サイトによっては、ユーザーからURLを収集したい場合があるかもしれません。これには「テキスト」フォームタグを使用することもできますが、「URL」フォームタグを使用すると、URLの形式が適切であるかを検証することができます。

「URL」フォームタグ
「URL」フォームタグ

「URL」フォームタグは以下のように設定します。

  • 名前:url-601(自動生成)
  • デフォルト値:入力を促すサンプルテキスト(架空のURLなど)
  • Akismet:チェックなし
  • ID属性(CSS):cf7-your-website
  • クラス属性(CSS):cf7-your-website

すると、以下のようなショートコードが生成されます。

[url url-601 id:cf7-your-website class:cf7-your-website "(サンプルテキスト)"]

電話番号フォームタグ

URL同様、電話番号を収集する場合は、電話番号が有効であることを検証するために、「電話番号」フォームタグを使用するのが得策です。

「電話番号」フォームタグ
「電話番号」フォームタグ

「電話番号」フォームタグでは、以下のように設定します。

  • 名前:tel-842(自動生成)
  • デフォルト値:入力を促すサンプルテキスト(架空の電話番号など)
  • ID属性(CSS):cf7-your-phone-number
  • クラス属性(CSS):cf7-your-phone-number

これらの設定は以下のショートコードを生成します。

[url url-601 id:cf7-your-website class:cf7-your-website "(サンプルテキスト)"]

日付フォームタグ

「日付」フォームタグを使用すると、カレンダー形式の日付ピッカーを生成することができます。カウンセリングや美容室など、サイトで予約を受け付けている場合などに便利です。

「日付」フォームタグ
「日付」フォームタグ

「日付」フォームタグは以下のように設定します。

  • 名前:date-389(自動生成)
  • デフォルト値:入力を促すサンプルテキスト(架空の予約日など)
  • 範囲:表示する日付の範囲を設定
  • ID属性(CSS):cf7-appointment-date
  • クラス属性(CSS):cf7-appointment-date

これらの設定は以下のショートコードを生成します。

[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "(サンプルテキスト)"]

テキストエリアフォームタグ

「テキストエリア」フォームタグを使用すると、メッセージ本文や備考欄など、複数行の入力が想定されるテキストボックスを作成できます。

「テキストエリア」フォームタグ
「テキストエリア」フォームタグ

「テキストエリア」フォームタグは、以下のように設定します。

  • 名前:textarea-795(自動生成)
  • デフォルト値:入力を促すサンプルテキスト(「ここに本文を入力してください」など)
  • ID属性(CSS):cf7-your-message
  • クラス属性(CSS):cf7-your-message

この設定で以下のようなショートコードが生成されます。

[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "(サンプルテキスト)"]

ドロップダウンメニューフォームタグ

「ドロップダウンメニュー」フォームタグは、その名の通り、複数の選択肢を含むドロップダウンメニューを作成することができます。特定の選択肢を提供して、ユーザーに選択してもらいたい場合に有用です。たとえばWordPressの代行業を経営している場合、訪問者に提供するサービスの中から希望のものを選んでもらうことができます。

「ドロップダウンメニュー」フォームタグ
「ドロップダウンメニュー」フォームタグ

「ドロップダウンメニュー」フォームタグは以下のように設定します。

  • 名前:menu-24(自動生成)
  • オプション:選択項目(一行に1つの項目を入力)
  • 複数選択を許可する:チェックをいれる
  • 空の項目を先頭に挿入する:チェックをいれる
  • ID属性:cf7-drop-down-menu
  • クラス属性:cf7-drop-down-menu

上の設定により、以下のショートコードが生成されます。

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "(選択肢1)" "(選択肢2)" "(選択肢3)"]

チェックボックスフォームタグ

「チェックボックス」フォームタグを使用すると、HTMLのチェックボックスを作成できます。ドロップダウンメニュー同様、複数の選択肢を追加でき、お問い合わせフォームの性質によっては、ドロップダウンよりもチェックボックスの方が適切かもしれません。例えば、選択できる選択肢の数が少ない場合、チェックボックスを使用することで、必要なクリック数を減らすことができます。逆に多くの選択肢を表示する場合は、ドロップダウンメニューを挿入する方がフォームの見た目がすっきりします。

「チェックボックス」フォームタグ
「チェックボックス」フォームタグ

「チェックボックス」フォームタグは、以下のように設定します。

  • 名前:checkbox-948(自動生成)
  • オプション:選択項目(一行に1つの項目を入力)
  • ラベルを前に、チェックボックスを後に配置する:チェックなし
  • ここの項目を label 要素で囲む:チェックをいれる
  • チェックボックスを排他化する:チェックなし
  • ID属性:cf7-checkbox
  • クラス属性:cf7-checkbox

上の設定で、以下のようなショートコードが生成されます。

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "(選択肢1)" "(選択肢2)" "(選択肢3)"]

ラジオボタンフォームタグ

「ラジオボタン」フォームタグを使用すると、複数の選択肢を持つラジオボタンを作成できます。チェックボックスやドロップダウンメニューとは異なり、選択肢は1つしか選ぶことができません。

「ラジオボタン」フォームタグ
「ラジオボタン」フォームタグ

「ラジオボタン」フォームタグは以下のように設定します。

  • 名前:radio-708(自動生成)
  • オプション:選択項目(一行に1つの項目を入力)
  • ラベルを前に、チェックボックスを後に配置する:チェックなし
  • ここの項目を label 要素で囲む:チェックをいれる
  • ID属性:cf7-radio
  • クラス属性:cf7-radio

上の設定で、以下のショートコードが生成されます。

[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "(選択肢1)" "(選択肢2)" "(選択肢3)"]

承諾確認フォームタグ

「承諾確認」フォームタグは、利用規約などをを承諾するためのチェックボックスをひとつ生成するために使うことができます。承諾フォームタグの設定で、表示するメッセージを指定することができます。

An “acceptance” form tag in Contact Form 7.
Contact Form 7 の「承諾」フォームタグ。

「承諾確認」フォームタグは、以下のように設定します。

  • 名前:acceptance-545(自動生成)
  • 同意条件:「利用規約に同意の上、このボックスにチェックを入れてください」などの文言
  • オプション:「チェックボックスを任意選択にする」のチェックなし
  • ID属性:cf7-acceptance
  • クラス属性:cf7-acceptance

上の設定により、以下のショートコードが生成されます。

[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] 利用規約に同意の上、このボックスにチェックを入れてください。 [/acceptance]

クイズフォームタグ

「クイズ」フォームタグは、お問い合わせフォームに簡単な質問と回答を追加します。質問と回答はバーティカルバー(|)で区切ります。以下のスクリーンショットでは、質問が「What year was WordPress released?(WordPressは何年にリリースされましたか)」、回答が「2003」になります。

「クイズ」フォームタグ
「クイズ」フォームタグ

「クイズ」フォームタグは、以下のように設定します。

  • 名前:quiz-461(自動生成)
  • クイズと回答:質問と回答の間に「|」をスペースなしで入れる
  • ID属性:cf7-quiz
  • クラス属性:cf7-quiz

上の設定により、以下のショートコードが生成されます。

[quiz quiz-461 id:cf7-quiz class:cf7-quiz "(質問)|(回答)"]

ファイルフォームタグ

「ファイル」フォームタグを使用すると、お問い合わせフォームにファイルアップロード機能を追加することができます。訪問者が画像やPDFファイルをアップロードして、フォームに返信できるようにしたい場合に便利です。例えば、フォトギャラリーを持つ写真ブログを運営していて、フォロワーからの投稿を掲載している場合、お問い合わせフォームから画像ファイルをアップロードしてもらうことができます。

このフォームタグには、フォームを保護するための様々な設定があります。たとえば、悪意のあるユーザーが巨大なファイルをアップロードするのを防ぐために、ファイルサイズ制限は常に設定することをお勧めします。また、使用可能なファイル形式を設定することで、ファイル形式を任意のものに絞ることも可能です。写真ブログの例では、ファイルサイズを1MB(1024KB)に制限し、使用可能なファイル形式をJPGPNGのような既知の画像ファイル形式に限定することができます。

「ファイル」フォームタグ
「ファイル」フォームタグ

「ファイル」フォームタグは、以下のように設定します。

  • 名前:file-658(自動生成)
  • ファイルサイズの制限:1024kb
  • 使用可能なファイルの種類:jpg|png|gif
  • ID属性:cf7-file
  • クラス属性:cf7-file

上ので設定により、以下のショートコードが生成されます。

[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]

送信ボタンフォームタグ

「送信ボタン」フォームタグは、最後にユーザーがお問い合わせフォームを送信するためのボタンを作成するものです。

「送信ボタン」フォームタグ
「送信ボタン」フォームタグ

「送信ボタン」フォームタグは、以下のように設定します。

  • ラベル:送信(ボタンの文言)
  • ID属性:cf7-submit
  • クラス属性:cf7-submit

上の設定で、以下のショートコードが生成されます。

[submit id:cf7-submit class:cf7-submit "送信"]

フォームタグを使用してお問い合わせフォームを作成する

各フォームタグの設定方法がわかったところで、お問い合わせフォームを作成していきます。上記の各設定で以下のようなお問い合わせフォームが出来上がります。必要なフォームタグを設置したら、[contact-form-7]ショートコードを使用して、WordPressの投稿や固定ページに埋め込むことができます。

[contact-form-7]ショートコードでお問い合わせフォームを設置
[contact-form-7]ショートコードでお問い合わせフォームを設置
WordPressエディターで、空のブロックにショートコードを貼り付けます。

[contact-form-7]ショートコードを投稿や固定ページに貼り付ける
[contact-form-7]ショートコードを投稿や固定ページに貼り付ける
クラシックエディターを使用している場合は、コンテンツフィールド内の任意の場所に貼り付けることができます。

WordPressのクラシックエディターでContact Form 7のお問い合わせフォームを設置
WordPressのクラシックエディターでContact Form 7のお問い合わせフォームを設置

これで、投稿や固定ページにお問い合わせフォームが表示されるようになります。Contact Form 7がフォームタグを自動的にHTMLに変換し、WordPressテーマ標準のCSSスタイルでお問い合わせフォームを表示します。

Contact Form 7で作成したお問い合わせフォーム
Contact Form 7で作成したお問い合わせフォーム

上のお問い合わせフォームもすでにいい感じですが、重要な機能が欠けています。「テキスト」「メールアドレス」「URL」のようなフォームタグはプレースホルダーに対応していますが、「チェックボックス」や「ラジオボタン」のような他の要素ではサポートされていません。チェックボックスやラジオボタンにもプレースホルダーがなければ、何を選択すべきなのかが明確にわかりません。Contact Form 7ではラベルも簡単に追加することができます。

フォームタグのラベルを追加する

Contact Form 7のフォームタグにラベルを追加するには、二通りの方法があります。以下のフォームタグの場合は、フォームタグをタグで囲むだけでOKです。

  • テキスト
  • メールアドレス
  • URL
  • 電話番号
  • 数値
  • 日付
  • テキストエリア
  • 承諾確認
  • クイズ
  • ファイル

「テキスト」フォームタグの例を見てみます。

[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]

このフォームタグにラベルを追加するには、フォームタグを以下のように置き換えます。冒頭の<label>の直後のインスタンス(Your Name)がラベルになります。

<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>

フロントエンドでは、以下のように表示されます。フォームタグの中でプレースホルダーを指定したくない場合も、特定の入力ボックスの目的を明確化するのにラベルが役立ちます。

Contact Form 7のフォームタグにラベルを追加
Contact Form 7のフォームタグにラベルを追加

チェックボックス」「ラジオボタン」「ドロップダウンメニュー」のような、複数の選択肢を持つフォームタグでは、フォームタグを タグで囲むとエラーが生じます。これは<label>が1つの選択肢にのみにしか適用できないため。これらのフォームタグは標準のラベル機能と互換性がありません。

これらのフォームタグについては、ショートコード内にuse_label_elementパラメータを追加します。「チェックボックス」フォームタグの例を見てみます。

[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]

use_label_elementパラメータを追加すると、以下のようにお問い合わせフォームエディターでフォームタグの真上にラベルを追加することができます。

チェックボックス、ラジオボタン、ドロップダウンメニューにラベルを追加
チェックボックス、ラジオボタン、ドロップダウンメニューにラベルを追加

上のスクリーンショットは、あくまで例としてすべてのフォームタグにラベルを追加しています。これにより、お問い合わせフォームは以下のようになります。

ラベル追加後のお問い合わせフォーム
ラベル追加後のお問い合わせフォーム

Contact Form 7のメール設定

お問い合わせフォームを作成したら、続いてはContact Form 7のメール配信設定です。ほとんどのサイトではデフォルトのままで問題ありませんが、サイトでの特定の用途や要件を想定して、設定方法も見ていきます。

メール配信設定にアクセスするには、コンタクトフォームエディターで「メール」タブを選択します。

Contact Form 7のメール配信設定
Contact Form 7のメール配信設定

Contact Form 7のメール配信設定では、誰かがフォームを送信した際に通知を受け取るためのテンプレートやパラメータをカスタマイズすることができます。誤った設定を行うと、フォーム送信の通知が届かない可能性があるため、問い合わせフォームを作成し、設定を変更した後はフォームの送信を必ずテストしてください。

Contact Form 7では以下のようなメール配信設定が可能です。

  • 送信先:通知を送信するメールアドレス
  • 送信元:送信元のメールアドレス
  • 題名:通知メールの件名
  • 追加ヘッダー:「reply-to」のようなメールヘッダーを指定
  • メッセージ本文
  • ファイル添付:通知に添付するファイルを指定

以下、それぞれの設定を掘り下げていきます。

送信先フィールド

「送信先」フィールドには、メールアドレスを指定します。デフォルトでは、WordPressユーザーアカウントに設定されているメールアドレスが自動で割り当てられます。WordPress に設定しているメールアドレスが有効でない場合は、プロフィール設定でメールアドレスを更新し、Contact Form 7のメールアドレスも変更してください。

送信元フィールド

「送信元」フィールドの設定には、Your Nameのフォーマットを使用します(Kinstaのメール設定はkinstalife <[email protected]>)。

デフォルトでは、このフィールドに[email protected]が入力されます。WordPressホスティングの中には、無効なアドレスへの送信メールをブロックするものがあるため、必ずこのメールアドレスを有効にする必要があります。これには複数の方法があり、[email protected]専用のメールアカウントを設定するか、メール配信サービスでキャッチオール機能を有効にします。このメールアドレスを設定できない場合は、配信上の問題を避けるために、有効なメールアドレスに変更することをお勧めします。

題名フィールド

「題名」フィールドには、通知メールの件名を指定します。デフォルトでは、Site Name “[your-subject]”になっています。

フォームに “[your-subject]”というフォームタグがなければ、必ず他のものに変更してください。例えば、訪問者の名前を取得するフォームタグ([your-name]など)しかなければ、題名をYou’ve Received a Message from [your-name]に変更することができます。

追加ヘッダーフィールド

「追加ヘッダー」フィールドには、reply-to、CC、BCC などのメールヘッダーを指定できます。デフォルトではReply-To: [your-email]が設定されており、これにより送信されたお問い合わせフォームから指定されたメールアドレスに返信することができます。

Contact Form 7デフォルトのメールフォームタグを使用している場合は、デフォルトのreply-toヘッダーでOKです。そうでない場合は、メールフォームタグの名前に応じて変更を加えてください。たとえば、上で作成したお問い合わせフォームでは、メールフォームタグに[email-632]を使用しているため、返信先のフォームタグはReply-To: [email-632]に変更しています。

メッセージ本文フィールド

「メッセージ本文」フィールドには、デフォルトで[your-name]、[your-email]、[your-subject]、[your-message]フォームタグを使用して以下のように設定されています。

送信元: [your-name] 
題名: [your-subject]
メッセージ本文:
[your-message]
-- 
このメールは、kinstalifeのお問い合わせフォームから送信されました(http://kinstalife.com)

お問い合わせフォームのテンプレートでこれらのフォームタグを使用していない場合は、変更を加えてください。上で作成したお問い合わせフォームは多くの情報を収集するため、以下のように設定することができます。

[text-711] ([email-632])からメッセージを受信しました
ウェブサイト: [url-601]
電話番号: Tel-842
予約日: date-389
メッセージ: textarea-795
Contact Form 7の通知メールのメッセージ本文を編集
Contact Form 7の通知メールのメッセージ本文を編集

ファイル添付

お問い合わせフォームにファイルをアップロードする場合は、ファイルの添付も可能です。上で作成したお問い合わせフォームには、[file-658]という名前のファイルフォームタグを設定しているため、このフォームタグを「ファイル添付」フィールドに追加すると、通知メールにファイルを添付することができます。

Contact Form 7の通知メールに添付ファイルを含める
Contact Form 7の通知メールに添付ファイルを含める

メール配信に関するエラー

Contact Form 7がメールを正常に送信しない場合、WordPress開発者に相談する前に以下のトラブルシューティングを行うことができます。

  1. サーバーが他の種類のメールを送信していないか確認する─ブログ記事にテストコメントを投稿するか、WordPressのログインページでパスワード再設定リクエストを送信することで、別のメール送信アクションを実行することができ、これでメールが届く場合は、Contact Form 7の設定に問題がある可能性が高い。この状況でもメールが届かない場合は、メールホスティングサービスに問い合わせて、メール配信に問題がある旨を伝える。
  2. お問い合わせフォームのメール送信設定の「送信先」と「送信元」フィールドが正しく設定されているかを確認する─Contact Form 7が正しく動作するためには、これらのフィールドに有効なメールアドレスを設定する必要がある。

Contact Form 7のメッセージ設定

Contact Form 7では、フォーム送信メッセージを編集することも可能です。各メッセージは特定の条件下で表示されます。たとえば、ユーザーが必須項目を入力し忘れた場合、「必須項目を入力してください」といったメッセージを表示することができます。デフォルトのメッセージを使用して問題ありませんが、変更したい場合には、「メッセージ」タブを開きます。

必要に応じて表示メッセージの編集も可能
必要に応じて表示メッセージの編集も可能

お問い合わせフォームのセキュリティ強化策

悪質なボットは年々増加し、なおかつ巧妙になっており、スパムはお問い合わせフォームの脅威になります。お問い合わせフォームはインターネット上で一般公開されているため、ウェブスクレイパーがそれを検知し、メールボックスに迷惑メールを簡単に送信することができてしまいます。以下、迷惑メールを撃退してお問い合わせフォームを保護する方法をご紹介します。

reCAPTCHAで保護する

インターネット上でフォームを送信したことがあれば、自動ボットの動作を識別するためにGoogleによって開発された技術「reCAPTCHA」はご存知のはず。旧バージョンのreCAPTCHA(V2)は、フォームの送信前にユーザーにパズルを解いたりクイズに回答したりすることを要求します。

reCAPTCHAの最新バージョン(V3)は、ユーザーのインタラクションは不要で、バックグラウンドでユーザーの活動を透過的に監視し、生身の人間とボットの訪問者を区別します。Contact Form 7はreCAPTCHA V3に対応しているため、より良いユーザー体験を提供するために、この最新版を使用することをお勧めします。

reCAPTCHAを設定するには、まずAPIキーを生成します。Google アカウントにログインし、reCAPTCHAの設定ページにアクセスしてください。

reCAPTCHA統合用のサイトを登録
reCAPTCHA統合用のサイトを登録

登録フォームに進んで、reCAPTCHAを作成します。

  • ラベル:任意のラベル名
  • reCAPTCHA タイプ:reCAPTCHA v3を選択
  • ドメイン:サイトがルートドメインを使用している場合は、wwwなしとありのドメインを追加。 サブドメインを使用している場合はサブドメインだけを追加。
  • オーナー:Google アカウントに紐付けられたメールアドレスがデフォルトで追加されるが、必要に応じて変更可能。

すべての設定を終えたら、「送信」をクリックします。するとサイト固有の「サイトキー」と「シークレットキー」が表示されます。これらのキーは安全な場所に保管してください。後ほどContact Form 7に追加します。

Google reCAPTCHAのサイトキーとシークレットキー
Google reCAPTCHAのサイトキーとシークレットキー

次に、WordPress管理画面のサイドバーで「お問い合わせ」>「インテグレーション」 を開きます。「reCAPTCHA」セクションの各フィールドにそれぞれサイトキーとシークレットキーを貼り付けます。「変更を保存」をクリックして、reCAPTCHAの統合を確定します。

Contact Form 7にreCAPTCHAを統合
Contact Form 7にreCAPTCHAを統合

reCAPTCHAを設定すると、お問い合わせフォームの右下にreCAPTCHAのロゴが表示されるようになります。これで、お問い合わせフォームをスパムから保護することができます。

reCAPTCHA V3でお問い合わせフォームを保護
reCAPTCHA V3でお問い合わせフォームを保護

Cloudflareで保護する(任意)

Cloudflareを利用してサイトを保護している場合は、お問い合わせページに特別なページルールを設定して、スパム対策をおこなうことができます。

Cloudflareでお問い合わせフォームを保護
Cloudflareでお問い合わせフォームを保護

ページルールを追加するには、「ページ ルール」タブを開き、以下の設定を行います。

  • URL が一致する場合:*your-domain.com/your-contact-page/*
  • その後の設定は:「ブラウザ整合性チェック」を選択して有効化
  • その後の設定は:「セキュリティレベル」を選択して「」に

Cloudflareのブラウザ整合性チェック機能は、HTTPヘッダーを分析します。ボットや悪意あるユーザーが使用するHTTPヘッダーを検出し、サイトへのリクエストを拒否してくれます。また、セキュリティレベルを「高」に設定することで、過去2週間以内に悪意があると見なされる行動をおこなった訪問者にチャレンジ(追加の確認手続き)を行います。

これらの設定を「URL が一致する場合」でお問い合わせページに限定すれば、その他のページがこのページルールの影響を受けなくなります。サイト上の読み取り専用ページは、一般にセキュリティレベルを高く設定する必要はありません。

まとめ

Contact Form 7は、非常に人気の高いお問い合わせフォームプラグインです。基本的なフォームから質問の提示と回答の収集、添付ファイル、ドロップダウンメニューを設置する複雑なフォームまで、要件に応じたお問い合わせフォームを作り上げることができます。

さらに組み込みのreCAPTCHAサポートにより、迷惑メールやスパムからお問い合わせフォームを保護することも可能です。

Contact Form 7を使用していますか?他にもおすすめのお問い合わせフォームプラグインをご存知ですか?以下のコメント欄でお知らせください。

Brian Li

WordPressユーザー歴は10年以上で、自分の知識をコミュニティと共有することを楽しみとする。休みの日はピアノを弾いたり、カメラを持って東京を探索したりしている。ウェブサイトはこちら。