デザインブログ、SOKOLABOのソコラボのソコです！
ワードプレスでホームページを作る際、お問い合わせフォームの設置には利便性の高いコンタクトフォーム７（Contact Form7）を使っている人は多いと思います。
そんなコンタクトフォーム７から大量のスパムメールが届いてしまい、お困りの方も多いのではないでしょうか。
大量に届くメールは処理も大変ですし、ウィルスに感染するリスクも怖い所です。
そんなコンタクトフォーム７をスパムメールから守る為のプラグインがgoogleが無料で提供する「reCAPTCHA v3」です。
簡単な設定ですぐに実装できるので今日はプラグイン「recapTcha v3」の実装方法について紹介していきますね！
スパム対策のプラグイン「reCAPCHA v3」とは
前述のとおり「reCAPTCHA v3」はgoogleが提供するスパム対策の無料プラグインです。
これを設置する事で、Contact Form7から送られるメールが人間がbotなのかを自動で判別し、事前にスパムメールをブロックしてくれるので、迷惑メールの軽減が期待できます。
一度設置をしてしまえば、以降こちらで特にする事もありせんし、コンタクトフォームと連携しているプラグインの為、実装も割と簡単な操作で行うことができます。
「reCAPTCHA v3」実装の流れ
さて、それでは手順をご説明します！
まずは大まかな流れをざっと書きますね★
流れは3ステップ
- reCAPTCHAのページからAPIキーを取得
- コンタクトフォーム７にAPIキーを入力
- HPに不要なマークが表示されるので非表示にする
それではそれぞれ解説
じゃっ行ってみよか！
1:reCAPTCHAのページからAPIキーを取得
reCAPTCHA v3をコンタクトフォーム７を設定するにはまず、reCAPCHAのページからAPIキー（IDみたいなもの）を取得する必要があります。
なのでまず下記reCAPTCHAページにアクセスしてAPIキーを取得しにいきましょう。
https://www.google.com/recaptcha/admin/create
ページにアクセスすると下記のキーから設定するページの情報の登録を行います。
設定項目は３つ
1:ラベル
名前はなんでもOKです、自身がわかりやすい名前を付けましょう
2:reCAPTCHAタイプ
v3を選択します
3:ドメイン
設定したいホームページのドメインを入力します。
設定するとドメインとドメイン配下のページ全てに適用されます。
例）~.com/homepage1/という下層ディレクトリに作ったページにも適用
上記３つを設定して送信ボタンを押すと下記ページに移動し、２つのAPIキーが表示されます。
これらは後々必要になるので、このページを開きっぱなしにするかメモっておきましょう。
2:コンタクトフォーム７にAPIキーを入力
APIキーの取得が完了したら、ワードプレスを開き、コンタクトフォーム7(お問い合わせ)から「インテグレーション」を選択、さらにreCAPTCHAの項目があるのでそれも選択します。
するとさっきreCAPTCHAのページで取得したAPIキーを入力する画面がでるので、入力し変更を保存します。
さっきのインテグレーションの画面を確認し「reCAPTCHA はこのサイト上で有効化されています。」と表示されていれば導入は成功です
3:HPに不要なマークが表示されるので非表示にする
「２」までを行えばプラグインの導入は完了です。
が、このままだとホームページの画面右下に図のようなマークがでてきます。
これはreCAPTCHAを導入すると表示される保護マークです。
googleの規約上、表示させる必要があるとのこと。
ですがデザイン的にも気になりますし、他のボタン等に干渉してしまう可能性もある為困りますよね。
そんな時は以下の条件と方法でマークを非表示にする事ができます。
保護マークを非表示にする条件と方法
reCAPTCHAのマークはユーザーへの通知義務がある為、勝手に消すことはNGなんですが、以下の条件で非表示にしてもOKです。
条件はサイトのどこかに「日本語」か「英語」で以下の一文を表記する事です。
「日本語」
「本サイトはreCAPTCHAによって保護されています。Googleのプライバシーポリシーと利用規約
「英語」
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Google公式のFAQのページ（英語）
https://developers.google.com/recaptcha/docs/faq
これをどこかに表記してください。
個人的に収まりが良いと思うのはお問合せページのあたりでしょうかね！
非表示にCSSを記述する
一文を記載したら、マークを消すためのCSSを記述します。
記述は以下
.grecaptcha-badge { visibility: hidden; }
これを追加CSSでもCSSを記述するどこでも良いので記述しましょう。
すると消えるはずです！
もろもろで設定は全て終了！
お疲れ様でした！
ワードプレス外のページでの設定も少しある為、導入は一見とっつきずらそうな感じもしますが、慣れれば10分くらいでサクサク導入できると思います！
HPの運用上スパムメール対策は必ず必要です。
ワードプレスでサイトを作る方は簡単に実装でいるので是非とも活用してみてくださいね！
それでは★
