Really Simple CAPTCHA

[編集: 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-contents/uploads/wpcf7_captcha になりますが、設定によっては違う場所になることがあります。

このフォルダの作成は自動で行われますが、まれに作成に失敗する場合があります。最もありがちな原因はその親フォルダに対して必要な書き込み権限が与えられていないことです。そのような場合は、権限を変更するか、フォルダを手動で作成します。

また、以下のように wp-config.php 内で WPCF7_CAPTCHA_TMP_DIR 定数を指定して一時フォルダのパスを設定することも可能です:

define( 'WPCF7_CAPTCHA_TMP_DIR', '/your/file/path' );

WPCF7_CAPTCHA_TMP_DIR が定義されている場合は、指定されたディレクトリが一時フォルダとして使われます。

CAPTCHA のファイルのための一時フォルダが存在し、また書き込み可能であることをよく確認してください。そうでない場合は CAPTCHA の作成ができません。

CAPTCHA の使い方

CAPTCHA をコンタクトフォームに追加するには captchaccaptchar のフォームタグを使います。

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>) を表現します。

captchac で利用可能なオプション
オプション 使用例 説明
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">) を表現します。

captchar で利用可能なオプション
オプション 使用例 説明
(サイズ)/(最大長) 40/100
20/
/50
フィールドのサイズと最大長。片方を省略することも可能。
id:(id) id:foo input 要素の id 属性値。
class:(class) class:bar input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [captchar your-captcha class:y2008 class:m01 class:d01] のようにして並べる。
placeholder
watermark
値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。

例:

[captchar your-captcha 40/100]

デモ

注意: これはデモです。このフォームが実際にメールを送信することはありません。

1) Default
Input this code: captcha

2) Small size, inverted
Input this code: captcha

3) Large size, green text
Input this code: 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"]

Just another contact form plugin for WordPress. Simple but flexible.