This page is also available in English.
[編集: 2015-09-17] Contact Form 7 4.3 以降では Really Simple CAPTCHA に代えて reCAPTCHA の使用を推奨します。詳しくは Contact Form 7 4.3 を参照。
Contact Form 7 ではボットによるフォーム送信を防ぐ CAPTCHA の利用が可能です。Contact Form 7 は公式 CAPTCHA モジュールとして Really Simple CAPTCHA を採用しており、そのため CAPTCHA 導入の前に Really Simple CAPTCHA プラグインをインストールする必要があります。
以下、Really Simple CAPTCHA がすでにインストールされているという前提で、Contact Form 7 での CAPTCHA の使用について説明します。
CAPTCHA を使う前に
Really Simple CAPTCHA は PHP の GD ならびに FreeType ライブラリを CAPTCHA 画像の作成のために必要としますので、それらがサーバーにインストールされていることが必要です。インストールされているかどうか不確かな場合はサーバー管理者に問い合わせてください。
Contact Form 7 は一時フォルダを作成してそこに CAPTCHA のファイルを保持します。ほとんどの場合、この一時フォルダの場所は wp-content/uploads/wpcf7_captcha になりますが、設定によっては違う場所になることがあります。
このフォルダの作成は自動で行われますが、まれに作成に失敗する場合があります。最もありがちな原因はその親フォルダに対して必要な書き込み権限が与えられていないことです。そのような場合は、権限を変更するか、フォルダを手動で作成します。
CAPTCHA の使い方
CAPTCHA をコンタクトフォームに追加するには captchac と captchar のフォームタグを使います。
captchac は CAPTCHA-Challenge の意味で、CAPTCHA 画像の <img> 要素を表現します。captchar は CAPTCHA-Response の意味で、レスポンス入力項目の <input type="text"> 要素を表現します。
captchac タグは同じ名前を持つ captchar タグと対になっている必要があります。例えば次に示すタグは有効です:
[captchac captcha-1] [captchar captcha-1]
しかし、次の例はそれぞれ異なる名前を持っているので有効ではありません。このケースでは、CAPTCHA とそれに対するレスポンスがマッチすることはありません:
[captchac captcha-2] [captchar captcha-3]
CAPTCHA-Challenge
captchac は CAPTCHA-Challenge の意味で、CAPTCHA の画像 (HTML における <img>) を表現します。
| オプション | 使用例 | 説明 |
|---|---|---|
id:(id) | id:foo | img 要素の id 属性値。 |
class:(class) | class:bar | img 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [captchac your-captcha class:y2008 class:m01 class:d01] のようにして並べる。 |
size:(sml) | size:s | 画像のサイズ。size:s (60×20)、size:m (72×24)、size:l (84×28) のみ利用可能。 |
fg:#(hex) | fg:#ff0000 | 画像の文字色。fg:# の後に 16 進数表記の RGB カラーコードを指定する。 |
bg:#(hex) | bg:#00ffff | 画像の背景色。bg:# の後に 16 進数表記の RGB カラーコードを指定する。 |
例:
[captchac your-captcha size:s fg:#ffffff bg:#000000]
CAPTCHA-Response
captchar は CAPTCHA-Response の意味で、CAPTCHA のレスポンス入力項目 (HTML における <input type="text">) を表現します。
| オプション | 使用例 | 説明 |
|---|---|---|
id:(id) | id:foo | input 要素の id 属性値。 |
class:(class) | class:bar | input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [captchar your-captcha class:y2008 class:m01 class:d01] のようにして並べる。 |
例:
[captchar your-captcha]
デモ
注意: これはデモです。このフォームが実際にメールを送信することはありません。
上のフォームのソース:
1) Default
Input this code: [captchac captcha-170]
[captchar captcha-170 4/4]
2) Small size, inverted
Input this code: [captchac captcha-778 size:s fg:#ffffff bg:#000000]
[captchar captcha-778 4/4]
3) Large size, green text
Input this code: [captchac captcha-118 size:l fg:#00ff00 bg:#ffffff]
[captchar captcha-118 4/4]
[submit "Send"]