Contact Form 7 で設定したreCAPTCHを導入しました

こんにちはクリンクスデザインです。

最近スパムのメールが届くというお問い合わせでreCAPTCHを導入したいというお客様が多いようです。

当サイトもそんなにスパム対策はしてはいなかったので、定番なプラグイン『Akismet』でしようかと思っておりましたが、せっかくだったので同じreCAPTCHを導入してみました。

reCAPTCH設定

まずはこちらの下記のリンクからログインしてみて下さい。
https://www.google.com/recaptcha/about/

グーグルでログインしたらこんな画面に移ります。

+ボタンを押してから設定のドメインを追加します。

・ラベル わかりやすい設定の名前(例:○○サイト)
・reCAPTCHv3にチェック
・ドメインを追加します(clinks-design.com)https://は削除して下さい
eCAPTCHA 利用条件に同意するにチェックする
・アラートをオーナーに送信するにチェックする

これで送信して設定完了です!簡単ですね。

※v2はContact Form 7の最新版では対応がされていない様子で、プラグインで導入をできるそうですのでv2使用されたい方はこちらからダウンロードしてみて下さい。
https://wordpress.org/plugins/wpcf7-recaptcha/

『サイトキー』と『シークレットキー』が発行されます。

これを、Contact Form7に追加していきます。

https://clinks-design.com/wp-content/uploads/2021/05/納品角細眼鏡+紺色-300x300.png
制作会社

こちらのキーはメモ帳かでコピーしといて下さい。ドメインを追加ですると複数のサイトでも使用できますよ

Contact Form7に追加方法

お問い合わせの箇所からインテグレーションという設定から追加します。

ここでは外部APIとの連携設定ができるので他にもキーを発行して設定ができますよ。

そして、ここの先ほどコピーしといたキーを貼付けしていきます。

これで、設定完了ですので動作をみてみましょうか。

そうなんです!

デフォルトだとこんな感じで上に戻るボタンと重なってしますのです。

ここで以下のコードを追加します

.grecaptcha-badge{
margin-bottom: 60px;
}

こちらを外観→テーマエディタ→style.cssに追加

か、もしくは

外観→カスタマイズ→追加CSSにコードをコピペで貼り付け

有料テーマ利用の場合はほとんどテーマエディタからではなく、TCDの場合だとテーマオプションから『基本設定』追加CSSの設定から行えます。他にも不安の方はプラグイン利用もオススメです。

オススメCSS追加プラグイン↓↓↓
『Simple Custom CSS』
まずは管理画面のインスト―ル画面を開き、プラグインの検索フォームで『Simple Custom CSS』と検索しましょう。

では、リロードして確認してみましょう。

いい感じですっきりしましたね。

まとめ

いかがでしたでしょうか?

今回は、WordPressのContact Form 7利用していて、スパムメールに困っている人向けに導入ができる「reCAPTCHA(v3)」ご紹介しました。

サイト制作してると開設と同時にお問い合わせフォームのカスタマイズをよくされる方も多く、その中でもスパム対策も同時にされたいというのも多い気がします。

サイトを運営しているとどこかのタイミングでやたらとスパムメール届くというの経験もあり是非こちらを活用して頂ければと思います。

では、また次回も楽しみにしていて下さい。

クリンクス デザイン

クリンクス デザイン

クリンクスデザインにようこそ。 ホームページ制作、運営代行、制作カスタマイズなどお客様の営業をホームページ活用面でサポートし、ビジネスパートナーとして重宝されるよう努めています。

関連記事

ログイン

 

会員のお客様は、こちらからログインしてください。

 

最近の記事

  1. 【国内最大WordPressテーマ 】素敵なサイトが構築出来る「TCD」テーマについて紹介致します。

  2. アフィリエイター必見のプラグイン!話題のPochipp(ポチップ)プラグインがすごい

  3. SWELLボックスメニューをスマホで表示させる方法

最近の記事 おすすめ記事
  1. 【国内最大WordPressテーマ 】素敵なサイトが構築出来る「TCD」テーマについて紹介致します。

  2. アフィリエイター必見のプラグイン!話題のPochipp(ポチップ)プラグインがすごい

  3. SWELLボックスメニューをスマホで表示させる方法

  1. 登録されている記事はございません。
TOP