WordPressにスパム対策万全なお問い合わせフォームを設置しよう!

アイキャッチ画像(wordpress-contact-form-implementation)

お問い合わせフォームはブログを運営する上で欠かせない機能です。でも設置するのは少し難しそうなイメージがあるかもしれません。またせっかく設置しても、悪質なスパムが原因で結局フォームを閉鎖せざるを得なくなったら悲しいですよね。

この記事ではContact Form 7というプラグインを利用したお問い合わせフォームの簡単な設置方法と、reCAPTCHAによるスパム対策の方法をご紹介します。


お問い合わせフォームの設置

お問い合わせフォームの設置をこれから進めていきますが、すでにメール送信の設定は完了していますか?

WordPressにはメールを送信する機能がありません。そのためただContact Form 7を入れただけでは、メールを送れるようにはならないのです。まだメールサーバーの設定を済ませていない方は、次の記事をご覧ください。また本記事では「スパムが送られて来ないようにする方法」をご紹介しています。「送信するメールが相手方でスパム判定されない方法」について知りたい方も、次の記事をご覧ください。

Contact Form 7のインストール

こちらのContact Form 7というプラグインをインストールしましょう。富士山の絵がおしゃれですね。作成者(Takayuki Miyoshi)はお名前からして日本の方でしょうか。

Contact Form 7

プラグインを有効化すると、WordPress管理画面のメニューに「お問い合わせ」という項目が追加されるので、そちらの画面を開いてください。

新規フォームの追加

Contact Form 7ではフォームテンプレートというパーツを作成し、それを固定ページなどに埋め込むことでお問い合わせフォームを表示します。

それではページ上部の新規作成を押し、テンプレートを作成してみましょう。

フォームテンプレートの一覧

フォームテンプレートの作成

テンプレートの編集画面

この画面ではテンプレートの中身を編集できます。テンプレートの中身はHTMLのコードです。ここで書いたコードは後ほどご説明するショートコードでページの中に埋めこむことになります

こちらのテンプレートをカスタマイズすることでお問い合わせの内容を変えることが可能なのですが、ひとまずそのまま使うことにしましょう。一番上の枠に名前を付けた後、左下の保存を押してください。

ショートコードをページに挿入

テンプレートを保存すると、下のようなショートコードが表示されますのでコピーしてください。このコードは1つ前のテンプレート一覧画面にも表示されるので、再度ショートコードが必要になったらそちらをご覧ください。

テンプレートのショートコード

続いてこのコードをページに埋め込みます。お問い合わせ用に固定ページを作成し、コピーしたショートコードを貼り付けてください。

ショートコードを挿入

※プラグインによりエディタをいじっているため、皆さんのものとは少し見た目が異なるかもしれません。

プレビューでフォームを確認

早速プレビューで表示を確認してみましょう。人により適用しているCSSが異なるため、デザインがどうなるかは一概に言えませんが、だいぶひどいものになっているはずです笑

素フォーム

この後すぐ、カスタマイズしやすいようにtable要素で囲んだフォームのHTMLコードを共有しますので、ひとまず見た目は気にしないでおいてください。ちなみにこの時点でもうフォームは使える状態になっているため、未完成のフォームが挿入されているページは公開しないように気を付けてください。

テンプレートのカスタマイズ

もう一度管理画面のメニューからお問い合わせを選択し、先ほど作成したテンプレートの個別ページを開いてください。

フォーム・メール・メッセージ・その他の設定の4つのタブがありますが、この記事ではフォーム・メールの2つについてのみ設定を行っていきます。

フォーム

お名前・メールアドレス・お問い合わせのタイトル・詳細の4項目を送信するフォームのコードを以下に掲載しました。CSSでカスタマイズがしやすいようにtable要素で作ってあります。最初からあるコードをすべて消し、下のコードを丸々貼り付けてください。

細かいカスタマイズについてはご自分のサイトに合うように、各自でお願いいたします。

メール

このページにあるメッセージ本文の中身がメールとして送信されます。こちらの中身については特に変更する必要がないので、省略させていただきます。ここでは送信先・送信元・題名・追加ヘッダーの4項目に注目してみましょう。

メール設定

送信先には[your-email]と入力することで、お問い合わせ内容のコピーをお問い合わせしてくれた方に指定することができます。この先も[your-何とか]と何度か出てきますが、いずれもフォームに入力された内容を指します。"your"と言われると自分のことかと思ってしまいますが、お問い合わせをしてくれた方のことなんですね。

送信元はひっかけです。初期状態ではwordpress@(自分のドメイン)になっていますが、ここを変更する必要はありません。「あれ、こんなメルアド持ってないけど…」と思いますよね。しかしContact Form 7により、ここのメールアドレスがxxx@(自分のドメイン)以外の形式だとメールが送信できないように制限されているのです。WP Mail SMTPを使用している場合、ここで何を設定しようとWP Mail SMTPの設定が優先されるため、無視して先に進みます。

題名はメールの件名です。ここではサイト名と、フォームに入力された内容[your-subject]を表示するようにしています。

追加ヘッダーではCcやBccの他に、メールに対する返信先の指定が可能です。私はお問い合わせ専用のアドレスにBccで内容のコピーを送るように設定しています。Reply Toは初期設定の[your-email]のままで、いじっていません。本来は送信専用メールアドレスを用いる際の設定だと思うのですが、自動送信のメールに返答されても対応ができないのでこのようにしています。

全ての設定が終わったら、ページ下の保存を押してください。

メールのテスト

それでは先ほどテンプレートを埋め込んだページを見てみてください。デザインが変わっているはずです。そちらのフォームを実際に使ってみて、ちゃんとメールが届くか、宛先は正しいか、タイトル・内容に問題はないかを確認しておきましょう。

reCAPTCHA v3の設定

ここまででお問い合わせフォームの設置自体は完了しました。これだけでも機能としては十分なのですが、スパム対策用にreCAPTCHAを導入しましょう。

reCAPTCHAとは?

reCAPTCHAはGoogleが提供する無料のサービスで、フォームへの投稿など何かアクションがあったときに、それが人間によるものかを確認してくれます。名前になじみはなくても、以下の画像はどこかで見たことがあるのではないでしょうか。

「私はロボットではありません」

(Google and the Google logo are registered trademarks of Google LLC, used with permission.)

「私はロボットではありません」をクリックするとしばらく表示がクルクルした後に✔マークが表示される、意味があるのかないのかよく分からないあれです。たまに自動車や信号機などの画像を選択するように求められますが、あの問題って結構難しいんですよね。その裏ではreCAPTCHAが様々なルールに基づいて、「人間らしさ」を判定しているとのことです。

実は2018年10月にreCAPTCHAがv2からv3にアップデートされたのですが、ついに「私はロボットではありません」という確認すら不要になりました。原理は非公開ですがとにかく人間らしさを判定していて、怪しい場合にのみ画像選択が表示されるそうです(割と頻繁に表示されます……)。

この記事ではreCAPTCHA v3の導入方法をご紹介しますね。

reCAPTCHAの導入

WordPress管理画面メニュー、お問い合わせからインテグレーションに移動します。そちらにreCAPTCHAとあるので、「インテグレーションのセットアップ」をクリックしてください。

Contact Form 7 インテグレーションメニュー

今からここに埋めるサイトキー・シークレットキーというものを作っていきます。なおここから先の作業ではGoogleアカウントが必要になるので、持っていない方がいたら先に作成しておいてください。

サイトキーとシークレットキー

reCAPTCHAキーの作成

ではこちらのサイトキーの作成に移動しましょう。下の画像を参考に必要なところを埋めてみてください。ドメインの項目についてですが、入力した後左にあるプラスを押して確定させてください。

サイトキーの取得

(Google and the Google logo are registered trademarks of Google LLC, used with permission.)

すると下のようにサイトキー・クレジットキーが表示されるので、先ほどのWordPress側のページにコピーしてあげましょう。

サイトキー・シークレットキーを確認

(Google and the Google logo are registered trademarks of Google LLC, used with permission.)

これでreCAPTCHAの設定も完了しました!

もし後日またキーが必要になった場合は、こちらの管理画面の右上の歯車から確認することが可能です。

おまけ: reCAPTCHA規約の表示を消したい場合

reCAPTCHA v3では先ほども触れたように、「私はロボットではありません」というチェックボックスが表示されません。そのため導入してもフォームには目に見える変化はありません。しかしよくよく見ると、画面の右下にこんなマークが表示されているんですね。

reCAPTCHAの利用規約

(Google and the Google logo are registered trademarks of Google LLC, used with permission.)

これはサイトの利用者に対してreCAPTCHAの利用規約を示すために、自動的にreCAPTCHAが表示しているものです。実はこのマーク、勝手に消すと利用規約違反になってしまうのです!

I'd like to hide the reCAPTCHA badge. What is allowed?

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.

reCAPTCHA Frequently asked questions

つまりreCAPTCHAで保護されているページにおいては、ユーザーが何かアクションを起こす際の自然な流れの中で規約が確認できるようにしておかなければならないのです。

このサイトではお問い合わせページでのみreCAPTCHAを有効にしているため、右下の表示もそこでのみ表示されています。具体的な方法についてはこちらのサイトを参考にさせていただきました。作業が不安で消してしまってはいけないところまで消してしまいそうな方は、全てのページに表示させたままにしておくことをおすすめいたします。


終わりに

この記事ではContact Form 7を用いてコンタクトフォームの設置を行いました。またスパム対策として、ユーザーがチェック等をする必要のない新しいreCAPTCHAを導入しました。

Contact Form 7のカスタマイズについて、この記事では私が必要十分と考えることしか行っておりません。そのため物足りなくてまだまだ試してみたいという方は、ネット上に沢山情報がありますのでぜひ色々と検索してみてくださいね!