当サイトは広告により収益を得ています。
- reCAPTCHAの設定方法を知りたい人
- contact form 7を使用していてスパムメールに苦しんでいる人
- これからお問い合わせフォームを作成しようとしている人
ブログを運営しているとスパムメールってかなりきますよね。
Google Adsenseの審査合格のために「contact form 7」を設置したものの、毎日数十通もスパムメールが届きますよね。
もうスパムメールはブログ運営で仕方ないものだと諦めていました。
しかし、「contact form 7」上からくるスパムメールを簡単に解決する方法があったため、紹介していきます。
ちなみに私は今回紹介する設定を導入したことでスパムメールが0になりました！
【アフィリエイト】ブログ初心者が登録すべきASPサイト5選
BOTによるスパムを対策する方法
Contact Form 7でreCAPTCHAを導入するだけです。
これにより、botによるスパムメールをゼロにすることができます！
とても簡単ですよね。
スパムメールがゼロになるわけは、reCAPTCHAによってbotによる操作を制限するためです。
実際これにより私はスパムメールがゼロになりました！
2021年はreCAPTCHAを導入してなかったため、結構な頻度でスパムメールが届いていました。
しかし、2022年1月にreCAPTCHAを導入してからはスパムメールが一切届かなくなりました！
このようにreCAPTCHA使うとスパムメールをゼロにすることが出来ます！
reCAPTCHAとは
Googleが提供するウェブサイトの制限エリアへのアクセスをbotから防御するためのサービスです。
GAFAで有名なGoogleが提供しているサービスというのも信頼性がとても高いですよね。
また、reCAPTCHAには、いくつかバージョンがあります。
今回はreCAPTCHAv3という最新のバージョンを利用します。
ということで具体的な導入方法について紹介していきます。
reCAPTCHAの導入方法
reCAPTCHAの大まかな導入方法は下記の通りです。
Googleが提供しているreCAPTCHAサービスページにアクセスしてAPIキーを取得します。
取得したAPIキーをContact Form 7と紐づけます。
サイトのページを確認してreCAPTCHAマークが表示されているか確認します。
詳細は下記で説明します。
reCAPTCHA v3のAPIキーを取得する
まずは、Googleが提供しているreCAPTCHAサービスページにアクセスします。
TOP画面上部のヘッダーにある「v3 Admin Console」をクリックします。
「v3 Admin Console」をクリックすると、下記の登録フォームに移動するため、必要情報を入力します。
| ラベル | 管理する際の名前 |
| reCAPTCHAタイプ | v2 or v3（基本的にはv3で問題ない） |
| ドメイン | サイトのドメイン |
| オーナー | 管理する人のメールアドレス |
アラートをオーナーに送信するは任意のため、チェックを外しても問題ありません。
すべて入力したら「reCAPTCHA利用条件に同意する」にチェックを入れて「送信」をクリックします。
すると、下記のような画面が表示されたらreCAPTCHAのAPIキー取得は完了です。
Contact Form 7とreCAPTCHAを紐づける
次は先ほど取得した下記の2つをreCAPTCHAを適用するサイトのContact Form 7と紐づけていきます。
- サイトキー
- シークレットキー
WordPressの管理画面で「お問い合わせ」＞「インテグレーション」をクリックします。
すると下記4つの項目があるため、reCAPTCHA内の「インテグレーションのセットアップ」をクリックします。
- Sendinblue
- Constant Contact
- Stripe
- reCAPTCHA
すると、下記の画面が表示されるため、先ほど取得した「サイトキー」と「シークレットキー」を入力します。
それぞれキーの入力が完了したら「変更を保存」をクリックします。
これでContact Form 7とreCAPTCHAの紐づけが完了です。
サイトでreCAPTCHAが機能しているか確認する
最後にreCAPTCHAが正常に機能しているか確認します。
reCAPTCHAを適用したサイトの右下にreCAPTCHAのアイコンが表示されていれば無事完了です。
reCAPTCHAのアイコンを消したい場合
アイコンを消したい場合は、CSSでアイコンを非表示にします。
方法としては下記のコードをCSSスタイルシートに記載するだけです。
.grecaptcha-badge { visibility: hidden; }CSSコードのエディタは「カスタマイズ」＞「追加CSS」で開くことができます。
そのエディタ上に上記のコードを入力するだけなので、普段コードを書かない人でも簡単です！
ただし、reCAPTCHAのアイコンを非表示にした場合に注意点があります。
reCAPTCHAアイコンを非表示にした際の注意点
CSSでアイコンを非表示にした場合は、どこかにreCAPTCHAによって保護されている旨を記載しなければなりません。
Google Developerサイトに下記のように記載があります。
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.
Google Developer より引用
そのため、プライバシーポリシーと利用規約の文言をお問い合わせページに追記していきます。
日本語の場合は、直訳ですが大まかに下記のように記載します。
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
コードにすると下記のようになります。
このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。このHTMLテキストをContact Form 7を適用している固定ページに記載するようにしましょう！
HTMLテキストなので、固定ページに記載する際は、ビジュアルエディターではなく、コードエディターにして書き込みます。
これでreCAPTCHAのアイコンを非表示にする作業は完了です。
まとめ
今回は、Contact Form 7を使用している際に、BOTによるスパムメールを対策する方法を紹介しました。
方法は簡単で、reCAPTCHAを導入するだけです。
大まかな方法は下記の通りです。
Googleが提供しているreCAPTCHAサービスページにアクセスしてAPIキーを取得します。
取得したAPIキーをContact Form 7と紐づけます。
サイトのページを確認してreCAPTCHAマークが表示されているか確認します。
reCAPTCHAが適用されるとアイコンが表示されます。
このアイコンを非表示にしたい場合は、下記のコードをCSSスタイルシートに記載します。
.grecaptcha-badge { visibility: hidden; }そして、アイコンを非表示にした場合は、下記のコードをContact Form 7を使用している固定ページに下記のコードを記載する必要があります。
このサイトはreCAPTCHAによって保護されており、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。これで、アイコンを非表示でも問題ありません。
このように、とても簡単にうっとおしいスパムメールが来なくなるため、ぜひやってみてください！
アイコンを表示するか表示しないかはお好みでどうぞ！
【WordPress】SANGOで使えるオススメのプラグイン 
