このブログにもメールフォームを設置してみました。おそらく使用される機会は非常に少ないでしょうが、プラグインを使わない方法を試したかったので。右上のガイドナビにある「Contact」がそれです。

Movable Type でメールフォームを使おうと思ったら、まっさきに次の二つのプラグインが思い浮かぶのではないでしょうか。

• The blog of H.Fujimoto: メールフォームプラグインV2.10の使い方
• A-Form：MovableTypeにフォーム設置できるMTプラグイン｜Web制作のアークウェブ

しかし、今回はあえてプラグインは使用せずに、SYNCK GRAPHICAさんのところで配布しているメールフォームプロCGI/UTF-8対応を使わせていただきました。

さて、今回はメールフォームの項目を、先日のMovable Type Developer Conference で刺激を受けて使いたくなった IncludeBlock タグで項目を簡単に増やせるようにしてみました。

試しにテキストエリアを増やしてみます。あくまで例です。

テンプレートモジュールの作成

まず、このメールフォームのデフォルトのテキストエリアの一つに以下のようなソースがあったとします。

<dt>
 <img src="images/must.gif" width="30" height="16" alt="必須" class="must" />メールアドレス
</dt>
<dd>
 <input type="text" name="メールアドレス(必須)" value="name@example.jp" class="mfp" />
</dd>

class="mfp"はフォームを選択したときにデフォルトの値を消すためのものなので今は気にしないでOKです。

この青字の部分を変数に置き換えます。使用する変数は次のようにします。

変数 must_item : 必須項目に表示させる画像 <img src="images/must.gif" width="30" height="16" alt="必須" class="must" />
変数 item_must_type : 1 （必須） or 0 （必須ではない）
変数 item_name : テキストフィールドの名前
変数 item_value : テキストフィールドの初期値

これらの変数を使って、先ほどのソースを以下のように書き換え、テンプレートモジュールとして保存します。

[テンプレートモジュール名 : contact_item_textfield ]

<mt:SetVarBlock name="must_item"><img src="images/must.gif" width="30" height="16" alt="必須" class="must" /></mt:SetVarBlock>
<dt>
 <mt:If name="item_must_type"><$mt:GetVar name="must_item"$></mt:If><$mt:GetVar name="item_name"$>
</dt>
<dd>
 <input type="text" name="<$mt:GetVar name="item_name"$><mt:If name="item_must_type">(必須)</mt:If>" value="<$mt:GetVar name="item_value"$>" class="mfp" />
</dd>

IncludeBlock タグで読み込み

続いて、今作成したテンプレートモジュールを IncludeBlock タグで読み込みます。

まず、準備として、すでに作成してある「Contact」用のインデックステンプレートを複製し、その複製したインデックステンプレートで、テンプレートモジュールを読み込むことにします。

変更前の Contact ページのメールフォーム欄は次のようになっています。

このフォームの「性別」の下に以下のようなアンケートを追加してみましょう。

これらを、フォームを挿入する場所で以下のように IncludeBlock タグでテンプレートモジュールを読み込みます。

<mt:IncludeBlock module="contact_item_textfield">
<mt:SetVars>
item_must_type=1
item_name=サーフィンのレベルは？
item_value=ビギナー
</mt:SetVars>
</mt:IncludeBlock>

<mt:IncludeBlock module="contact_item_textfield">
<mt:SetVars>
item_must_type=0
item_name=好きなサッカー選手は？
item_value=ロベルト・バッジョ
</mt:SetVars>
</mt:IncludeBlock>

<mt:IncludeBlock module="contact_item_textfield">
<mt:SetVars>
item_must_type=1
item_name=使用ブラウザは？
item_value=Firefox
</mt:SetVars>
</mt:IncludeBlock>

<mt:IncludeBlock module="contact_item_textfield">
<mt:SetVars>
item_must_type=0
item_name=得意な泳ぎは？
item_value=平泳ぎ
</mt:SetVars>
</mt:IncludeBlock>

表示結果はご覧のとおりバッチリです。

確認画面でもOKですね。

メールもちゃんと、追加項目が反映された状態で送信されました。

このように、テンプレートモジュールには手を加えずに、テンプレートモジュールを読み込むときに変数の値を引き継げるのが、IncludeBlock タグの特徴です。

今回のサンプルでも、もう少しちゃんと作れば、テンプレートだけで自由に変更できるメールフォームを作ることも可能な気がします。

うまく利用できれば、けっこう便利で強力な MT タグになると思います。