[submit]

さらに、これに値を追加できます:

[submit "メール送信"]

submit タグの構文が他のフォームタグのそれと少し違っていることに気づきましたか? submit タグには、他のフォームタグにある名前のパートがありません。

これに加えて、いくつかのオプションを submit タグに追加できます。

例:

[submit class:button id:form-submit "メール送信"]

[A] 基本的なヘッダー項目 (To、From、Subject):

これらは基本的かつ必要なメッセージヘッダー項目です。これらの項目のどこにでもメールタグの埋め込みが可能です。

[B] メッセージ本文:

メッセージの本文です。この項目のどこにでもメールタグを埋め込むことができます。

[C] 追加ヘッダー:

ここに追加のメッセージヘッダー項目 (Cc や Bcc など) を挿入することができます。1行につき1項目を入力してください。この項目のどこにでもメールタグを埋め込むことができます。

[D] ファイル添付:

アップロードされたファイルをこのメールに添付する場合は、この項目にアップロードされたファイルに対応するメールタグを置いてください。

[E] HTML の使用:

デフォルトではメッセージ本文にはプレーンテキストが使われます。HTML を使う場合はここにチェックを入れます。

[F] メール (2):

メール (2)はもうひとつのメールセクションです。メール (2) は メール と全く同じ働きをしますが、こちらは使用/不使用の選択が可能です。メール (2) を有効化するには メール (2) を使う のチェックボックスにチェックを入れます。

まず、Akismet を有効化することが必要です。Akismet は最初から WordPress にインストールされているので、あとは有効化して WordPress.com の API キーをセットするだけです。

次に、以下の Akismet 関連オプションをフォームの適切な項目に追加します。

• akismet:author
  送信者の名前を入力する項目にこのオプションを追加する。
  例: [text* your-name akismet:author]
• akismet:author_email
  送信者のメールアドレスを入力する項目にこのオプションを追加する。
  例: [email* your-email akismet:author_email]
• akismet:author_url
  送信者の URL を入力する項目にこのオプションを追加する。
  例: [text your-url akismet:author_url]

これらのオプションの最低1個がセットされている場合に(ただし正確な判定のためにはこれらすべてのオプションをセットすることを推奨します)、Contact Form 7 は送信者のすべての入力内容、および送信行動に関係したすべての情報を Akismet に送ります。そして、Akismet はその送信がスパムらしいかどうかを判定します。

Akismet がスパムと判定すると、Contact Form 7 はメールの送信をキャンセルし、メッセージ送信に失敗した旨のメッセージを表示します。スパムと判定されたことによる場合は応答メッセージにオレンジのボーダーラインが付くのでそれがわかります。

最後に、これが機能しているか確認したい場合は、送信者の名前として “viagra-test-123″ を入力して送信することでテストすることができます。このテスト送信は常にスパムとして判定されるはずです。

使い方は簡単です。次のようにフォーム内に acceptance のタグを挿入してください:

[acceptance accept-this] Check here if you accept these terms.

JavaScript の仕掛けにより、ユーザーは条項を承諾するチェックボックスにチェックを入れるまでは送信ボタンを押すことさえできません。加えて、invert オプションを指定して、この機能を反転させることも可能です。つまり、チェックボックスのチェックを外さないと送信できないようにします。

デモ

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

上のフォームのソース:

1) Default
[acceptance accept-this-1] Check here if you accept these terms.

2) Inverted
[acceptance accept-this-2 invert] Uncheck here if you accept these terms.

3) Checked by default + Inverted
[acceptance accept-this-3 invert default:on] Uncheck here if you accept these terms.

[submit "Send"]

もっとシンプルな方法を使ったほうが都合がよい場合もあります。クイズの機能を使えば、人間なら答えられそうな質問と答えを考えるだけで、CAPTCHA と同等の役割を実現することができます。

たとえば次のようなタグをフォームに埋め込んだとしましょう:

[quiz capital-quiz "The capital of Japan?|Tokyo"]

パイプ文字 (‘|’) より前 (The capital of Japan?) が質問で、パイプより後 (Tokyo) が期待される答えとして扱われます。

地理より算数が好きなら次のような質問をしてもよいでしょう:

[quiz math-quiz "12+48=?|60"]

質問と答えは何でも構いません。正しい答えを入力しないとフォームを送信できません。

次のように質問と答えのペアを複数並べると、そのうちのひとつが毎回ランダムに選ばれて使用されます:

[quiz random-capital-quiz "The capital of Japan?|Tokyo"
                        "The capital of France?|Paris"
                        "The capital of Madagascar?|Antananarivo"]

例:

[quiz capital-quiz 10/20 id:qatest "The capital of Japan?|Tokyo"]

タグジェネレーターでクイズタグを生成する際は、問答のペアをクイズの欄の1行に1ペアずつ書いてください。

以下、Really Simple CAPTCHA がすでにインストールされているという前提で、Contact Form 7 での CAPTCHA の使用について説明します。

CAPTCHA を使う前に

Really Simple CAPTCHA は PHP の GD ならびに FreeType ライブラリを CAPTCHA 画像の作成のために必要としますので、それらがサーバーにインストールされていることが必要です。インストールされているかどうか不確かな場合はサーバー管理者に問い合わせてください。

Contact Form 7 は一時フォルダを作成してそこに CAPTCHA のファイルを保持します。ほとんどの場合、この一時フォルダの場所は wp-contents/uploads/wpcf7_captcha になりますが、設定によっては違う場所になることがあります。

設定 > その他の設定 (WordPress 3.0 以降では 設定 > メディア) メニューを開いてアップロードするファイルの保存場所項目の設定を見てください。デフォルトでは wp-content/uploads になっているはずです。通常なら、Contact Form 7 はここに wpcf7_captcha というフォルダを作成し、これを CAPTCHA のファイルのための一時フォルダとして使用します。

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

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

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

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

CAPTCHA のファイルのための一時フォルダが存在し、また書き込み可能であることをよく確認してください。そうでない場合は 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>) を表現します。

例:

[captchac your-captcha size:s fg:#ffffff bg:#000000]

CAPTCHA-Response

captchar は CAPTCHA-Response の意味で、CAPTCHA のレスポンス入力項目 (HTML における <input type="text">) を表現します。

例:

[captchar your-captcha 40/100]

デモ

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

上のフォームのソース:

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"]

セットアップには2つのステップが必要です。1) フォームにファイルアップロード項目を追加すること。2) アップロードされたファイルをメールに添付するように設定すること。以下、これらの手順について説明していきます。

ファイルアップロード項目をフォームに追加する

他のフォーム項目と同様、Contact Form 7 はファイルアップロード項目 (HTML における <input type="file">) のためのフォームタグとして、file と file* を用意しています。file* は必須項目で、ユーザーが必ずファイルをアップロードすることを求めます。

例:

[file your-file filetypes:pdf|txt limit:2mb]

filetypes: と limit: が明示的に指定されなかった場合、Contact Form 7 はファイルタイプとファイルサイズにデフォルトの制限を適用します。デフォルトの受信可能ファイルタイプ (の拡張子) は、jpg、jpeg、png、gif、pdf、doc、docx、ppt、pptx、odt、avi、ogg、m4a、mov、mp3、mp4、mpg、wav, wmv です。デフォルトの受信可能ファイルサイズは 1MB (1048576 バイト) です。

メールへのファイル添付を設定する

アップロードされたファイルをメールに添付するには、ファイルアップロード項目のフォームタグに対応するメールタグをファイル添付フィールドに以下のように追加します。

この例では、ファイルアップロード項目のフォームタグは以下のようになっていて:

[file your-file filetypes:pdf]

したがってこれに対応するメールタグは以下のようになります:

[your-file]

ファイル添付フィールドに入力する必要があるのは [your-file] の方です。[file your-file filetypes:pdf] ではないので注意してください。

メールに複数のアップロードされたファイルを添付したい場合は、以下のように単純に並べれば OK です:

[your-file][your-another-file]

アップロードされたファイルはどのように扱われるか

コンタクトフォームを経由してユーザーがファイルをアップロードすると、Contact Form 7 は 1) PHP のエラーが発生していないか、2) ファイルタイプとファイルサイズは適正か、についてチェックし、問題がない場合はそれらのファイルを一時フォルダに移動させます。その後 Contact Form 7 それらのファイルをメールに添付して送信します。これらの処理が完了したら、Contact Form 7 は一時フォルダにあるファイルを削除します。

この一時フォルダがどこにあるかは WordPress の設定に依存します。設定 > その他の設定 (WordPress 3.0 以降では 設定 > メディア) メニューを開いてアップロードするファイルの保存場所項目の設定を見てください。デフォルトでは wp-content/uploads になっているはずです。通常なら、Contact Form 7 はここに wpcf7_uploads というフォルダを作成し、これをアップロードファイルのための一時フォルダとして使用します。

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

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

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

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

アップロードファイルのための一時フォルダが存在し、また書き込み可能であることをよく確認してください。そうでない場合はファイルのアップロードが失敗します。

Checkbox、Checkbox*、Radio

checkbox と checkbox* はどちらもチェックボックス (HTML における <input type="checkbox">) のグループを表現します。checkbox* はユーザーに対して、少なくともひとつのチェックボックスを選択することを求めます。

radio はラジオボタン (HTML における <input type="radio">) のグループを表現します。入力必須版の radio (“radio*”) はありません。Contact Form 7 が “radio*” を提供しない理由は、そもそもラジオボタンとは入力必須のものだからです。このあたりのことについては HTML の仕様を見た方が早いでしょう。

これらのタイプのタグは1個以上の値を持つことができ、これらの値はチェックボックス(またはラベル)の値とラベルとして使われます。

例:

[checkbox your-country "China" "India" "San Marino"]

Select と Select*

select と select* はどちらもドロップダウンメニュー (HTML における <select>) を表現します。select* はユーザーに対して少なくともひとつの項目を選択することを求めます。

これらのタイプのタグは1個以上の値を持つことができ、これらの値はドロップダウンメニューの項目として使われます。

例:

[select your-country "China" "India" "San Marino"]

参照

• パイプを使って送信先を選択可能に

デモ

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

上のフォームのソース:

Select Country (required)
[checkbox* your-country use_label_element "China" "India" "San Marino"]

Select Sports
[radio your-sports label_first default:2 "Football" "Tennis" "Pole-vault"]

Select Fruit (required)
[checkbox* your-fruit exclusive "Apple" "Banana" "Grape"]

Select Browser (required)
[select* your-browser include_blank "Firefox" "Safari" "Opera" "Lynx"]

Select Ghkdsjdf
[select your-ghkdsjdf multiple "fsdfs" "klgjfk" "vdrie"]

[submit "Send"]

Contact Form 7 ではこれら2種類の HTML 要素を表現する6種類のフォームタグを用意しています(text、text*、email、email*、textarea、textarea*)。この記事では、これらのフォームタグの詳細な使用方法とセマンティクスについて説明します。

Text と Text*

text と text* はどちらも単一行入力のために用いられ、任意の形式のテキストを受け入れます。違いは text* が必須項目を示すということだけです。これは Contact Form 7 の慣習で、必須項目になるタグのタイプにはどれもアスタリスク ‘*’ がついています。

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

[text* your-name 20/40 class:required "John Smith"]

Email と Email*

email と email* はどちらも単一行入力のために用いられ、メールアドレスとして適正な文字列のみ受け入れます。email* は必須項目を示します。

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

[email your-email 40/100 "example@example.com"]

Textarea と Textarea*

textarea と textarea* はどちらも複数行入力のために用いられ、任意の形式のテキストを受け入れます。textarea* は必須項目を示します。

これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。

例:

[textarea your-message 40x10 "your message here ..."]

これに加えて、デフォルト値を指定するもうひとつの方法を次に示します:

[textarea your-message]
foo
bar
[/textarea]

この方法を使うと、複数行のデフォルト値の設定が可能です。

デモ

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

上のフォームのソース:

Your Name (required)
[text* your-name 30/60]

Your Email (required)
[email* your-email "yourmail@example.com"]

Your Message
[textarea your-message]
default value for a textarea
can be multi-line
like this
[/textarea]

[submit "Send"]

フォームに用いられるタグとメールに用いられるタグはそれぞれ異なっていて、例えばフォームには [text* your-name] を使いますが、メールには [your-name] を使います。これらはそれぞれ異なった構文を持ちます。

フォームタグの構文

フォームテンプレートで用いられるタグ (「フォームタグ」) は、実際のフォームに表示される際に入力項目をあらわす HTML 要素に変換されます。フォームタグはタイプ、名前、オプション、値の4つの構成要素に分けることができます。

タイプは最も重要な要素であり、どのような HTML 要素がこのタグ自身を置き換えることになり、そしてどのような入力値が求められるかを定義します。

名前は入力項目を識別するために使われます。大半のフォームタグが1個の名前を持ちますが、例外もあります。

オプションは挙動と外観についての詳細を指定するものです。オプションは任意設定です。

多くの場合、値はデフォルト値を指定するために使われます。タグのタイプによっては値を違う用途に使うこともあります。値は任意設定です。

参照

• テキスト項目 (text, text*, email, email*, textarea and textarea*)
• チェックボックス、ラジオボタン、メニュー (checkbox, checkbox*, radio, select and select*)
• ファイルのアップロードとメール添付 (file and file*)
• CAPTCHA (captchac and captchar)
• クイズ (quiz)
• 承諾確認チェックボックス (acceptance)
• 送信ボタン (submit)

メールタグの構文

メールテンプレートで用いられるタグ (「メールタグ」) はずっとシンプルです。メールタグは1個の単語だけで構成されます。ほとんどの場合、この単語はフォームタグの名前と対応づけられていて、その入力項目の入力値によって置き換えられます。