このチュートリアルを進めることでオリジナルデザインのメールフォームを作成する手順を確認できます。
下記１から３のステップでは、サンプルと同じフォームアイテム（input要素）のままオリジナルデザインに変更します。
４、５のステップでは任意のフォームアイテムを追加してオリジナルのフォームを完成させます。
インストール完了後にこのチュートリアルを進めてください。
このチュートリアルで作成する各画面（入力画面・確認画面・送信完了画面）のHTMLのことを、このメールフォームでは「テンプレート」と呼んでいます。
テンプレートの配置は以下になります。
├── contact/
│ ├── me_mailform メールフォーム本体
│ │ └── template/ テンプレート
│ │ ├── confirm.html 確認画面テンプレート
│ │ ├── entry.html 入力画面テンプレート
│ │ ├── error.html エラー画面テンプレート
│ │ └── thanks.html 送信完了画面テンプレート
│ └── index.php エントリースクリプト
└── readme.html お読みくださいファイルテンプレートファイル内で指定する画像・CSS・JSファイル等のパスは index.php からの相対パスで指定する必要があります。
※各テンプレートファイルは index.php で読み込まれて使用されます。ブラウザでテンプレートファイルを直接読み込むことはありません。
※パスの指定方法はサイトルートパスでも構いません。
<div id="error_message" class="alert alert-danger">入力内容に誤りがあります。</div>
<form name="me_mailform" action="index.php" method="post" enctype="multipart/form-data">
< id="comment" name="comment" class="form-control" rows="10" ></textarea>
<div id="comment_error" class="alert alert-danger">エラーメッセージ</div>
<input type="text" id="name" name="name" class="form-control" placeholder="例）山田 太郎" value="" >
<div id="name_error" class="alert alert-danger">エラーメッセージ</div>
<input type="email" id="email" name="email" class="form-control" placeholder="例）info@example.com" value="" >
<div id="email_error" class="alert alert-danger">エラーメッセージ</div>
<input type="text" id="zipcode" name="zipcode" class="form-control" value="" placeholder="例）1000001">
<div id="zipcode_error" class="alert alert-danger">エラーメッセージ</div>
<input type="button" class="btn btn-info" value="住所を自動入力" onclick="memf.zipAddrRun('zipcode', '', 'addr'); return false;" title="郵便番号から住所を自動入力する">
<input type="text" id="addr" name="addr" class="form-control" value="" placeholder="例）東京都千代田区千代田1番1号">
<div id="addr_error" class="alert alert-danger">エラーメッセージ</div>
<input type="submit" class="btn btn-primary" value="確認画面へ">
</form>
<span id="powered_by_me"></span>
<script src="./me_mailform/assets/js/memf.js" charset="UTF-8" type="text/javascript"></script>[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" enctype="multipart/form-data">
<div id="comment"></div>
<div id="name"></div>
<div id="email"></div>
<span>〒</span><span id="zipcode"></span>
<div id="addr"></div>
<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 = "電話番号"<div class="form-group row">
<label for="tel" class="col-sm-3 col-form-label">電話番号</label>
<div class="col-sm-9">
<input type="text" id="tel" name="tel" class="form-control" value="">
<div id="tel_error" class="alert alert-danger" role="alert">エラーメッセージ</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">電話番号</label>
<div class="col-sm-9">
<div id="tel"></div>
</div>
</div>■電話番号
{tel}[fax]
type = text
label = "FAX番号"メール本文を変更する方法と、入力内容を置換するルールについて説明します。
■お問い合わせ内容
{comment}