1. HOME
  2. ホームページ作成の小技
  3. WordPressのプラグイン「Invisible reCaptcha for WordPress」で、お問合せフォーム(Cont…

TECHNIQUES

ホームページ作成の小技

東京のさくっとホームページのHP制作の小技

WordPressのプラグイン「Invisible reCaptcha for WordPress」で、お問合せフォーム(Contact Form7)に、reCAPTCHA v3 を導入し、スパムボットによる迷惑メール送信を遮断しよう —東京|さくっとHP制作

WordPressのプラグイン「Invisible reCaptcha for WordPress」で、お問合せフォーム(Contact Form7)に、reCAPTCHA v3 を導入し、スパムボットによる迷惑メール送信を遮断しよう —東京|さくっとHP制作

2018年10月29日にGoogleからreCAPTCHAの新バージョンreCAPTCHA v3が正式公開されました。

旧バージョンのv2では、[私はロボットではありません]とか道路標識や店舗の写真をクリックしたりしていましたが、reCAPTCHA v3は閲覧者のページ内での行動をスコアとして評価してボットかどうかを自動に判別する為、ホームページ閲覧者は面倒な操作をする必要が一切ありません。

いつの間にか、めちゃくちゃ便利になってました!

WordPressのプラグイン「Invisible reCaptcha for WordPress」で、お問合せフォーム(Contact Form7)に、reCAPTCHA v3 を導入し、スパムボットによる迷惑メール送信を遮断してみましょう!

 

「Google reCAPTCHA v3」登録手順

Googleにログインして、reCAPTCHAにアクセスします。

→ reCAPTCHA https://www.google.com/recaptcha/admin/create

 

[ラベル]に適当に名前を、[reCAPTCHA タイプ]はreCAPTCHA v3を選択、[ドメイン]に設置したいホームページのドメイン名を入力します。

[ラベル]に適当に名前を、[reCAPTCHA タイプ]はreCAPTCHA v3を選択、[ドメイン]に設置したいホームページのドメイン名を入力します。

 

[reCAPTCHA 利用条件に同意する]にチェックを入れて、[送信]ボタンをクリックします。

 

サイトキーとシークレットキーが発行されますサイトキーとシークレットキーは、後ほどプラグインの設定で必要ですので、メモ帳などにコピペして控えておきます。

サイトキーとシークレットキーが発行されますサイトキーとシークレットキーは、後ほどプラグインの設定で必要ですので、メモ帳などにコピペして控えておきます。

 

WordPressのプラグイン「Invisible reCaptcha for WordPress」プラグイン導入手順

ダッシュボードから、[プラグイン]→「新規追加」を選択します。

ダッシュボードから、[プラグイン]→「新規追加」を選択します。

 

プラグイン追加画面右上の検索欄に「Invisible reCaptcha for WordPress」と入力し検索します。

プラグイン追加画面右上の検索欄に「Invisible reCaptcha for WordPress」と入力し検索します。

 

[今すぐインストール]ボタンをクリックします。

[今すぐインストール]ボタンをクリックします。

 

インストールが完了したら、[有効化]ボタンをクリックします。

インストールが完了したら、[有効化]ボタンをクリックします。

 

WordPressのプラグイン「Invisible reCaptcha for WordPress」の使い方

ダッシュボードから、[設定]→「Invisible reCaptcha」を選択します。

ダッシュボードから、[設定]→「Invisible reCaptcha」を選択します。

 

GoogleのreCAPTCHAで取得した[サイトキー]と[シークレットキー]を入力し、[Language]でJapanese、[Badge Position] lnlineを選択します。

GoogleのreCAPTCHAで取得した[サイトキー]と[シークレットキー]を入力し、[Language]でJapanese、[Badge Position] lnlineを選択します。

 

お問合せフォーム(Contact Form7)に、表示されるように設定します。Contact Formsをクリックし、[Enable Protection for ContactForms7]にチェックを入れます。

お問合せフォーム(Contact Form7)に、表示されるように設定します。Contact Formsをクリックし、[Enable Protection for ContactForms7]にチェックを入れます。

 

[変更を保存]ボタンをクリックします。

[変更を保存]ボタンをクリックします。

 

こんな感じで表示されます。

、reCAPTCHA v3 を導入例

 

※スタイルシートで中央表示されるように下記コードを記述しています。