reCAPTCHA

Contact Form 7 は Akismet によるスパムフィルタリングをサポート。賢い reCAPTCHA はうっとうしいスパムボットをブロックしてくれます。

Contact Form 7 日本語マニュアル『reCAPTCHA』
マニュアルサイトの画像が少し古いようなので補足してみます。
Googleアカウントを用意しておきます。

reCAPTCHA 管理ページ

reCAPTCHA 管理ページ
クリックすると別ページ(タブ)でGoogleの管理ページが開きます。

最初はこんな感じです。
タイプを選択してやると次の画像になります。

 

少し項目が増えましたね。
『Label』と『Domains』にはサイトURLの『http(s)://』を抜いたものを入れます。
サブドメイン例:subdomain.example.com

『Choose the type of reCAPTCHA』でタイプを選択します。
[reCAPTCHA v2]の場合は黄色枠になります。

『Accept the reCAPTCHA Terms of Service.』に[✓]を入れて、Registerをクリックします。

 

画像は少し省略していますが、必要なのは赤枠の2つのキーだけです。
Site key と Secret key をエディットにメモっておきます。

 

ダッシュボード

ダッシュボード側の操作です。

インテグレーション

「ダッシュボード>お問い合わせ>インテグレーション」をクリックします。
サイトキー:Site key の文字列をコピペ
シークレットキー:Secret key の文字列をコピペ
保存をクリックします。
画像下のようになれば終了です。

 

コンタクトフォーム

「ダッシュボード>お問い合わせ>コンタクトフォーム」をクリックして、『reCAPTCHA』を使用したいフォームの『フォーム』本文の[編集、確認、送信]の前の行にカーソルを置いてreCAPTCHAボタンを押します。

 

フォームタグ生成画面が出るので、タグを挿入をクリックします。
画像下のように挿入されました。

 

実装例が下です。
確認ボタンの上に実装され、クリックすると画像選択画面が表示されます。

 

reCAPTCHA 補足

1つのGoogleアカウントで複数のreCAPTCHAを登録できます。
下図は2つのreCAPTCHAを登録したものです。
(1)最初に1つめを登録します。
(2)1つめのメインサイト用です。
(3)2つめのサブドメイン用です。
(2)、(3)どちらも行をクリックすると詳細画面に移動します。

 

詳細画面の『Keys』の前の三角をクリックするとキーが表示されます。
リスト画面に戻るには赤枠をクリックします。

 

わたしが少し戸惑ったのは、サブディレクトリの場合です。
どちらも、使い回しでOKでした。
example.com/sub → example.comのキー。
subdomain.example.com/sub → subdomain.example.comのキー。