チュートリアル

このチュートリアルを進めることでオリジナルデザインのメールフォームを作成する手順を確認できます。
下記1から3のステップでは、サンプルと同じフォームアイテム(input要素)のままオリジナルデザインに変更します。
4、5のステップでは任意のフォームアイテムを追加してオリジナルのフォームを完成させます。
インストール完了後にこのチュートリアルを進めてください。

  1. 入力画面を作成する
  2. 確認画面を作成する
  3. 送信完了画面を作成する
  4. フォームアイテムを追加・削除する
  5. メール本文を変更する

はじめに

テンプレートについて

このチュートリアルで作成する各画面(入力画面・確認画面・送信完了画面)のHTMLのことを、このメールフォームでは「テンプレート」と呼んでいます。
テンプレートの配置は以下になります。

├── contact/
│   ├── me_mailform             メールフォーム本体
│   │   └── template/           テンプレート
│   │       ├── confirm.html    確認画面テンプレート
│   │       ├── entry.html      入力画面テンプレート
│   │       ├── error.html      エラー画面テンプレート
│   │       └── thanks.html     送信完了画面テンプレート
│   └── index.php               エントリースクリプト
└── readme.html                 お読みくださいファイル

テンプレートファイル内で指定する画像・CSS・JSファイル等のパスは index.php からの相対パスで指定する必要があります。

※各テンプレートファイルは index.php で読み込まれて使用されます。ブラウザでテンプレートファイルを直接読み込むことはありません。
※パスの指定方法はサイトルートパスでも構いません。

1. 入力画面を作成する

  1. オリジナルデザインの入力画面を作成する。
    オリジナルの入力画面をオーサリングソフトなどを使って作成します。
    テンプレートファイルは index.php で読み込まれるため、オリジナルデザインのHTMLファイルも index.php に位置するものとして画像やCSS等のリンクを定義してください。
  2. オリジナルデザインの入力画面に、サンプルのHTML要素を移植します。
    サンプルの entry.html に含まれるフォーム用のタグ(form, textarea, input, script, div, span)をオリジナルデザインのHTML内にコピーします。
    このメールフォームは、特定のID属性を持った要素内にエラーメッセージを表示する仕組みです。
    エラーメッセージを表示するためのタグのID属性は、アンダースコア区切りで "error"という単語を使っています。このエラーメッセージを表示するタグもコピーします。
    例:"error_message", "comment_error", "name_error", "email_error"
    著作権者表示(バックリンク)が表示される powered_by_me というID属性を持つタグもコピーします。
    以下はコピーする部分を抜粋したものです。HTMLの構造に合わせて適切に配置してください。
    <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" required></textarea>
      <div id="comment_error" class="alert alert-danger">エラーメッセージ</div>
      <input type="text" id="name" name="name" class="form-control" placeholder="例)山田 太郎" value="" required>
      <div id="name_error" class="alert alert-danger">エラーメッセージ</div>
      <input type="email" id="email" name="email" class="form-control" placeholder="例)info@example.com" value="" required>
      <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>
    ※class属性はオリジナルデザインのCSSに合わせて調整してください。
    ※JavaScriptファイル(memf.js)は住所入力支援機能を使う場合に必要になります。
  3. 作成した入力画面をテンプレートディレクトリに配置します。
    作成したオリジナルの入力画面を、サンプルのHTML(me_mailform/template/entry.html)と差し替えます。
  4. 設定を変更します。
    このステップでは確認画面を使わずに動作確認をするために、config.ini を編集します。
    config.ini 内の use_confirm 項目に 0 をセットします。
    [flow]
    ;; 確認画面を使用する
    ;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、
    ;; メールを送信します。
    ;; この項目を 0 にすると、global セクションの session.cache_limiter の値は無効になります。
    use_confirm = 0
  5. 動作確認を行います。
    ブラウザでフォーム画面にアクセスして、問い合わせ内容を入力して「確認画面へ」ボタンをクリックします。
    メールが送信されていることも確認します。
    また、入力画面で必須項目を未入力にしてエラーを発生させます。
    その際に、エラーメッセージが表示されることを確認します。

    著作権者表示(Powered by MicroEngine)が正しく表示されていることを確認してください。
    HTMLの構造やCSS(displayプロパティやマイナスマージンや文字色・背景色等々)やJavaScriptによって著作権者表示が隠れないように注意してください。

2. 確認画面を作成する

  1. オリジナルデザインの確認画面を作成する。
    オリジナルの確認画面をオーサリングソフトなどを使って作成します。
  2. オリジナルデザインのHTMLに、サンプルのHTML要素を移植します。
    サンプルの confirm.html に含まれるフォーム用のタグ(form, input)をオリジナルデザインのHTML内にコピーします。
    入力内容を表示させたいHTML要素にIDを指定します。
    例えば、お問い合わせ内容を表示させたいHTML要素には、id="comment" を指定します。
    著作権者表示(バックリンク)が表示される powered_by_me というID属性を持つタグもコピーします。
    以下はコピーする部分を抜粋したものです。HTMLの構造に合わせて適切に配置してください。
    <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>
    ※入力項目のNAME属性に対応したID名を持つ要素内に、入力内容が置き換えられる仕組みです。要素は、liやdivやspanなどでもかまいません。
    ※複数アイテムを1つの td や div 内に配置したいケースでは、複数の span 要素を用意してそれぞれにIDを指定してください。
  3. 作成した確認画面をテンプレートディレクトリに配置します。
    作成したオリジナルの確認画面を、サンプルのHTML(me_mailform/template/confirm.html)と差し替えます。
  4. 設定を変更します。
    このステップでは確認画面を使うので、config.ini を編集します。
    config.ini 内の use_confirm 項目に 1 をセットします。
    [flow]
    ;; 確認画面を使用する
    ;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、
    ;; メールを送信します。
    ;; この項目を 0 にすると、global セクションの session.cache_limiter の値は無効になります。
    use_confirm = 1
  5. 動作確認を行います。
    ブラウザでフォーム画面にアクセスして、問い合わせ内容を入力して「確認画面へ」ボタンをクリックします。
    確認画面が表示されて、入力画面で入力した値が表示されることを確認します。
    確認画面で、「送信する」ボタンをクリックします。
    メールが送信されることを確認します。

3. 送信完了画面を作成する

  1. オリジナルデザインの送信完了画面を作成する。
    オリジナルの確認画面をオーサリングソフトなどを使って作成します。
  2. オリジナルデザインのHTMLに、サンプルのHTML要素を移植します。
    サンプルの thanks.html に含まれる一部のタグをオリジナルデザインのHTML内にコピーします。
    入力内容を表示させたいHTML要素にIDを指定します。
    例えば、お名前を表示させたいHTML要素には、id="name" を指定します。
    著作権者表示(バックリンク)が表示される powered_by_me というID属性を持つタグもコピーします。
    以下はコピーする部分を抜粋したものです。HTMLの構造に合わせて適切に配置してください。
    <span id="name"></span>様、お問い合わせありがとうございました。
    <span id="powered_by_me"></span>
  3. 作成した送信完了画面をテンプレートディレクトリに配置します。
    作成したオリジナルの確認画面を、サンプルのHTML(me_mailform/template/thanks.html)と差し替えます。
  4. 動作確認を行います。
    ブラウザでフォーム画面にアクセスします。問い合わせ内容を入力して確認画面に遷移し、送信ボタンをクリックします。
    送信完了画面が表示されて、入力画面で入力した値が表示されることを確認します。

4. フォームアイテムを追加・削除する

フォームの入力項目を追加・削除する方法について説明します。

フォームアイテムの設定ファイルについて

item.ini という設定ファイルで、フォームアイテムを定義します。
item.ini の設定方法については、設定リファレンスをご確認ください。
設定例:

;; お問い合わせ内容
[comment]
type = textarea
label = "お問い合わせ内容"
required = 1
maxlength = 500
先頭に ; (半角セミコロン)が置かれている行は無効になります。
フォームアイテムを追加する
  1. item.ini にアイテムに関する記述を追加する。
    例えば、電話番号欄としてテキストボックス追加する場合は次を item.ini に記入します。
    [tel]
    type = text
    label = "電話番号"
  2. 入力画面にフォーム要素を追加
    input要素を用意して、NAME属性に tel を指定します。 エラーメッセージ用の要素を用意して、ID属性に tel_error を指定します。
    <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>
    
  3. 確認画面に入力内容を表示
    入力内容を表示させたいHTML要素のID属性に tel を指定します。
    ※送信完了画面も同様の指定が可能です。
    <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>
  4. メール本文の指定
    メール本文に、入力内容を表示させたい場合は、body.txt や reply_body.txt に {tel} を記入します。
    ■電話番号
    {tel}
フォームアイテムを削除する
  1. item.ini から削除したいアイテムの記述を削除する。
    ここでは、fax アイテムを削除します。
    [fax]
    type = text
    label = "FAX番号"
  2. 入力画面・確認画面・送信完了画面・メール本文から fax に関する記述を削除します。

5. メール本文を変更する

メール本文を変更する方法と、入力内容を置換するルールについて説明します。

  1. メール本文を独自の文章に変更する。
    管理者用メール本文は、body.txt ファイルの内容が使用されます。
    自動返信メールの本文は、reply_body.txt ファイルの内容が使用されます。 body.txt や reply_body.txt を独自の文章に変更します。
  2. フォームに入力した内容をメール本文に差し込む。
    フォームの入力内容を、メール本文に差し込むには、メール本文に特定のキーワードを記入します。
    例えば、例1のフォームの場合で、お問い合わせ内容を差し込むには、body.txt内に {comment} を記入します。
    ■お問い合わせ内容
    {comment}
    メール送信時に {comment} というキーワードがフォームの入力内容に置換されます。