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

WordPressのContact Formで

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

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

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

contactform11

目次

Contact FormでreCAPTCHAの設定方法

contactform1

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

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

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

contactform2

reCAPTCHAの項目があるので

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

contactform3

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

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

開きます。

contactform4

画面内のRegistering a siteの所の

My reCAPTCHAをクリックします。

contactform5

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

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

次にreCAPTCHA v3を選択します。

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

ドメインを入力します。

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

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

しっかり確認します。

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

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

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

contactform6

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

設定をしてみました。

contactform7

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

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

このキーを入力します。

contactform8

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

クリックします。

contactform9

有効化されています。

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

contactform10

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

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

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

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

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

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

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

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

contactform12

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

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

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

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

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

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

contactform13

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

下記のCSSを追加します。

.grecaptcha-badge {
visibility: hidden;
}

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

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

合わせて変更します。

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

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

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

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

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

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

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

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

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

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメント一覧 (1件)

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次