a-blog cms: メールフォームの制作（構造編） #HTML5

a-blog cmsのフォームは、設置したいhtmlファイルにFormモジュールを記述して制作する。

以下の4ステップで構成されている。

step（入力・初期画面）
step#reapply（入力やり直し）
step#confirm（送信確認）
step#result（送信完了）

アウトライン

各ステップのHTMLをすべて入力していくとメンテナンスがしにくくなるため、インクルードで4ファイルに分割することになる。

例ではインクルードパスが /include/contact/ となっているが、contact.htmlと同階層でも構わない。

フォーム管理で登録したフォームIDの入力場所は、Formモジュールの開始タグにid属性で書く方法と、form要素の終了前にhiddenで書く方法がある。この例では後者となっている。

form_module_outline.html

<!-- BEGIN_MODULE Form -->
<!-- BEGIN step -->
<!--#include file="/include/contact/contact_step.html" -->
<!-- END step -->
<!-- BEGIN step#reapply -->
<!--#include file="/include/contact/contact_reapply.html" -->
<!-- END step#reapply -->
<!-- BEGIN step#confirm -->
<!--#include file="/include/contact/contact_confirm.html" -->
<!-- END step#confirm -->
<!-- BEGIN step#result -->
<!--#include file="/include/contact/contact_result.html" -->
<!-- END step#result -->
<!-- END_MODULE Form -->

step（入力・初期画面）

ステップ表示、リード文、入力フォーム、確認ボタンという構成になる。

入力フォームはひじょうに長く、contact_reapply.htmlと全く同じコードとなるため、さらにインクルードで分割する。

参照：[a-blog cms: メールフォームの制作（入力フォーム編）(http://qiita.com/items/a968558bd65bf96c4606)

常に全体をクラス名を付けたdivかsectionで囲んでおくと、後々CSSの装飾がしやすい。

ボタンについている「btn btn-primary」クラスは、Twitter bootstrap依存なのでなくてもよい。

contact_step.html

<div class="mail-form form-step">

  <ul class="mail-step">
    <li class="current"><strong><span class="num">1</span> お客様情報の入力</strong><span class="sep"></span></li>
    <li><span class="num">2</span> 送信内容の確認<span class="sep"></span></li>
    <li><span class="num">3</span> 送信完了<span class="sep"></span></li>
  </ul>

  <p>%{BLOG_NAME}へのお問い合わせは、こちらのメールフォームからお願いいたします。</p>

  <form action="?step=reapply" method="post">
    <input type="hidden" name="id" value="contactForm">
    <input type="hidden" name="step" value="confirm">
<!--#include file="/include/contact/contact_input_table.html" -->
    <div class="submit">
      <input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認" id="btnConfirm" class="btn btn-primary">
    <!-- /.submit --></div>
  </form>

<!-- /.mail-form form-step --></div>

step#reapply（入力やり直し）

ステップ表示、注意文、入力フォーム、再送信ボタンという構成になる。

contact_reapply.html

<div class="mail-form form-reapply">

  <ul class="mail-step">
    <li class="current"><strong><span class="num">1</span> お客様情報の入力</strong><span class="sep"></span></li>
    <li><span class="num">2</span> 送信内容の確認<span class="sep"></span></li>
    <li><span class="num">3</span> 送信完了<span class="sep"></span></li>
  </ul>

  <p><strong>入力内容に不明な箇所があります。</strong>お手数ですが、いま一度ご確認ください。</p>

  <form action="?step=reapply" method="post">
    <input type="hidden" name="id" value="contactForm">
    <input type="hidden" name="step" value="confirm">
<!--#include file="/include/contact/contact_input_table.html" -->
    <div class="submit">
      <input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認" id="btnConfirm" class="btn btn-primary">
    <!-- /.submit --></div>
  </form>

<!-- /.mail-form form-reapply --></div>

step#confirm（送信確認）

ステップ表示、確認文、入力内容のプレビュー、戻るボタン＋送信ボタンという構成になる。

入力フォームで設定した、カスタムフィールドの値を表示していく。ここでは割愛するが、実際に送信するメールのひな形も全く同じ書式となる。

戻るボタン、送信ボタンのform要素に入っているhiddenは、送信上絶対に必要になるため、コピペミスに注意すること。

contact_confirm.html

<div class="mail-form form-confirm">

  <ul class="mail-step">
    <li><span class="num">1</span> お客様情報の入力<span class="sep"></span></li>
    <li class="current"><strong><span class="num">2</span> 送信内容の確認</strong><span class="sep"></span></li>
    <li><span class="num">3</span> 送信完了<span class="sep"></span></li>
  </ul>

  <p>以下の内容で送信します。よろしければ「送信する」ボタンを押してください。</p>

  <table class="ablogcmsForm">
    <tr>
      <th>氏名</th>
      <td>{lname} {fname}</td>
    </tr>
    <tr>
      <th>メールアドレス</th>
      <td>{email}</td>
    </tr>
    <tr>
      <th>住所</th>
      <td><!-- BEGIN zip:veil -->〒{zip}<br><!-- END zip:veil -->{prefecture}{address}</td>
    </tr>
    <tr>
      <th>お問い合せ種類</th>
      <td>{category}</td>
    </tr>
    <tr>
      <th>お問い合せ内容</th>
      <td>{inquiry}[nl2br]</td>
    </tr>
  </table>

  <div class="submit">
    <form action="?step=reapply" method="post">
      <input type="hidden" name="id" value="contactForm">
      <input type="hidden" name="step" value="reapply">
      <input type="hidden" name="takeover" value="{takeover}">
      <input type="submit" name="ACMS_POST_Form_Chain" value="入力画面へ戻る" id="btnToInput" class="btn btn-mini">
    </form>

    <form action="" method="post">
      <input type="hidden" name="id" value="contactForm">
      <input type="hidden" name="To[]" value="{email}">
      <input type="hidden" name="AdminReply-To[]" value="<{email}>">
      <input type="hidden" name="AdminFrom[]" value="<{email}>">
      <input type="hidden" name="step" value="result">
      <input type="hidden" name="takeover" value="{takeover}">
      <input type="submit" name="ACMS_POST_Form_Submit" value="送信する" id="btnSubmit" class="btn btn-primary">
    </form>
  <!-- /.submit --></div>

<!-- /.mail-form form-confirm --></div>

step#result（送信完了）

ステップ表示、ありがとうございました文、トップへのリンクという構成になる。

前のステップでhidden要素を追加することで、送信後に任意ページに移動させることもできる。

参照：応用編第1回：サンキューページを用意してコンバージョンを調べよう | フォーム | サポート・マニュアル | a-blog cms - Web制作者のためのCMS

contact_result.html

<div class="mail-form form-result">

  <ul class="mail-step">
    <li><span class="num">1</span> お客様情報の入力<span class="sep"></span></li>
    <li><span class="num">2</span> 送信内容の確認<span class="sep"></span></li>
    <li class="current"><strong><span class="num">3</span> 送信完了<span class="sep"></span></strong></li>
  </ul>

  <p>
    ありがとうございます。お問い合わせを受け付けました。<br>
    入力いただきましたアドレスに、確認メールを自動返信しております。ご確認ください。<br>
    <a href="%{BLOG_URL}">トップページにもどる</a>
  </p>

<!-- /.mail-form form-result --></div>