【Tips】Web制作者必須!! Contact Formを設置したら迷惑メールがたくさん来るのでreCAPTCHAを設定してみました

WordPressのContact Formで

お問い合わせページを設置するとスパムが

大量に届くのでreCAPTCHAを設定。

対処しておかないと迷惑メールだらけに。

Contact FormでreCAPTCHAの設定方法

コンタクトフォームのメニュー内にある

インテグレーションを開きます。

（警告やバージョンが古かったのでこの後更新しています。）

reCAPTCHAの項目があるので

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

サイトキーとシークレットキーが必要なので

詳しくはreCAPTCHAのリンクを新しいタブで

開きます。

画面内のRegistering a siteの所の

My reCAPTCHAをクリックします。

使うサイトの情報を入力します。

ラベルは自分が管理しやすい名称を入力します。

次にreCAPTCHA v3を選択します。

ドメインですがContact formを使うサイトの

ドメインを入力します。

このブログだと「pc.mogeringo.com」となります。

このドメイン指定を間違うと正常に動作しないので

しっかり確認します。

次に現在ログインしているGoogleアカウントに

紐づいているメールアドレスが表示されています。

利用条件に同意するにチェックして送信をおします。

もう一つのブログMissionViewerのお問い合わせに

設定をしてみました。

送信を押すとサイトキーとシークレットキーが

表示されるのでWordpressの管理画面で

このキーを入力します。

ちゃんと貼り付けたら変更を保存を

クリックします。

有効化されています。

と表示されれば設定は完了です。

お問い合わせページにこんな表示が出れば

正常に動作していますが、

どのページにもこの表示が出てしまいます。

その場合の対処にこれが表示されないように

するプラグインなどがありますが、

あまり多くのプラグインを導入するのも嫌なので

CSSだけで実装してみました。

【reCAPTCHAマークを必要な場所だけ表示する方法】

お問い合わせページのpost-idを確認します。

固定ページからお問い合わせページの編集を

開くとURLスラッグとは別にWordpress上の

PostIDがURLを確認すると表示されています。

私の場合はpost=60という事で

60がお問い合わせページのIDとなります。

カスタムCSSや追加CSSなどテーマ上に

下記のCSSを追加します。

.grecaptcha-badge {
visibility: hidden;
}

.page-id-60 .grecaptcha-badge {
visibility: visible;
}

これでIDの部分は実施のWordpress環境に

合わせて変更します。

これでお問い合わせページだけreCAPTCHAマークが

表示されるようになります。

reCAPTCHAを設定してみてスパムは減るのか

先ほど設定してみたので効果の程は分かりませんが、

その後経過してみて様子を見てみたいと思います。

最近ではURL添付なども多くなり、

こういうスパムは極力排除したいものです。

またWeb制作などクライアントに納品する場合には

必要な作業になるかも知れません。