WordPressにGoogle reCAPTCHA付きフォームを設置する

フォームは脆弱性が発生しやすい場所で、併せてスパム投稿の対策も行う必要がある。

今回は楽をするため、プラグインを使って実装する。

reCAPTCHAについて

スパム対策についてはGoogleが提供するInvisible reCAPTCHAを使用することにした。

reCAPTCHAは、フォーム内に「私はロボットではありません」ボックスを用意して、チェックをしてもらうことで、スパムを防止する。

最近では、チェック後に画像認証を行うようになっており、「車の画像をすべて選ぶ」とか。「お店の画像をすべて選ぶ」等でなかなか正解できないのだ。

Invisible reCAPTCHAは行動履歴、投稿内容からスパムかどうかの判定を行い、チェックボックスにチェックする必要を省く。

あのめんどくさい、画像選びはしなくていいのだ。

プラグイン・設定について

reCAPTCHA アカウント作成

reCAPTCHAを機能させるためには、サイトの登録、sitekey・secretkeyの取得が必要になる。

googleアカウントでreCAPTCHA adminにログイン。

下にいくとRegister a new site(サイト登録)があるので、そこにLabel(表示名)とreCHAPTCHAのタイプを選択。

今回は、Labelに「fuku-suku」とreCHAPTCHAタイプを「Invisible reCAPTCHA」にチェック。

Domainsが出てくるので、機能させたいドメインを入力する。

今回は、サイト全体を対象にしたいので、fuku-suku.comと入力して、利用規約に同意するにチェック。

登録が完了すると、keysが見れるようになるので、Site key、Secret keyの値を記録する。

Contact Form 7

フォームプラグインで有名。

そもそもreCHAPTCHAには対応している。

画像認証でも大丈夫という方はこちらだけのインストールで可。

プラグイン検索から「Contact Form7」と検索すると、見つけることができる。

インストール後は、コンタクトフォームを生成・編集し、その後、ショートコードを任意のページに貼り付けることで、フォームを表示することができる。

ショートコードは、

ワードプレスダッシュボード内のメニュー → お問い合わせ → コンタクトフォーム内から見ることができる。

有効化した後は、フォームを貼り付けたいページを開き、ショートコードを貼り付けると完成。

Invisible reCaptcha

Contact Form7と連携して使用する。

設定ページ内に、先ほど取得した、Site KeyとSecret Keyを入力して保存。

表示言語やラベルび表示方法を変えたければ、他の設定をさわる。

最後にContact Form7と連携する。

Contact Form内にある「Enable protection for Contact Form 7」にチェックを入れて保存することで、連携できる。

以上で終わりです。

お疲れ様です。