皆さんこんにちは。今回は「Mailform pro」のトグルスイッチ、予約日用のセレクトボックス、誕生日用のセレクトボックスについて紹介します。
トグルスイッチは選択肢に応じて項目を表示（活性化）、非表示（非活性化）する機能です。

「選択肢2」を選んだら、idが「hidden」のdivが表示されて、中の項目が入力できるようになる仕組みを実装できます。

ラジオボックスの選択に応じて、特定のエリア内の項目を非活性化

ラジオの「選択肢2」を選択すると「hidden」内の項目を非活性にするタイプ。「data-toggle」で非活性化したいエリアを指定する。

config.cgiから以下を探し出し、頭についている#を外すだけ

 #push @AddOns,'toggle.js'; 

  <input type="radio" name="選択肢1" required="required" />
  <input type="radio" name="選択肢2" required="required" data-toggle="hidden" />
  <div id="hidden">
    <input type="text" name="選択肢2を選択すると活性化するinput" required="required" />
  </div>
  

セレクトボックスの選択に応じて、特定のエリア内の項目を非活性化

上のタイプのセレクト版。「選択肢2」を選択すると「hidden」内の項目を非活性にするタイプ。
セレクトで非活性化を行う場合は「data-toggle-value」に変化します。

 #push @AddOns,'toggle.js'; 

  <select id="type" name="お問い合わせ内容" required="required" data-toggle-value="選択肢2">
    <option value="default" disabled selected>選択して下さい</option>
    <option value="選択肢1">選択肢1</option>
    <option value="選択肢2">選択肢2</option>
  </select>
  <div id="hidden">
    <input name="選択肢2を選択すると活性化するinput" required="required" />
  </div>
  

あとはこちら、キャッシュが残ると選択肢が選択されたままになるので、jQuery側でちゃんと制御しておきます。
「default」の選択肢を最初は選んでって意味ですね。

  <script>
    $("#type").val("default");
  </script>
  

セレクトボックスの選択に応じて、特定のエリアを非表示

上のタイプにさらに非表示の機能がついた版。セレクトの「選択肢2」を選択すると「hidden」を非表示＋「hidden」内の項目を非活性にするタイプ。
非表示されている間はrequiredになっていても無視してくれます。「data-toggle-hide」で非表示にするターゲットを指定する。

 #push @AddOns,'toggle.js'; 

  <select id="type" name="お問い合わせ内容" required="required" name="職業" data-toggle="hidden" data-toggle-hide="hidden" data-toggle-value="選択肢2">
    <option value="default" disabled selected>選択して下さい</option>
    <option value="選択肢1">選択肢1</option>
    <option value="選択肢2">選択肢2</option>
  </select>
  <div id="hidden">
    <input name="選択肢2を選択すると出現するinput" required="required" />
  </div>
  

予約などに便利な年月日選択リスト

今日を基準に年月日を自動で生成してくれるセレクトボックス。
「data-daystart」が今日から何日後からスタートするか。「data-daystart=”1″」であれば翌日の日付から選択出来る。
「data-daymax」で何日後まで表示するか。「data-daymax=”360″」であればスタートの日付から１年間分選択肢が生成される。

config.cgiから以下を探し出し、頭についている#を外すだけ

 #push @AddOns,'datelist.js'; 

  <select name="予約日" data-daystart="1" data-daymax="360" required="required">
    <option value="">予約日を選択してください</option>
    <!-- ここに日付が自動生成される -->
  </select>
  

生年月日用の選択リスト

今年を基準に指定した年数分のセレクトボックスで自動で生成してくれます。「data-birthday」で最大の年齢,最低の年齢を指定するだけ。

config.cgiから以下を探し出し、頭についている#を外すだけ

 #push @AddOns,'birthday.js'; 

  <input type="text" name="10歳～100歳までに該当する年月日のselectタグが自動生成" required="required" data-birthday="100,10" />