-お勉強本と雑記と備忘録のブログ-

Google reCAPTCHA v3 を導入しました

お問合せフォームで reCAPTCHA

ロリポップから、「お問合せフォームの自動返信機能が悪用される危険があるのでなんとかせい」とお達しがありました。

なんてこったい、いつの間にか人様に迷惑メールを送りつけ、自分がブラックリストに入れられているかもしれないなんて。。。

reCATCHA-ロリポップからのお達し

再掲ってことは、前にも掲示されていたのね。。。再掲ですら読んだのは1か月後という。。。

遅いぞ私!

「今からでも何とかしとかないと!」ということで、「reCAPTCHA v3」の設定をしました。さらに「承諾確認」チェックボックスもつけました。

というわけで、せっかくreCAPTCHA v3 を導入したので、記録として残しておこうと思います。

使用しているプラグイン

  • Contact Form 7
  • Simple Custom CSS and JS

プラグインがあればなんでもできる(← 言い過ぎ)

そもそも reCAPTCHA って何?

reCAPTCHAとは、「ぐねぐね曲がった字」や「私はロボットではありません。○○の画像をすべて選んでください」というアレです。

しかしながら、私はこの名称を知りませんでした。思いっきり「reCAPTCHA」って書いてあるのに、まったく見えてませんでした。何かのセキュリティのためなのだろうぐらいに思いながら、「字読まれへん…」「ロボットちゃうし!写真小っさ!どれやねん!」って言いながら作業してました。

ちなみに「reCAPTCHA v3」は、こういう作業をさせられないのだそうです。よかったです(自分が)

reCAPTCHA v3 の設置手順

参考にさせていただくサイトが見つかりましたので、いざ!

参考記事
Google reCAPTCHA v3の導入とContact Form7への設定方法 完全ガイド 2020年版

① Google reCAPTCHAに自分のサイトを登録

  • 「サイトキー」と「シークレットキー」を発行してもらいます。キーの取得・管理
  • 手持ちのGメールアドレスを使ってログインし、サイト名などを入力して「送信」ボタンを押すと、キーが発行されます。
reCATCHA-キー発行

② Contact Form 7の設定画面にキーを貼り付ける

  • 「お問い合わせ」→「インテグレーション」を開き、reCAPTCHAの方の「インテグレーションのセットアップ」のボタンを押し、発行された「サイトキー」と「シークレットキー」を貼り付けます。
  • キー貼付け後、再び表示してみると、有効化されています。
reCATCHA-キー貼り付け後

③ コンタクトフォームを編集する

  • 「お問い合わせ」→「コンタクトフォーム」を開き、既に作成されているコンタクトフォームの編集画面を開きます
  • 「送信ボタン」の上に「承諾確認」チェックボックスの文言を記述します。(上に並んでいるボタンを使っても入れられます)
  • 「送信ボタン」の下に「reCAPTCHA」の文言を記述します。(※参考記事からコードをいただきました
reCATCHA-フォーム記述
reCATCHA-フォーム表示

④ CSSを記述する

  • Simple Custom CSS and JSでCSSを記述します。(※参考記事からコードをいただきました
  • 画面の右下に出てくるreCAPTCHAのバッジが非表示になり「上に戻る」ボタンが使えるようになりました。
reCATCHA-CSS記述

以上、これでロリポップからのお達しに従うことができました。

一昔前は、自分のサイトを持つなんて、一部のネットに詳しい人しかできない世界だったはず。
今は、私のようなWeb素人でも、詳しい人の知識を拝借しながら、なんとか手探りでやっていけます。感謝感謝です。。。

0
コメント (4)
  1. KYO より:

    そもそもお問合せフォームなんてあったっけ?

    1. ぞん より:

      KYOさん、コメントありがと。
      フッターに「お問い合わせ」ありますってば(笑)

      1. KYO より:

        フッターか!
        そりゃ盲点だったw

      2. ぞん より:

        スマホだとだいぶ下になっちゃうからね~