ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeWordpress「ContactFrom7にreCaptchaを設定する」の記事

ContactFrom7にreCaptchaを設定する

ウサヲです。

コンタクトフォーム7を使ってお問い合わせなどを設置するときに、スパム対策としてreCapchaというツールがあります。それをメモします。

1 管理画面>お問い合わせ>インテグレーション

スクリーンショット 2016-06-29 15.33.06

この画面の右上の青いリンクをクリックします。

2 reCaptchaのトップ画面が出ます。「Get reCAPTCHA」というボタンがあるので、クリックしてご自分のgoogleIDでログインします。で、もう一回「Get reCAPTCHA」が出てくると思うので、それをクリック。

3 サイトの情報をレジスタ(登録)します。

スクリーンショット 2016-06-29 15.38.56

Label:ただのラベルなので、なんでも良いので分かりやすい名前で。

Domains:ドメインを書きます。ローカルの場合は、local.xxxxxで良いです。

Registerをクリック。

すると、「サイトキー Site key」と「シークレットキー Secret key」が上の方に表示されますので、それを1の画面に戻ってで入力します。(戻った時には「サイトキー」と「シークレットキー」の欄が表示されています)

4 同じ画面に、英文ですが、以降の設定が書かれています。が、以下のスクリプトを <head>タグの中に追記します。<?php wp_head(); ?>の直前に書きました。

<script src='https://www.google.com/recaptcha/api.js'></script>

その他、いろいろごちゃごちゃ書いてありますが、これだけで設定完了、のはずです。

5 管理画面>お問い合わせに戻り、自分のコンタクトフォームをクリックし、フォームの内容のどこかにreCaptchaボタンを挿入します。(本文の上にreCaptchaボタンが配置されています)すると、以下のタグ生成画面が出るので、後々のcss編集のためにIDとClassを設定しておきましょう。その他はデフォルトでやりました。

スクリーンショット 2016-06-29 15.51.24

6 保存して、コンタクトフォームのショートコードをいつものように貼りたいページにペッと貼り付けたら完成。

スクリーンショット 2016-06-29 15.56.15

こんな感じでチェックを通りました。

ちなみに、ローカルでのテストをしているため、コンタクトフォームのその他の設定にて、demo_mode: onになっています。

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP