【簡単スパム対策】Contact Form 7でreCAPTCHAを導入する方法 | 株式会社LIH(エルアイエイチ)

【簡単スパム対策】Contact Form 7でreCAPTCHAを導入する方法

WEBサイトのお問い合わせフォームから毎日大量に届くスパムメール…
対策のために検索すると必ずといっていいほど目にする”reCAPTCHA”

名前から察するに導入するのが難しそう…と思われる方もいらっしゃるかもしれません。

今回はワードプレスのプラグインContact Form7を使っている方に向けた”reCAPTCHA”の簡単な導入と設定の方法をご紹介します。

1.reCAPTCHAとは?

reCAPTCHAとはGoogleが無料で提供している、bot・スパム対策のツールで、悪質なアクセスからWebサイトを守るためのサービスです。
詳しくご説明すると、WEBサイトのメールフォームやブログなどのコメントの入力時に、botによる自動的なものではなく、人間が入力したことを証明させるための技術です。

Webサイトをよく利用する方であれば、一度は目にしたことがあるかもしれません。

WEBサイトに表示されるreCAPTCHAのロゴマーク

「私はロボットではありません」と記載されたチェックボックスや、Webサイトの右に下に表示される「reCAPTCHAで保護されています」こういったものがreCAPTCHAの仕組みの一部になります。

2.reCAPTCHA v3の導入手順

reCAPTCHAを導入するにあたって必要なものは以下の2点!

導入に必要なもの

・contact form7で作成したフォーム
・Googleのアカウント

これらの用意ができたら、まずはreCAPTCHAのサイトにアクセス。

reCAPTCHA公式サイトのWEB画面

画面右上にある「v3 Admin Console」からrecaptchaの登録画面に入ります。

recaptchaの登録画面

ラベルには管理しやすいように分かりやすい名前をつけておきましょう。
(例)サイト名、ドメイン名 など

recaptchaタイプは「recaptcha v3」にチェックを入れてください。

ドメインにはreCAPTCHAを設置したいサイトURLのドメイン部分を入力します。
(例)sample.co.jp/contactのページに設置したい場合は「sample.co.jp」と記入

最後に「利用条件に同意する」にチェックを入れて「送信」をクリックしてください。

recaptchaサイトキーの画面

登録が完了するとサイトキーシークレットキーが表示されますので、こちらをメモしておきましょう。
後ほどこの2つのキーを使用します。

3.実装方法

続いて、contact form7にreCAPTCHAを実装します。

ワードプレスのダッシュボード画面

ワードプレスのダッシュボードからお問い合わせ → インテグレーションを開きます。
画面を開いたらreCAPTCHAのインテグレーションのセットアップをクリック。

reCAPTCHAインテグレーションのセットアップ画面

先ほどメモしたサイトキーシークレットキーをこちらに入力して保存してください。
Webサイトの右下にreCAPTCHAのロゴマークが表示されていたら設定完了です!

4.ロゴマークの位置調整

右下といえば、多くのWebサイトで「トップに戻る」ボタンのアイコンが表示されている場所…

webサイトに表示されたreCAPTCHAのロゴマーク

reCAPTCHAのロゴマークがこういったコンテンツと被ってしまった場合、「.grecaptcha-badge」のbottomの数値をスタイルシートに上書きすることで位置を調整することができます。

reCAPTCHAのロゴマークの位置調整

.grecaptcha-badge { bottom: 65px!important; }

ご自身のサイトに合わせて数値を変更して調整してみてください。

5.ロゴマークの非表示

右下にひっそり表示されているとはいえ、なかなか邪魔な位置にあるこのロゴマーク。
非表示にしたいという方もいらっしゃるかと思います。
そんな時はGoogle公認の方法で非表示にしましょう。

まずはGoogleのQ&Aのページをご覧ください。

GoogleのQ&Aページ画面

フォームのあるページにを記載すれば非表示にすることができる、とのこと。

GoogleのQ&Aページからのコードをコピーし、contact form7の編集画面から追加。
今回は日本語に翻訳したものを挿入しました。

Gcontact form7の編集画面

仕上げにのコードをスタイルシートに上書きすると、ロゴマークの非表示が完了します。

.grecaptcha-badge { visibility: hidden; }

GoogleのQ&Aページ画面

6.reCAPTCHAが表示されない?

サイトキーとシークレットキーに間違いはないはずなのに、なぜかreCAPTCHAのロゴマークが表示されない…

そんな方に試して頂きたいのは、ワードプレスのバージョンアップcontact form7のプラグインの更新です!
バージョンが古いままreCAPTCHAを設定したところ、ロゴマークが表示されないというケースが多々ありました。
一度更新した後、再度reCAPTCHAの設定を行うと無事に表示されることが多いです。

それでも表示されないという方は以下をお試しください。

表示箇所が他の要素と重なっていないか確認をする
reCAPTCHAのロゴマークと「トップに戻る」ボタンの要素が重なっており、reCAPTCHAのロゴマークがボタンの下に潜り込んでいて表示されないケースがあるようです。
.grecaptcha-badgeのz-indexを重なっている要素より大きく設定し、ロゴマークの位置調整を行うことで表示できます。

「wp_footer();」の書き忘れ
自作テーマにありがちですが、フッターに「wp_footer();」を記入するのを忘れると、プラグインが正常に動かないことがあります。こちらも確認してみましょう。

6.まとめ

今回はcontact form7を使用している方に向けたreCAPTCHAの導入手順についてご紹介しました!
簡単に設定することができますので、スパムメールに困っている方にぜひ参考にして頂きたいです。

一覧へ戻る

最新記事

GMOフリーナンス
メイクショップ
BASE
Paid

おすすめ記事はこちら

最新記事

メイクショップ
GMOフリーナンス
Paid
BASE

お問い合わせ

資料ダウンロードはこちらから

お問い合わせイメージイラスト

お問い合わせ・資料ダウンロードはこちらから

頂いたお問い合わせに出来るだけ迅速に(24時間以内)に返信します。知識豊富な専門のスタッフが親切・丁寧にお答えしますので、お気軽にお問い合わせください。

LIHが運営する
お役立ちブログ配信中
Staff blog

LIHの最新情報や、耳よりなセミナー情報、webに関するノウハウをブログ形式でお届けします。
ぜひご覧ください。

ブログ一覧を見る

各種SNSはこちら Social media

  • 株式会社LIH 公式Facebook

    Facebookいいねボタン

    FaceBookにて最新情報や新着情報を配信しています。

  • 株式会社LIH 公式Twitter

    Twitterフォローボタン

    Twitterにて最新情報や新着情報を配信しています。

  • 株式会社LIH 公式Instagram

    Instagramフォローボタン

    Instagramにて制作実績情報を中心に配信しています。

  • 株式会社LIH LINE公式アカウント

    友達追加ボタン

    LINEにて最新情報や新着情報を配信しています。

  • 株式会社LIH 公式Youtubeチャンネル

    チャンネル登録ボタン

    Youtubeにて、Webに関する豆知識をわかりやすい動画でご紹介しています。