【WordPress】ContactForm7にreCAPTCHAv3をに導入して中央配置する方法 | 飽き性な男のムダ話

＼イラスト・画像作成依頼募集中／

Web・WP関連

2020/07/28 2021/05/22

【WordPress】ContactForm7にreCAPTCHAv3をに導入して中央配置する方法

こんにちは～Taku(@takumuda_1093)です。
最近、このブログのお問い合わせフォームからスパムメールが大量に来ていました。
しかし、あるものを導入しただけで大きな効果があったので紹介します。

1.コンタクトフォームからスパムが大量に…

ある日、自分のgmailに送られてきたメールをチェックしていたら、迷惑メールが何十件も届いていることに気がつきました。
どんな迷惑メールが届いているのか確認すると…

こりゃひでぇなおい。

Taku

内容は、「完全日本語のブログなのになぜか全て英語のメッセージ」や、「見るからに怪しいネットビジネス勧誘」「Webやデザインに全く関係のない自動車の押し売り」などなど…。
とにかく迷惑極まりないメールが大量に送られてきていました。
おかげでWordPressからの大切なお知らせメールまでスパム扱いにされていました。

そして日本語のスパムメールに必ず書かれている冒頭の一文、

詫びる気持ちがあるなら初めから送ってくるなよ！

Taku

リツキ

うわ〜これはムカつくね〜…。しかも大事なお知らせメールが普通に届かないのは困るじゃん…

ほんとなー。今回たまたま気が付いたから良かったけど、もし気が付かないまま重要なメールが来ていたと思うと恐ろしい…

Taku

2.Contact Form 7はスパム攻撃を受けやすい

このブログのお問い合わせフォームは「Contact Form 7」というプラグインで作成されています。

「Contact Form 7」は、名前の通りコンタクトフォームを簡単に実装・設置ができる非常に優秀なプラグインです。
WordPressでWebサイトを作成している人なら誰もが知っているプラグインかもしれません。
どうやら「Contact Form 7」は王道かつ人気のプラグインだけあって、スパム攻撃も多く受けてしまうようです。

これはどうにかして対処しないとな…

Taku

3.スパムに困ったらre CAPTCHAを導入しよう

記事の下にあるコメントフォームは「SiteGuard WP Plugin」というプラグインでスパム対策ができていました。

「SiteGuard WP Plugin」は画像認証(変形した文字を読み取って入力するタイプ)を表示することで、悪質なスパムを一掃してくれるプラグインです。

「SiteGuard WP Plugin」の詳細は以下の記事でまとめています！良かったら読んでみて下さい！

Taku

【WordPress】ContactForm7にreCAPTCHAv3をに導入して中央配置する方法

しかし、「Contact Form 7」に「SiteGuard WP Plugin」の画像認証を埋め込むことはできません。
なので、何か良いスパム対策はないかと考えましたが、答えはたった1つでした。

それは「reCAPTCHA」です。

「reCAPTCHA」は、Googleから提供されている、悪質なbotからのスパム攻撃からWebサイトを守るシステムの一つです。スパム対策システムの中でもトップクラスの効果を期待することができます。

「私はロボットではありません」という言葉を聞くと分かる人は多いはず！

Taku

リツキ

あーそれ知ってる〜！モンスターを捕まえてコレクションする某ゲームで突然表示されてビックリしたやつだ！

この「reCAPTCHA」を使えば、きっとスパムメールは無くなるはずだと信じて導入することにしました。

4.reCAPTCHAv3で画像認証がなくなった

「re CAPTCHA」は正直初めは良いイメージを持っていませんでした。
理由は画像認証が必ず表示されて、難問もあったからです。

今までは「出題された物を、グリッド常並べられた画像の中から探し出す」という画像認証が必ず表示されていました。
急いでいる時にこの認証を行うのは大変で、グリッドと画像の境目が分かりにくい出題もあり、人間でも手こずることがありました。

しかし、v3になってからは怪しい操作(bot)だと判断されない限り、画像認証は表示されません。
そのため、毎回認証作業を行わなくてもスムーズにメッセージを送信することができるようになりました。

リツキ

前よりも良くなっているなら入れるしかないね〜！

だね！じゃあ早速導入と設置方法を説明していくよ！

Taku

5.re CAPTCHAv3の設置方法

WordPressで「re CAPTCHAv3」を導入する方法は主に2つあります。
ダッシュボードの「インテグレーション」から導入する方法と、「re CAPTCHAv3のプラグイン」から設定する方法です。
1つ目の「インテグレーション」から導入する方法のが手軽に設定することができます。しかし、以下の画像のように「re CAPTCHA」のアイコン(バッジ)が全てのページに表示されてしまいます。

「ページトップへ戻るボタン」を右下に設置している場合、それぞれが重なってしまいとても邪魔になってしまいます。

デザイン的にも、機能的にも良くない状態になるから、この方法はおすすめしないな…
バッジが表示されるにしても、お問い合わせフォームだけにしたい…

Taku

なので、この記事では2つ目のプラグインを使用する方法で説明していきます。

①Google reCAPTCHAにサイトを登録する

自身のWebサイトを「Google reCAPTCHA」に登録します。
まず、「Google reCAPTCHA」でログインして、サイトの情報を登録していきます。

①「ラベル」は、登録名を設定します。後から見ても分かるように、サイト名やURLを記入しましょう。
②「reCAPTCHAタイプ」は「reCAPTCHAv3」の方を選びます。「reCAPTCHAv2」を選ぶと例の画像認証が表示されてしまうので注意。
③「ドメイン」は、Webサイトのドメインを記入します。「https:」や「www」を含まないように注意しましょう。
④「利用規約に同意する」は、チェックボックスにチェックを入れて下さい。画像では見切れてしまっていますが、「アラートをオーナーに送信する」にもチェックを入れておきましょう。

③のドメインは、例えば「https://taku0.com/」というURLなら「taku0.com」と記入するってことだよ！

Taku

②Site KeyとSecret Keyを用意する

登録が完了すると「Site Key」「Secret Key」という2種類の「Key(キー)」が表示されます。
このKeyはプラグイン導入後に必要になるので、ページを閉じずに残しておきましょう。

リツキ

閉じるなって言われたときに限って間違えて閉じちゃいそう…汗

ページを閉じてしまいそうで自身がないときは、メモ帳にコピペしておくのもありだよ！

Taku

③プラグイン「Invisible reCaptcha for WordPress」を導入する

次にreCAPTCHAのプラグインを導入します。
WordPressの[ダッシュボード]にアクセスし、[プラグイン]から[新規追加]に移動します。
右上にある検索フォームに「Invisible reCaptcha」と入力して検索をかけます。
そして左上に表示されている「Invisible reCaptcha for WordPress」をインストールして有効化します。

似たような名前・アイコンのプラグインが沢山あるから、間違えてインストールしないように注意しよう！

Taku

④プラグインの設定をする

プラグインが導入できたら、初期設定をしていきます。

①「Your ○○○Key」は、先ほど用意した「Site Key」と「Secret Key」をそれぞれ記入していきます。
②「Language」は言語設定のことです。日本語に設定したいので「japanese」を選択します。
③「Badge Position」は、表示位置のことです。お問い合わせフォームだけに埋め込みたいので「Inline」を選択します。

「③Badge Position」について補足するけど、「Bottom Right」は右下表示、「Bottom Left」は左下表示だよ！お好みに合わせて選択するのもありだよ！

Taku

リツキ

な〜んか英語ばっかりだけど、そんなに難しくはなさそうだね〜！

うんうん！英単語すらまともに読解できない自分でもできるんだから大丈夫！

Taku

⑤reCAPTCHAをContact Form 7に埋め込む

[Contact Forms]に移動し「Enable Protection for Contact Form 7」のチェックボックスにチェックを入れます。

たったこれだけでContact Form 7に埋め込むことができるよ！

Taku

リツキ

めっちゃ簡単だね〜！

6.re CAPTCHAv3を中央配置するには

これで「re CAPTCHAv3」を導入・表示することができました。しっかり表示されているか自身のお問い合わせフォームを見て確認しましょう。

リツキ

おぉ！ちゃんと表示されてるっぽいね〜！

うん！でも、左下に寄りすぎて不格好に見えない？

Taku

リツキ

あ〜そう言われてみれば確かに違和感あるかも。

でしょ？re CAPTCHAのアイコン(バッジ)もデザインの一つになるから、中央配置に変更して見栄えも良くしていこう！

Taku

re CAPTCHAの表示を中央配置にするためには「css」を追加していきます。
まず、WordPressの[ダッシュボード]を表示し、[外観]から[テーマエディター]に移動します。
もしくは、エディターソフトを起動して「style.css」を開きます。
cssを追加する準備ができたら、任意の箇所に以下のコードを記述しましょう。

/*reCAPTCHA*/
.grecaptcha-badge{
	margin: auto;
}

たったこれだけで中央配置にすることができるよ！
また「上下の高さ(margin-top)(margin-bottom)」も調整するとさらに良くなるよ！
cssに詳しくない人は、上のコードをコピペしよう！

Taku

記述が完了して更新すれば、以下のような中央配置に変わります。

リツキ

こうやって見ると、中央配置の方が断然良く見えるね〜♪

デザインは細かいところまで意識することで良さが生まれるよ！だから表示されただけで満足しないで表示位置にもこだわろう！

Taku

7.導入した効果は果たして…

さてここまで導入方法を説明しましたが、効果はあったのでしょうか？
導入から数日後に改めて迷惑メールを確認してみると…

なんと0件になっていたよ！re CAPTCHAおそるべし…！

Taku

リツキ

凄すぎてびっくり！あんなにあった迷惑メールが一つも来ていないなんて驚きだね〜♪
とにかくよかったね〜！

マジでよかったよ！
正直数件は届くかなって思ってたけど、予想を遥かに上回る結果で大満足！
スパムメールに困っている場合はre CAPTCHAの導入も視野に入れてみてほしい！

Taku

8.最後に

今回はお問い合わせフォーム(Contact Form 7)に「re CAPTCHAv3」を導入・中央配置する方法をまとめました。
スパムは放っておくと、どんどん増えてしまい、Webサイトに重大な悪影響を及ぼす可能性もあります。
なにかが起きる前に早めに対処していきましょう。

最後まで読んでいただきありがとうございました！

Next ≫ ≪ Back