メールフォームプラグインV1.20(その7・ラジオボタン/セレクトの追加)

今日は、メールフォームにラジオボタン(<input type="radio"…>)またはセレクト(<select…>~</select>)を追加する方法を解説します。

1.送信値/表示値/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>

なお、MTSetParamListタグの部分は、メールフォームのテンプレートと、送信前確認/送信エラーのテンプレートに入れます。
同じものをこれらの3つのテンプレートに入れると、リストを修正する必要が出た際に、3つのテンプレートすべてを修正しなければならなくなり、効率が悪いです。
そこで、MTSetParamListタグの部分はテンプレート・モジュールに入れておき、MTIncludeタグを使って各テンプレートに組み込むようにすると良いでしょう。

2.input/selectタグの出力

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

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

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

・ラジオボタン

<MTGetParamList list_name="リスト名">
<input type="radio" name="フィールド名" id="<$MTGetParamID$>" value="<$MTGetParamValue$>" /><$MTGetParamString$>
</MTGetParamList>

・セレクト

<select name="フィールド名">
<MTGetParamList list_name="リスト名">
<option value="<$MTGetParamValue$>"><$MTGetParamString$></option>
</MTGetParamList>
</select>

3.特定の選択肢をオンにする

ラジオボタンやセレクトの選択肢の中で、特定のものをオンにした状態にしておきたいこともあります。

メールフォームでは、最初の選択肢をオンにすることが多いと思います。
MTGetParamListタグのコンテナの中で、「MTGetParamListHeader」という条件タグを使うと、リスト内の最初の項目かどうかを判断することができます。
以下のように書くことで、ラジオボタンやセレクトの最初の選択肢をオンにすることができます。

・ラジオボタン

<input type="radio" name="フィールド名" id="<$MTGetParamID$>" value="<$MTGetParamValue$>"<MTGetParamListHeader> checked="checked"</MTGetParamListHeader> /><$MTGetParamString$>

・セレクト(のoptionタグ)

<option value="<$MTGetParamValue$>"<MTGetParamListHeader> selected="selected"</MTGetParamListHeader>><$MTGetParamString$></option>

メールフォームで、特定の送信値に対応する選択肢をオンにしておくこともできます。
それには、MTGetParamListタグのコンテナの中で、「<MTIfParamValue comp_value="オンにしたい選択肢の送信値">」という条件タグを使って、以下のように書きます。

・ラジオボタン

<input type="radio" name="フィールド名" id="<$MTGetParamID$>" value="<$MTGetParamValue$>"<MTIfParamValue comp_value="オンにしたい選択肢の送信値"> checked="checked"</MTIfParamValue> /><$MTGetParamString$>

・セレクト(のoptionタグ)

<option value="<$MTGetParamValue$>"<MTIfParamValue comp_value="オンにしたい選択肢の送信値"> selected="selected"</MTIfParamValue>><$MTGetParamString$></option>

また、送信前確認ページや送信エラーページでは、メールフォームで選択された項目をオンにする必要があります。
これは、MTGetParamListタグのコンテナの中で、「<MTIfParamValue param_name="フィールド名">」という条件タグを使って、以下のように書きます。

・ラジオボタン

<input type="radio" name="フィールド名" id="<$MTGetParamID$>" value="<$MTGetParamValue$>"<MTIfParamValue param_name="フィールド名"> checked="checked"</MTIfParamValue> /><$MTGetParamString$>

・セレクト(のoptionタグ)

<option value="<$MTGetParamValue$>"<MTIfParamValue param_name="selectタグのフィールド名"> selected="selected"</MTIfParamValue>><$MTGetParamString$></option>

4.例

性別をラジオボタンで入力し、年齢帯(20歳台、30歳台など)をセレクトで入力できるようにしたいとします。
また、表示値/送信値/IDの組み合わせは、それぞれ以下の表のようにするものとします。
さらに、メールフォームでは、初期状態で「男」と「30歳台」を選択しておきたいとします。

・性別の表示値/送信値/IDの組み合わせ

表示値送信値ID
1mail_sex_male
2mail_sex_female
無回答99mail_sex_none

・年齢帯の表示値と送信値の組み合わせ

表示値送信値
10歳未満0
10歳台10
20歳代20
30歳代30
40歳代40
50歳代50
60歳以上60
無回答99

まず、テンプレート・モジュールを1つ作成します。
名前は「メールフォーム用リスト」にでもすると良いでしょう。
そして、テンプレートの内容として、以下を入力します。

<MTSetParamList list_name="sex">
1|男|mail_sex_male
2|女|mail_sex_female
99|無回答|mail_sex_none
</MTSetParamList>
<MTSetParamList list_name="age">
0|10歳未満
10|10歳台
20|20歳台
30|30歳台
40|40歳台
50|50歳台
60|60歳以上
99|無回答
</MTSetParamList>

メールフォームのテンプレートのフォーム部分には、以下のようなタグを入れます。

<$MTInclude module="メールフォーム用リスト"$>
<p>性別:<br />
<MTGetParamList list_name="sex">
<input type="radio" name="mail_sex" id="<$MTGetParamID$>" value="<$MTGetParamValue$>"<MTGetParamListHeader> checked="checked"</MTGetParamListHeader> /><$MTGetParamString$>
</MTGetParamList>
</p>
<p>年齢:<br />
<select name="mail_age">
<MTGetParamList list_name="age">
<option value="<$MTGetParamValue$>"<MTIfParamValue comp_value="30"> selected="selected"</MTIfParamValue>><$MTGetParamString$></option>
</MTGetParamList>
</select>
</p>

また、送信前確認と送信エラーのテンプレートのフォーム部分には、以下のようなタグを入れます。

<$MTInclude module="メールフォーム用リスト"$>
<p>性別:<br />
<MTGetParamList list_name="sex">
<input type="radio" name="mail_sex" id="<$MTGetParamID$>" value="<$MTGetParamValue$>"<MTIfParamValue param_name="mail_sex"> checked="checked"</MTIfParamValue> /><$MTGetParamString$>
</MTGetParamList>
</p>
<p>年齢:<br />
<select name="mail_age">
<MTGetParamList list_name="age">
<option value="<$MTGetParamValue$>"<MTIfParamValue param_name="mail_age"> selected="selected"</MTIfParamValue>><$MTGetParamString$></option>
</MTGetParamList>
</select>
</p>

5.前後のエントリー

メールフォームプラグインは解説が長いので、エントリーを複数に分けています。
前後のエントリーは以下のリンクで参照することができます。

前のエントリー(その6・チェックボックスの追加)
次のエントリー(その8・入力エラーのチェック)

また、サイドバーの「関連するエントリー」の箇所に、メールフォーム関連のエントリーの一覧が表示されていますので、そちらもご利用ください。

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