このチュートリアルを進めることでオリジナルデザインのメールフォームを作成する手順を確認できます。
下記１から３のステップでは、サンプルと同じフォームアイテム（input要素）のままオリジナルデザインに変更します。
４、５のステップでは任意のフォームアイテムを追加してオリジナルのフォームを完成させます。
インストール完了後にこのチュートリアルを進めてください。
このチュートリアルで作成する各画面（入力画面・確認画面・送信完了画面）のHTMLのことを、このメールフォームでは「テンプレート」と呼んでいます。
テンプレートの配置は以下になります。
├── contact/
│ ├── me_mailform メールフォーム本体
│ │ └── template/ テンプレート
│ │ ├── confirm.html 確認画面テンプレート
│ │ ├── entry.html 入力画面テンプレート
│ │ ├── error.html エラー画面テンプレート
│ │ └── send.html 送信完了画面テンプレート
│ └── index.php エントリースクリプト
└── readme.html お読みくださいファイルテンプレートファイル内で指定する画像・CSS・JSファイル等のパスは index.php からの相対パスで指定する必要があります。
※各テンプレートファイルは index.php で読み込まれて使用されます。ブラウザでテンプレートファイルを直接読み込むことはありません。
※パスの指定方法はサイトルートパスでも構いません。
<script src="./me_mailform/assets/js/jquery-1.11.1.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="./me_mailform/assets/js/memf.js" charset="UTF-8" type="text/javascript"></script>
<div id="error_message" class="alert alert-error">入力内容に誤りがあります。</div>
<form name="me_mailform" action="index.php" method="post">
<textarea name="comment" class="input-xxlarge" rows="10"></textarea>
<div id="comment_error" class="alert alert-error">エラーメッセージ</div>
<input type="text" name="name" class="input-xlarge" placeholder="例）山田 太郎" value="">
<div id="name_error" class="alert alert-error">エラーメッセージ</div>
<input type="text" name="email" class="input-xlarge" placeholder="例）info@example.com" value="">
<div id="email_error" class="alert alert-error">エラーメッセージ</div>
<input type="text" name="zipcode" class="input-mini" value="" onkeyup="memf.zipAddr('zipcode', '', 'addr')" placeholder="例）1000001" >
<div id="zipcode_error" class="alert alert-error">エラーメッセージ</div>
<input type="text" name="addr" class="input-xxlarge" value="" placeholder="例）東京都千代田区千代田1番1号">
<div id="addr_error" class="alert alert-error">エラーメッセージ</div>
<input type="submit" class="btn btn-primary" value="確認画面へ">
</form>
<span id="powered_by_me"></span>[flow]
;; 確認画面を使用する
;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、
;; メールを送信します。
;; この項目を 0 にすると、global セクションの session.cache_limiter の値は無効になります。
use_confirm = 0著作権者表示（Powered by MicroEngine）が正しく表示されていることを確認してください。
HTMLの構造やCSS（displayプロパティやマイナスマージンや文字色・背景色等々）やJavaScriptによって著作権者表示が隠れないように注意してください。
<form name="me_mailform" action="index.php" method="post">
<td id="comment"></td>
<td id="name"></td>
<td id="email"></td>
<td>〒<span id="zipcode"></span></td>
<td id="addr"></td>
<input name="_back" type="submit" class="btn" value="戻る">
<input name="commit" type="submit" class="btn btn-primary" value="送信する">
</form>
<span id="powered_by_me"></span>[flow]
;; 確認画面を使用する
;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、
;; メールを送信します。
;; この項目を 0 にすると、global セクションの session.cache_limiter の値は無効になります。
use_confirm = 1<span id="name"></span>様、お問い合わせありがとうございました。
<span id="powered_by_me"></span>フォームの入力項目を追加・削除する方法について説明します。
item.ini という設定ファイルで、フォームアイテムを定義します。
item.ini の設定方法については、設定リファレンスをご確認ください。
設定例：
;; お問い合わせ内容
[comment]
type = textarea
label = "お問い合わせ内容"
required = 1
maxlength = 500[tel]
type = text
label = "電話番号"<tr>
<th>電話番号</th>
<td><input type="text" name="tel">
<div id="tel_error" class="alert alert-error">エラーメッセージ</div></td>
</tr><tr>
<th>電話番号</th>
<td id="tel"></td>
</tr>■電話番号
{tel}[fax]
type = text
label = "FAX番号"メール本文を変更する方法と、入力内容を置換するルールについて説明します。
■お問い合わせ内容
{comment}