reCAPTCHA v3を、WordPressのお問い合わせに導入する方法

ブログ
助手くん
助手くん
reCAPTCHA v3 を、WordPress のお問い合わせフォームに導入する方法を教えて!!

って疑問を、3ステップで解説します。

WordPress にはもともと、「Akismet Anti-Spam (アンチスパム)」というプラグインが、お問い合わせフォームを保護してくれています。

しかし今回紹介する「reCAPTCHA v3」を導入することで、さらに強力に保護することができるようになるんです。

というわけで今回は、reCAPTCHA v3をWordPressのお問い合わせフォームに導入する方法を、3ステップで解説します。

reCAPTCHA v3 を、WordPressに導入する方法【3ステップ】

それでは、WordPress の お問い合わせフォームに、reCAPTCHA v3 を導入する方法を解説します。

Contact Form 7」でお問い合わせページを設置していることを、前提としています。

それでは、さっそくはじめていきましょう。

【ステップ1】reCAPTCHAでアカウント登録する

ReCAPTCHA1

reCAPTCHA: Easy on Humans, Hard on Botsより引用

ステップ1では、reCAPTCHAでアカウント登録するところからはじめます。

まずは Google の、reCAPTCHA: Easy on Humans, Hard on Bots(https://www.google.com/recaptcha/intro/v3.html) にアクセスしてください。

画面右上の Admin console をクリックしてください。

ReCAPTCHA2画像:reCAPTCHA操作画面のキャプチャ

あらかじめ Google アカウントを取得していれば、reCAPTCHA v3 で「新しいサイトを登録する」画面にきりかわります。

  • ラベル:分かりやすい名前をつける
  • reCAPTCHA タイプ:reCAPTCHA v3にチェックをいれる
  • ドメイン:https:// をぬいたあなたのサイト URL
  • オーナー:何もいじる必要なし
  • reCAPTCHA 利用条件に同意する:チェックをいれる
  • アラートをオーナーに送信する:チェックをいれる

わたしは、こんな感じの設定にしました。それでは、送信 をクリックしてください。

ReCAPTCHA3画像:reCAPTCHA操作画面のキャプチャ

「登録されました。」の画面がでてきました。

ちなみに「2つのキー」は、メモ帳などにコピーして、貼り付けておいてください。ステップ3で、「サイトキー」「シークレットキー」が必要になります。

ここまでできたら、ステップ1は終了です。

【ステップ2】WordPressプラグインをインストールする

Invisible recaptcha wp1
画像:WordPressプラグインを追加画面のキャプチャ

ステップ2では、Wordpress プラグイン「Invisible reCaptcha for WordPress」をインストールします。

reCAPTCHA を WordPress に導入する方法は、プラグインがいちばん簡単だと思います。下記のリンクボタンもしくは、WordPress のダッシュボード画面のプラグインから、「Invisible reCaptcha for WordPress」をインストールしてください。

ここまでで、ステップ2は終了です。

【ステップ3】お問い合わせフォームにreCAPTCHA v3 を設置する

Invisible recaptcha wp2

さいごのステップ3では、お問い合わせフォームに reCAPTCHA v3 を設置していきます。

WordPress のダッシュボードで、設定Invisible reCaptcha をクリックしてください。

Invisible recaptcha wp3
画像:「Invisible reCaptcha for WordPress」操作画面のキャプチャ

Settings をクリックして、下記のように設定します↓

  • Your Site Key:サイトキーを入力
  • Your Secret Key;「シークレットキーを入力」
  • Language:いじる必要なし
  • Badge Position:Inline
  • Badge Custom CSS:いじる必要なし

ここで先ほどメモした2つの「キー」が、必要になります。

設定がおわったら、変更を保存をクリックしてください。

つづけて、WordPress のサイドバー お問い合わせ をクリックして、Contact Forms 7 を開いてください。

ReCAPTCHA integ1

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

インテグレーションのセットアップ をクリック。

ReCAPTCHA integ2

セットアップ画面で、「サイトキー」「シークレットキー」を入力して、設定を保存してください。

という話感じで、お疲れ様でした!

ここまでの作業であなたの WordPress に「reCAPTCHA v3」が導入されているはずです。

ReCAPTCHA mail

こんな感じで、お問い合わせフォームに追加されていれば OK です。

これで、reCAPTCHA v3 を、WordPress のお問い合わせフォームに導入する方法の解説はおわりです。

チェックが入っていると、送信できない現象が...

ReCAPTCHA integ3

なぜか Enable Protection for Contact Form 7 にチェックが入っていると、送信できない現象が発生しました。

チェックを外せば、送信できるようになりました。

Contact Form 7 場で、セットアップしているので「reCAPTCHA」は実行されているはずです。

原因については、今後も検証していきます。

reCAPTCHAバッジが、スマホで常に表示されてしまう

ReCAPTCHA logo

こんな感じでreCAPTCHA を導入すると、常にスマホに reCAPTCHA バッジが表示されるようになってしまいます。保護されていることが一目でわかるので安心感がありますね。

ただデザインによってはスマホのトップへ戻るボタンなどとかぶり、ユーザー体験を損なう可能性があります。このバッジを非表示にする方法が、公式にありますので紹介します↓

reCAPTCHA バッジを非表示にする方法

reCAPTCHA バッジを非表示にするコード

.grecaptcha-badge { visibility: hidden; }

を非表示にするには、上記コードを CSS に追加してください。

このコードは、よくある質問| reCAPTCHA | Google Developers にのっている公式の方法になります。

ただし、バッジを非表示にするためには条件があるんです↓

非表示にするための条件

バッジを非表示にするために必要なコード

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.

reCAPTCHA のバッジを非表示にするためのコードを、お問い合わせフォームのユーザーが見える場所に書くようにしてください。

こちらも、「よくある質問| reCAPTCHA | Google Developers」に掲載されていますので、ご確認ください。

ちなみに、当ブログでの導入場所について、参考例を掲載させていただきます↓

非表示の参考例

ReCAPTCHA contact

当ブログの問い合わせページの 送信 ボタンの下に、バッジを非表示にするためのコードをつけてみました。送信まえにみえるところなので、ここがベストかもしれません。

ReCAPTCHA contact2

Contact Form 7の場合は、フォームの編集画面にて [submit "送信"] の下にバッジを非表示するために必要なコードを貼り付けました。

クラス名や、文言の CSS などは、つづけて紹介させていただく「参考にさせていただいた記事」を、ごらんください↓

参考にさせていただいた記事

参考記事1:【Google公認】reCAPTCHA v3のバッジ(ロゴ)をコピペで簡単に非表示

参考記事1では、バッジを消す方法について参照させていただきました。くわしいCSS表記などは、参考記事をごらんください。

参考記事2:スパム対策のreCAPTCHA v3をWordPressに導入するならプラグインが簡単で便利

参考記事2では、reCAPTCHA v3 の導入方法について、参考にさせていただきました。適用させるフォームの選択設定で、問い合わせのみ reCAPTCHA v3 対応する場合とは違っていたため、今回記事を書かせていただきました。

reCAPTCHA v3 を導入するにあたって、とても助かりましたので、ぜひこちらの記事もあわせてご覧いただけましたら幸いです。

まとめ

Recaptcha ok

reCAPTCHA V3 を、WordPress のお問い合わせフォームに導入する方法を、解説しました。

bot(ボット)による入力フォームのスパム防止対策として、効果がたかそうなので私もいれてみました。

いやぁ〜実際にいれてみると、思っていた以上に動作がサクサク動きますし、簡単に導入できたのでおどろいております。笑

さてさて。この記事が、reCAPTCHA V3 導入が、ちょっと分かりづらいかも?なんて思っているかたを、救えたらうれしいです。

また reCAPTCHA も常にバージョンアップしているため、掲載している内容が記事掲載時のもので古くなっている可能性もあります。導入の際には、ヘルプなど各自で確認するようにしてください。

そのほか、ブログツールに関する記事は、こちらもあわせてごらんください↓

サウンドオルビス

4,902,803 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事