メールフォームプラグインV2.0・その12（ラジオボタン／セレクトの追加）

メールフォームプラグインで、メールフォームにラジオボタン（<input type="radio"...>）またはセレクト（<select...>～</select>）を追加する方法を解説します。

1.GetQueryParamプラグインのインストール

ラジオボタンやセレクトを使う場合、「GetQueryParam」というプラグインが必要になります。
GetQueryParamプラグインは以下からダウンロードできます。

GetQueryParam_1_14.zip

ダウンロードしたファイルを解凍すると、「GetQueryParam」フォルダができます。
このフォルダを、Movable Typeの「plugins」ディレクトリにアップロードします。

なお、旧版のメールフォームプラグインでもGetQueryParamプラグインを組み合わせていましたが、その時のプラグインよりバージョンアップしています（旧バージョンは1.11）。
旧バージョンを使っていた方は、新バージョンに差し替えてください。

2.送信値／表示値／IDのリストの作成

フォームにラジオボタンやセレクトを入れるには、それぞれの選択肢に対応するタグに、「送信」ボタンがクリックされたときにCGIに送信する値（以後「送信値」と略）と、フォームに表示する値（以後「表示値」と略）を指定することが必要です。

・ラジオボタン 

<input type="radio" name="フィールド名" id="フィールドのID" value="送信値" />表示値

・セレクト（のoptionタグ） 

<option value="送信値">表示値</option>

メールフォームにラジオボタンやセレクトを入れるには、まず送信値と表示値のリストを作ることから始めます。
このリストは、GetQueryParamプラグインの「MTSetParamList」というコンテナタグで作成します。
以下のように、このタグのコンテナの中に、送信値と表示値を「|」で区切ったものを書きます。
また、「list_name」というアトリビュートで、リストの名前も指定します。
なお、送信値と表示値は同じ値にしても構いません。 

<MTSetParamList list_name="リスト名">
送信値1|表示値1
送信値2|表示値2
...
送信値n|表示値n
</MTSetParamList>

さらに、ラジオボタンではそれぞれにIDを振ることもできます。
その場合は、以下のようにして、送信値／表示値／IDを「|」で区切ってリストを作ります。 

<MTSetParamList list_name="リスト名">
送信値1|表示値1|ID1
送信値2|表示値2|ID2
...
送信値n|表示値n|IDn
</MTSetParamList>

なお、このタグは、「メールフォーム共通部分」のテンプレートに入れます。

3.input／selectタグの出力

2.の手順で送信値と表示値のリストを作成しましたが、そのリストを利用して、inputやselectのタグを出力します。

リストから送信値と表示値を取り出すには、GetQueryParamプラグインの「MTGetParamList」というコンテナタグを使います。
「list_name="リスト名"」のアトリビュートを指定して、値を取り出すリストを指定します。
また、送信値／表示値／IDは、それぞれ以下のタグで出力することができます。

出力したい値タグ
送信値<MTVar name="gp_value">
表示値<MTVar name="gp_string">
ID<MTVar name="gp_id">

MTGetParamListタグ等を使って、ラジオボタンやセレクトを出力するには、以下のようにタグを組み合わせます。

・ラジオボタン 

<MTGetParamList list_name="リスト名">
<input type="radio" name="フィールド名" id="<MTVar name="gp_id">" value="<MTVar name="gp_value">"<MTIf name="フィールド名" eq="$gp_value"> checked="checked"</MTIf> /><MTVar name="gp_string">
</MTGetParamList>

・セレクト 

<select name="フィールド名">
<MTGetParamList list_name="リスト名">
<option value="<MTVar name="gp_value">"<MTIf name="フィールド名" eq="$gp_value"> selected="selected"</MTIf>><MTVar name="gp_string"></option>
</MTGetParamList>
</select>

4.初期値の設定

セレクト／ラジオボタンを表示する際に、選択肢の1つを選択した状態にしておくこともできます。
それには、「メールフォーム」のテンプレートに、以下のようなタグを入れます。 

<MTSetVar name="フィールド名" value="選択する項目の送信値">

5.例

例えば、「赤」「青」「緑」の色を選べるようにしたいとします。
そのフィールド名を「mail_color」にし、また色のリストには「list_color」という名前をつけるとします。

セレクトで選択できるようにする場合、「メールフォーム共通部分」のテンプレートに、以下のようなタグを入れます。 

<MTSetParamList list_name="list_color">
赤|赤
青|青
緑|緑
</MTSetParamList>
<p>色<br />
<select name="mail_color" id="mail_color">
<MTGetParamList list_name="list_color">
    <option value="<MTVar name="gp_value">"<MTIf name="mail_color" eq="$gp_value"> selected="selected"</MTIf>><MTVar name="gp_string"></option>
</MTGetParamList>
</select>
</p>

一方、ラジオボタンで選択できるようにしたいとします。
また、各ラジオボタンには「mail_color_red」「mail_color_blue」mail_color_green」のIDを割り当てたいとします。
この場合は、以下のようなタグを入れます。 

<MTSetParamList list_name="list_color">
赤|赤|mail_color_red
青|青|mail_color_blue
緑|緑|mail_color_green
</MTSetParamList>
<p>色<br />
<MTGetParamList list_name="list_color">
<input type="radio" name="mail_color" id="<MTVar name="gp_id">" value="<MTVar name="gp_value">"<MTIf name="mail_color" eq="$gp_value"> checked="checked"</MTIf>><MTVar name="gp_string"> 
</MTGetParamList>
</select>
</p>

また、上記のセレクト／ラジオボタンで、「赤」を初期値にしたいとします。
この場合、「メールフォーム」のテンプレートに以下のタグを入れます。 

<MTSetVar name="mail_color" value="赤">

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください