a-blog cms: メールフォームの制作（入力フォーム編）

a-blog cmsのメールフォームの、送信部分のサンプル。
全体の構造についてはこちら。

参照：a-blog cms: メールフォームの制作（構造編）

入力フォーム

カスタムフィールドの作成と全く同じ要領、記述ルールとなる。
冒頭のscriptは、郵便番号の自動フォーカスを読み込んでいる。

ここではテキスト・セレクト・テキストエリアのみとなっているが、以下のようなフォームも作成できる。

• チェックボックス
• ラジオボタン
• ファイルアップロード（メール本文への添付となる）
• メールアドレスを二回入力させる
• 自由増減が可能な項目を作成する

contact_input_table.html

<script type="text/javascript" src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<table class="ablogcmsForm" summary="お問い合わせ内容">

  <tr>
    <th>
      <label for="contact-lname">氏名 <span class="label label-primary">必須</span></label>
    </th>
    <td>
      <div class="input-wrapper">
        <span class="attachment attachment-before">姓</span><input type="text" name="lname" size="20" value="{lname}" id="contact-lname" class="input-txt inputS">
        <span class="attachment attachment-center">名</span><input type="text" name="fname" size="20" value="{fname}" id="contact-fname" class="input-txt inputS">
      <!-- /.input-wrapper --></div>
      <input type="hidden" name="field[]" value="lname">
      <input type="hidden" name="lname:v#required">
      <!-- BEGIN lname:validator -->
      <p class="error-msg">姓は必ず入力してください。</p>
      <!-- END lname:validator -->
      <input type="hidden" name="field[]" value="fname">
      <input type="hidden" name="fname:v#required">
      <!-- BEGIN fname:validator -->
      <p class="error-msg">名は必ず入力してください。</p>
      <!-- END fname:validator -->
    </td>
  </tr>

  <tr>
    <th>
      <label for="contact-email">メールアドレス <span class="label label-primary">必須</span></label>
    </th>
    <td>
      <div class="input-wrapper">
        <input name="email" type="email" size="40" id="contact-email" value="{email}" class="input-txt inputL">
      <!-- /.input-wrapper --></div>
      <input type="hidden" name="field[]" value="email">
      <input type="hidden" name="email:v#required">
      <input type="hidden" name="email:c" value="a">
      <input type="hidden" name="email:v#email">
      <!-- BEGIN email:validator -->
      <p class="error-msg">正しいメールアドレスを入力してください。</p>
      <!-- END email:validator -->
    </td>
  </tr>

  <tr>
    <th>
      <label for="contact-zip">住所</label>
    </th>
    <td>
      <div class="input-wrapper">
        <span class="attachment attachment-before">〒</span><input type="text" name="zip" size="15" value="{zip}" id="contact-zip" class="input-txt inputS" onKeyUp="AjaxZip3.zip2addr(this,'','prefecture','address');">

        <select name="prefecture" id="contact-prefecture">
          <option value="">都道府県 ▼</option>
          <option value="北海道"{prefecture:selected#北海道}>北海道</option>
          <option value="青森県"{prefecture:selected#青森県}>青森県</option>
          <option value="岩手県"{prefecture:selected#岩手県}>岩手県</option>
          <option value="宮城県"{prefecture:selected#宮城県}>宮城県</option>
          <option value="秋田県"{prefecture:selected#秋田県}>秋田県</option>
          <option value="山形県"{prefecture:selected#山形県}>山形県</option>
          <option value="福島県"{prefecture:selected#福島県}>福島県</option>
          <option value="茨城県"{prefecture:selected#茨城県}>茨城県</option>
          <option value="栃木県"{prefecture:selected#栃木県}>栃木県</option>
          <option value="群馬県"{prefecture:selected#群馬県}>群馬県</option>
          <option value="埼玉県"{prefecture:selected#埼玉県}>埼玉県</option>
          <option value="千葉県"{prefecture:selected#千葉県}>千葉県</option>
          <option value="東京都"{prefecture:selected#東京都}>東京都</option>
          <option value="神奈川県"{prefecture:selected#神奈川県}>神奈川県</option>
          <option value="新潟県"{prefecture:selected#新潟県}>新潟県</option>
          <option value="富山県"{prefecture:selected#富山県}>富山県</option>
          <option value="石川県"{prefecture:selected#石川県}>石川県</option>
          <option value="福井県"{prefecture:selected#福井県}>福井県</option>
          <option value="山梨県"{prefecture:selected#山梨県}>山梨県</option>
          <option value="長野県"{prefecture:selected#長野県}>長野県</option>
          <option value="岐阜県"{prefecture:selected#岐阜県}>岐阜県</option>
          <option value="静岡県"{prefecture:selected#静岡県}>静岡県</option>
          <option value="愛知県"{prefecture:selected#愛知県}>愛知県</option>
          <option value="三重県"{prefecture:selected#三重県}>三重県</option>
          <option value="滋賀県"{prefecture:selected#滋賀県}>滋賀県</option>
          <option value="京都府"{prefecture:selected#京都府}>京都府</option>
          <option value="大阪府"{prefecture:selected#大阪府}>大阪府</option>
          <option value="兵庫県"{prefecture:selected#兵庫県}>兵庫県</option>
          <option value="奈良県"{prefecture:selected#奈良県}>奈良県</option>
          <option value="和歌山県"{prefecture:selected#和歌山県}>和歌山県</option>
          <option value="鳥取県"{prefecture:selected#鳥取県}>鳥取県</option>
          <option value="島根県"{prefecture:selected#島根県}>島根県</option>
          <option value="岡山県"{prefecture:selected#岡山県}>岡山県</option>
          <option value="広島県"{prefecture:selected#広島県}>広島県</option>
          <option value="山口県"{prefecture:selected#山口県}>山口県</option>
          <option value="徳島県"{prefecture:selected#徳島県}>徳島県</option>
          <option value="香川県"{prefecture:selected#香川県}>香川県</option>
          <option value="愛媛県"{prefecture:selected#愛媛県}>愛媛県</option>
          <option value="高知県"{prefecture:selected#高知県}>高知県</option>
          <option value="福岡県"{prefecture:selected#福岡県}>福岡県</option>
          <option value="佐賀県"{prefecture:selected#佐賀県}>佐賀県</option>
          <option value="長崎県"{prefecture:selected#長崎県}>長崎県</option>
          <option value="熊本県"{prefecture:selected#熊本県}>熊本県</option>
          <option value="大分県"{prefecture:selected#大分県}>大分県</option>
          <option value="宮崎県"{prefecture:selected#宮崎県}>宮崎県</option>
          <option value="鹿児島県"{prefecture:selected#鹿児島県}>鹿児島県</option>
          <option value="沖縄県"{prefecture:selected#沖縄県}>沖縄県</option>
        </select>
      <!-- /.input-wrapper --></div>
      <input type="hidden" name="field[]" value="zip">
      <input type="hidden" name="zip:c" value="a">
      <input type="hidden" name="field[]" value="prefecture">

      <div class="input-wrapper">
        <input type="text" name="address" size="40" value="{address}" id="contact-address" class="input-txt inputL">
      <!-- /.input-wrapper --></div>
      <input type="hidden" name="field[]" value="address">
    </td>
  </tr>

  <tr>
    <th>
      <label for="contact-category">お問い合わせ種類 <span class="label label-primary">必須</span></label>
    </th>
    <td>
      <div class="input-wrapper">
        <select name="category" id="contact-category">
          <option value="" selected="selected">選択してください</option>
          <option value="商品に関するお問い合わせ"{category:selected#商品に関するお問い合わせ}>商品に関するお問い合わせ</option>
          <option value="弊社へのお問い合わせ"{category:selected#弊社へのお問い合わせ}>弊社へのお問い合わせ</option>
          <option value="その他"{category:selected#その他}>その他</option>
        </select>
      <!-- /.input-wrapper --></div>
      <input type="hidden" name="field[]" value="category">
      <input type="hidden" name="category:v#required">
      <!-- BEGIN category:validator -->
      <p class="error-msg">お問い合わせ種類は必ず選択してください。</p>
      <!-- END category:validator -->
    </td>
  </tr>
  <tr>
    <th>
      <label for="contact-inquiry">お問い合わせ内容 <span class="label label-primary">必須</span></label>
    </th>
    <td>
      <div class="input-wrapper">
        <textarea name="inquiry" cols="40" rows="10" placeholder="入力してください" id="contact-inquiry" class="input-txt inputL">{inquiry}</textarea>
      <!-- /.input-wrapper --></div>
      <input type="hidden" name="field[]" value="inquiry">
      <input type="hidden" name="inquiry:v#required">
      <!-- BEGIN inquiry:validator -->
      <p class="error-msg">お問い合わせ内容は必ず入力してください。</p>
      <!-- END inquiry:validator --> 
    </td>
  </tr>
</table>

カスタムフィールドの書式

基本ルール

フォームの入力部分、「これはカスタムフィールドである」という定義部分が組になっている。
下記のコードの「XXXX」がすべて同じ名前（任意のフィールド名）となる。

acms_custom_field_outline.html

<input name="XXXX" type="text" size="40" id="contact-XXXX" value="{XXXX}">
<input type="hidden" name="field[]" value="XXXX">

オプション

エラー条件を指定する場合はname属性を「フィールド名:v#ルール」という書式で、hiddenで付与する。

参照：フォームオプション | リファレンス | サポート・マニュアル | a-blog cms - Web制作者のためのCMS

入力した内容の全角・半角変換をする場合は、name属性を「フィールド名:c」、value属性をPHPのmb_convert_kana関数と同じ書式で、hiddenで付与する。

参照：校正オプション | リファレンス | サポート・マニュアル | a-blog cms - Web制作者のためのCMS

acms_custom_field_option.html

<input type="hidden" name="XXXX:v#required">
<input type="hidden" name="XXXX:c" value="a">

エラー表示

コメント「BEGIN XXXX:validator」から「END XXXX:validator」で囲んだ範囲が、バリデーションエラーとなったときのエラー文となる。

acms_custom_field_error.html

<!-- BEGIN XXXX:validator -->
<p class="error">XXXXは必ず入力してください。</p>
<!-- END XXXX:validator -->