【スパムメール対策 お問い合わせフォーム】Contact Form 7で reCAPTCHAを設定する方法

WordPress

【無料スパム対策】Contact Form 7でreCAPTCHAを設定する

2019年12月10日

今回は、WordPress(ワードプレス)のContact Form 7(コンタクトフォーム)を利用していて、スパムメールに困っている人向けにGoogleのサービス「reCAPTCHA(v3)」を導入する方法をご紹介します。
 

最近ブログのアクセスが増えてきたんですけど、それと同時に海外からの変な問い合わせメールがたくさん来るようになって困っています・・・

スパムメールですね。そのまま放置しているとひどくなる一方なので、スパム対策をすることをおすすめします。今回は、無料でできる「reCAPTCHA(v3)」によるスパム対策を説明していきますね。

 

今回説明する上での前提条件

  • WordPressにContact Form 7がインストール・有効化されていること
  • Googleアカウントを既に持っていること(持っていない場合は新規作成してください)

 

【WordPress対応】自分でホームページ・ブログを作成したいWebスクールWEBST8
WordPress 自分でホームページ・ブログを作成したい個人事業主のためのWebスクール・教室 ウェブストエイト


 


 

reCAPTCHAはスパムなどからWebサイトを保護するGoogleのサービス

reCAPTCHA Condole Adminボタンをクリック
 

reCAPTCHAとは、スパムメールなどの不正攻撃からWebサイトを保護するGoogleの無料サービスです。
 

reCAPTCHAには、いくつかバージョンがありますが、今回は、reCAPTCHAv3という「人目につかないバックグラウンドでスパムかどうかを判断して、サイトを保護する仕組み」を利用します。
 

なお、reCAPTCHAv2では画像認証をさせたりする方式もあります。
 

V2以前は、車や信号機などの画像を選択させたり「私はロボットではありません」のチェックを入れたりなどの方式で、やや利便性が下がる方式でしたが、v3ではそういったことがなくなり利便性を損なわずに保護することができるようになりました。
 

reCAPTCHAv3だったら、ユーザーの利便性が下がらないんですね!

今回は、はい。今回は、reCAPTHCA v3をWordPressのコンタクトフォームに実装する方法をご紹介します。

 

【手順1】reCAPTCHA v3のAPIキーを取得する

まずは、GoogleのreCAPTCHAサービスページにアクセスして連携用のキー(Key)を取得する必要があります。

下記のURLにアクセスしましょう。
https://www.google.com/recaptcha/about/
 

右上のAdmin Consoleボタンをクリックします。Googleにログインしていない場合は、ログイン画面が表示されるのでGoogleアカウントでログインしてください。
reCAPTCHA Condole Adminボタンをクリック
 

下記のサイト登録画面が表示されます。
google recaptcha サイト登録画面
 

サイト登録画面で必要項目を入力していきます。実装したいサイトのドメインを記入し、reCAPTCHA v3を選択していきます。
(reCAPTCHAv3と v2のAPIキーは別物になりますので、v2は選ばないようにしましょう。)
google recaptcha サイト登録画面 ドメイン情報を入力
 

サイトキーとシークレットキーが発行されます。あとで両方利用しますので、コピーして控えておきましょう。
google recaptcha サイトキーをコピー
 
 

【手順2】Contact Form 7にreCAPTCHAを実装する

次に、Contact Form 7にreCAPTCHAを実装していきます。

WordPressの管理画面から、お問い合わせ>インテグレーション を選択します。
お問い合わせ>インテグレーション
 

インテグレーションのセットアップをクリックします。
お問い合わせ>インテグレーション>インテグレーションのセットアップ
 

【手順1】でコピーした、サイトキーとシークレットキーをそれぞれ、下記の入力欄にコピーして「変更を保存」します。
お問い合わせ>インテグレーション>キーを入力して保存
 

サイトを開いた時にreCAPTCHAの保護マークが表示されていればOKです。
reCAPTCHAの保護マークが表示されていればOKです。
 

以上で、reCAPTCHA v3の実装は完了です。
 

Contact Form 7の公式サイトにも記載がありますので、下記も併せてご参照ください。
reCAPTCHA (v3) | Contact Form 7 [日本語]
 

【手順3(任意)】reCAPTCHAの保護マークを調整する

以下の操作は、任意の操作になります。必要に応じて実施してください。
 

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. Please include the following text:

This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.
I'd like to hide the reCAPTCHA badge. What is allowed? | Google Developer より引用

 

まずは、保護マークをCSSで非表示にする設定を行います。カスタマイズ>追加CSSまたは子テーマのcssで下記のCSSを追記します。

 

追加CSSに上記コードを貼り付けて公開します。
追加CSSでreCAPTCHAを非表示にする
 

これで、保護マークが消えました。保護マークを消した代わりに、保護マークに相当する文章を表記する必要があります。ここでは、お問い合わせフォームと、フッターに表示しておきました。
 

■recaptchaのプライバシーポリシーと利用規約の文言をお問い合わせページ用の固定ページに追加
recaptchaのプライバシーポリシーと利用規約の文言をお問い合わせページ用の固定ページに追加
 

今回は、日本語訳したものを追記しておきました。

 

■お問い合わせページに文言が表示されている
recaptchaのプライバシーポリシーと利用規約の文言をお問い合わせページ用の固定ページに追加
 

■フッターにも追記・表示させておきました
reCAPTCHAの保護マークの代わりに、フッターに文言を追加します。
 

以上で、reCAPTCHAの保護マークを調整は完了です。
 

まとめ

まとめです。今回は、WordPressのContact Form 7(コンタクトフォーム)を利用していて、スパムメールに困っている人向けにGoogleのサービス「reCAPTCHA(v3)」を導入する方法をご紹介しました。
&nbs;

サイトを開設した当初はほとんどスパムメールは来ませんが、サイトを長く運営しているとどこかのタイミングでスパムメールが来るようになってきます。
 

そのまま放置していると不正利用の可能性も増えてくるため、スパムメールが来始めたら、早い目に対策しておきましょう。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,

© 2020 WEBST8のブログ Powered by AFFINGER5