本ドキュメントは、MicroEngine メールフォーム 0.2.X のインストール方法およびカスタマイズ方法について説明します。

最新版のマニュアルはこちらからお探しください。

  1. アーカイブファイルを展開します。
    例:microengine-mf-0.2.0.zip を展開します。
  2. 展開すると以下の構成になります。
    /microengine-mf-0.2.0/
    |-- contact/
    |   |-- me_mailform/                メールフォームディレクトリ
    |   |   |-- config/                 設定ファイルディレクトリ
    |   |   |   |-- .htaccess           アクセス制御ファイル
    |   |   |   |-- body.txt            メール本文
    |   |   |   |-- config.ini          設定ファイル
    |   |   |   |-- item.ini            フォーム項目設定ファイル
    |   |   |   `-- responder_body.txt  自動応答メール本文
    |   |   |-- log/                    ログディレクトリ
    |   |   |   `-- .htaccess           アクセス制御ファイル
    |   |   |-- public/                 公開ディレクトリ
    |   |   |   `-- captcha_image.php   CAPTCHA画像スクリプト
    |   |   |-- script/                 スクリプトディレクトリ
    |   |   |   |-- kcaptcha/           CAPTCHAライブラリディレクトリ
    |   |   |   |-- .htaccess           アクセス制御ファイル
    |   |   |   |-- Me_MailForm.php     メールフォームスクリプト本体
    |   |   |   |-- qdmail.php          メール送信ライブラリ
    |   |   |   |-- qdsmtp.php          メール送信ライブラリ
    |   |   |   `-- simple_html_dom.php DOM操作ライブラリ
    |   |   `-- view/                   テンプレートディレクトリ
    |   |       `-- error.html          エラー画面テンプレート
    |   |-- confirm.html                確認画面テンプレート
    |   |-- entry.html                  入力画面テンプレート
    |   |-- index.php                   エントリースクリプト
    |   `-- send.html                   送信画面テンプレート
    |-- install.html
    `-- readme.html
    ※kcaptchaディレクトリ以下の表示は省略しています。
    ※ログを書き出す設定の場合は、ログディレクトリ以下にファイルが書き出されます。
  3. 設定ファイル(contact/me_mailform/config/config.ini)を修正します。
    [mail]セクションの 「from」, 「from_name」, 「to」 項目を設定します。
    ※設定ファイル内のセクションとは、"[]"(角かっこ)で区切られた範囲を指します。[mail]セクションとは、"[mail]"行から、次に"[]"(角かっこ)で囲われた行までの範囲のことです。
    「from」には送信元となるメールアドレスを指定します。
    「from_name」には、送信元の表示名を指定します。
    「to」には、このフォームからのメールを受け取るメールアドレスを指定します。
    例:(config.ini)
    [mail]
    ;; ★★★ 必ず変更してください!!!
    ;; 送信元メールアドレス
    from = user@example.com
    
    ;; ★★★ 必ず変更してください!!!
    ;; 送信元表示名
    ;; ここで指定した値が差出人の名前として表示されます。例: 山田 太郎 <user@example.com>
    from_name = "山田 太郎"
    
    ;; ★★★ 必ず変更してください!!!
    ;; 送信先メールアドレス
    ;; このメールフォームを受け取りたいメールアドレスを指定します
    to = info@microengine.jp
  4. ファイルをサーバーにアップロードします。
    contactディレクトリをまるごとサーバーにアップロードします。
    あるいは、既存ディレクトリの配下にcontactディレクトリ配下の全ファイルをアップロードしてもかまいません。
  5. ブラウザでアクセスします。
    contactディレクトリをWebサーバーのドキュメントルートに配置した場合、http://Webサーバー/contact/index.php にアクセスします。
    フォームの入力画面が表示されるので、問い合わせ内容を入力します。
    確認画面に遷移して、送信ボタンをクリックします。
  6. 設定ファイルで指定した送信先メールアドレスに、メールが届いていることを確認します。

このメールフォームに含まれる画面テンプレートはサンプルです。 オリジナルのデザインを元にフォーム画面のHTMLを作成して使用することができます。

このチュートリアルを進めることで、オリジナルデザインのフォームの作成方法を学習できます。

この例では、サンプルフォームから次の項目を省略します。

  1. オリジナルデザインのフォームを作成
    オリジナルのフォーム画面をオーサリングソフトなどを使って作成します。
  2. オリジナルデザインに、サンプルのHTML要素を移植します。
    サンプルの entry.html に含まれるフォーム項目をオリジナルデザインのHTML内に配置します。
    具体的には、form, textarea, input, select タグをオリジナルのHTML内に移植します。
    フォームを構成するテーブルの「画像認証」行は移植しません。
    submitボタンのvalue属性値は、「送信」に変更します。
    <input type="submit" value="送信">
    エラーメッセージを表示するためのタグも移植します。
    エラーメッセージを表示するためのタグには、"error_message" や "name_error" などのようにid属性に "error"という単語が含まれています。
    作成したオリジナルのフォーム画面を、サンプルのentry.htmlと差し替えます。
  3. 設定を変更します
    今回の例では確認画面を使わないので、config.ini を編集します。
    config.ini 内の use_confirm 項目に 0 をセットします。
    [flow]
    ;; 確認画面を使用する
    ;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、
    ;; メールを送信します
    use_confirm = 0
    自動応答メールを省略するので、config.iniを編集します。
    config.ini 内の responder_to 項目行の先頭に ";"(セミコロン)を入力します。
    [mail]
    ;;
    ;; 省略
    ;;
    
    ;; 自動応答メールのフォーム項目名
    ;; フォームの項目名を指定すると、その項目の入力値を宛先としてメールを送信します
    ;responder_to = email
    CAPTCHA(画像認証)を省略するために、item.ini 内の次の部分の先頭に ";"(セミコロン)を入力します。
    ;; 画像認証
    ;[captcha]
    ;type = captcha
    ;label = "画像認証"
    ※設定ファイル(config.ini及びitem.ini)の行頭に ";"(セミコロン)を入力すると、その行の設定を無効にできます。
  4. 動作を確認します
    ブラウザでフォーム画面にアクセスして、問い合わせ内容を入力して送信ボタンをクリックします。
    これで、メールが送信されることを確認します。
    また、必須項目を未入力にしてエラーを発生させます。
    その際に、エラーメッセージが表示されることを確認します。

例1の状態から、確認画面を追加する方法を説明します。

  1. オリジナルデザインの確認画面を作成
    オーサリングソフトなどを使って作成します。
    例1のフォームの入力項目と同じ項目を用意します。
  2. オリジナルデザインに、サンプルのHTML要素を移植します。
    サンプルの confirm.html に含まれるフォーム項目をオリジナルデザインのHTML内に配置します。
    具体的には、form, input タグをオリジナルのHTML内に移植します。
  3. 入力内容を表示させたいHTML要素にIDを指定します。
    例えば、お問い合わせ内容を表示させたいHTML要素には、id="comment" を指定します。
    <tr>
      <th>お問い合わせ内容</th>
      <td id="comment"></td>
    </tr>
    ※入力項目のNAMEに対応したID名を持つ要素内が、入力内容に置換される仕組みです。要素は、liやdivなどでもかまいません。
  4. 入力画面のボタンの文言を変更します。
    entry.html の「送信」ボタンの表示を、「確認画面へ」に変更します。
    <input type="submit" value="確認画面へ">
  5. 設定を変更します。
    今回の例では確認画面を使うので、config.ini を編集します。
    config.ini 内の use_confirm 項目に 1 をセットします。
    [flow]
    ;; 確認画面を使用する
    ;; この項目に 0 を指定するか、この項目をコメントアウトすると、確認画面を使用せずに、
    ;; メールを送信します
    use_confirm = 1
  6. 動作を確認します。
    ブラウザでフォーム画面にアクセスして、問い合わせ内容を入力して「確認画面へ」ボタンをクリックします。
    これで、確認画面が表示されて、入力画面で入力した値が表示されることを確認します。
    確認画面で、「送信する」ボタンをクリックします。
    これで、メールが送信されることを確認します。

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

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

フォーム登録時の情報を差し込む方法を説明します。 例3と同様に body.txt を編集します。

フォーム登録時の日時、IP、ホスト、ユーザーエージェント をメール本文内に差し込みたい場合は、次のキーワードを body.txt に記入します。

日時:{_date}
IP:{_ip}
ホスト:{_host}
ユーザーエージェント:{_ua}

※"{}" 波括弧で囲われた部分がフォーム登録時の情報を表すキーワードです。

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

フォーム項目の設定ファイルについて

item.ini という設定ファイルで、フォーム項目を定義します。
設定例:

;; お問い合わせ内容
[comment]
type = textarea
label = "お問い合わせ内容"
required = 1
maxlength = 500

項目名

"[]"(角かっこ)内に指定した文字列が項目名になります。 上の例の場合、"comment" が項目名とります。 この項目名が、入力画面・確認画面・メール本文で利用される名前となります。

入力画面では、input要素やtextarea要素のNAME属性として指定します。

エラーメッセージを表示させたいHTML要素に、項目名+"_error" のID属性を指定します。 この場合は、"comment_error"というID属性を指定した要素内にエラーメッセージが表示されます。

<tr>
  <th>お問い合わせ内容<span style="color:red;">※</span></th>
  <td><textarea name="comment" cols="50" rows="10"></textarea>
  <div id="comment_error" style="color:red;">エラーメッセージ</div></td>
</tr>

確認画面では、入力内容を表示させたい要素のID属性に"comment"を指定します。

<tr>
  <th>お問い合わせ内容</th>
  <td id="comment"></td>
</tr>

メール本文では、body.txt内の"{comment}"という文字列を入力内容に置換します。

■お問い合わせ内容
{comment}

type

入力フォームのinput要素に対応したtype属性を指定します。 typeには、次の名前を指定できます。

label

項目の表示名を指定します。
エラーメッセージでは、"label"の値に置き換えることができます。
例えば、label = "お名前" を指定していた場合、エラーメッセージの設定文内の"{label}"が置換されて、「お名前を入力してください。」というようなエラーメッセージが表示されます。

※ エラーメッセージの設定は、config.ini内の[message]セクションで指定します。
※ label項目と、エラーメッセージの置換機能は、バージョン0.2.2で追加されました。

required

必須項目にしたい場合は "1" を指定します。

required = 1

maxlength

最大文字数を指定したい場合は、文字数を指定します。
例:最大文字数を500文字に指定する

maxlength = 500

multiple

checkboxあるいは、selectタイプで複数要素を選択したい場合に "1" を指定します。
※ html側でもname属性に "[]" を付けるなどの対応が必要です。
※ バージョン0.2.1で追加された機能です。

multiple = 1
  1. item.ini に項目に関する記述を追加する。
    例えば、テキストボックス追加する場合は次の行をitem.iniに記入します。
    [foo]
    type = text
    label = "追加項目"
  2. 入力画面にフォーム要素を追加
    input要素を用意して、NAME属性に"foo"を指定します。 エラーメッセージ用の要素を用意して、ID属性に"foo_error"を指定します。
    <tr>
      <th>追加項目<span style="color:red;">※</span></th>
      <td><input type="text" name="foo">
      <div id="foo_error" style="color:red;">エラーメッセージ</div></td>
    </tr>
  3. 確認画面の指定
    確認画面がある場合は、入力内容を表示させたいHTML要素のID属性に"foo"を指定します。
    <tr>
      <th>追加項目</th>
      <td id="foo"></td>
    </tr>
  4. メール本文の指定
    メール本文に、入力内容を表示させたい場合は、body.txtに "{foo}" を記入します。
    ■追加項目
    {foo}
  1. item.ini から削除したい項目の記述を削除する。
    ここでは、"foo"項目を削除します。
    [foo]
    type = text
    label = "追加項目"
  2. 入力画面・確認画面・メール本文からfooに関する記述を削除します。

カスタマイズ例について説明します。

初期状態では、index.phpにブラウザでアクセスするとフォーム画面が表示されますが、このファイル名を変更することができます。
例えば、inquiry.php というファイル名でフォームを運用したい場合は、単にファイルをリネームするだけです。
それだけで、inquiry.php でフォームが動作します。
※entry.html, confirm.html, send.htmlもリネームできますが、その場合はconfig.iniの設定変更が必要です。

Webサーバー内のSendmailプログラムからではなく、他のメールサービスや自社のメールサーバーを経由してメールを送信する方法について説明します。 ここでは、Gmailを利用してメールを送信します。
※Gmailのメールアドレスは事前に取得しておいてください。

SMTP送信機能を利用するには、config.ini の [smtp]セクションに設定を追記します。
初期状態では、[smtp]セクション自体がコメントアウトされて無効になっています。
「認証なし」、「SMTP認証」、「POP Before SMTP」の認証方法の違いにより設定する項目が異なります。
ここでは、Gmailサービスを利用して、SMTP認証を設定する例を紹介します。
例:

;;;===========================
;;; smtp セクション ※SMTP認証の設定例
;;; SMTPサーバーを指定してメールを送信する場合に使用します。
[smtp]
;; SMTP_AUTH:SMTP認証
;; プロトコル
protocol = SMTP_AUTH
;; ホスト名
host = ssl://smtp.gmail.com
;; ポート番号
port = 465
;; ユーザー名
user = memailform@gmail.com
;; パスワード
password = yourpassword

※ユーザー名・パスワードはご自身のものを指定してください。
※利用サービスによってホスト名やポート番号の設定値が異なります。
SMTP送信機能を利用するメリットとして、スパムと判定されにくいということと、sendmailプログラムを持たないWebサーバーからでもメールを送信できるという利点があります。

同じname属性のcheckboxを複数用意する方法について説明します。
※ これは、バージョン0.2.1で追加された機能です。
入力画面(entry.html)では、name属性に "[]"(角カッコ)を付けます。
例:

<input type="checkbox" id="pamphlet0" name="pamphlet[]" value="会社案内を希望する"><label for="pamphlet0">会社案内を希望</label>
<input type="checkbox" id="pamphlet1" name="pamphlet[]" value="商品案内を希望する"><label for="pamphlet1">商品案内を希望</label>

※ この例では、name属性に "pamphlet[]" と指定しています。

item.ini で該当項目のセクションにmultipleを指定します。

;; 資料請求
[pamphlet]
type = checkbox
label = "資料請求"
multiple = 1

このように指定すると、確認画面やメール本文では選択された値を ", "(半角カンマ+半角スペース)で連結して表示します。

会社案内を希望する, 商品案内を希望する

複数項目選択時の連結文字列を変更するには、config.iniの[checkbox]セクションのdelimiter項目を変更します。
複数項目の連結に改行文字列を指定する例:

;;; checkbox セクション
[checkbox]
delimiter = "
"

selectタイプ(プルダウンメニュー)で複数項目を選択する方法について説明します。
※ これは、バージョン0.2.1で追加された機能です。
入力画面(entry.html)では、name属性に "[]"(角カッコ)を付けます。
multiple="multiple" 属性も追加します。 例:

<select name="address[]" multiple="multiple">

※ この例では、name属性に "address[]" と指定しています。multiple属性も追加しています。

item.ini で該当項目のセクションにmultipleを指定します。

;; 都道府県
[address]
type = select
label = "都道府県"
multiple = 1

このように指定すると、確認画面やメール本文では選択された値を ", "(半角カンマ+半角スペース)で連結して表示します。

栃木県, 東京都, 和歌山県

複数項目選択時の連結文字列を変更するには、config.iniの[select]セクションのdelimiter項目を変更します。
複数項目の連結に改行文字列を指定する例:

;;; select セクション
[select]
delimiter = "
"

php 拡張子のテンプレートファイルを用意することで、テンプレート内でPHPを実行できます。
※ これは、バージョン0.2.1で追加された機能です。
拡張子がphp以外のテンプレートファイルでは、PHPスクリプトの記述があってもPHPは実行されません。
PHPを実行するためには、php拡張子のテンプレートファイルを用意すると同時に、config.iniの[step]セクションの設定を実際のファイル名に変更します。

;;; step セクション
[step]
;; 入力画面で使用するテンプレートファイル
entry = entry.php

;; 確認画面で使用するテンプレートファイルを指定
confirm = confirm.php

;; 送信画面(送信完了後)で使用するテンプレートファイルを指定
send = send.php

;; エラー用画面のテンプレートファイルを指定
error = me_mailform/view/error.php

これは、各テンプレートファイルの拡張子をphpに変更した例です。
※ index.phpと同じディレクトリにあればファイル名だけを指定します。
※ なお、テンプレートファイルは、viewディレクトリに移動すると直アクセスを禁止できます。(viewディレクトリは .htaccessの指定によりブラウザなどでアクセス出来ないようにしています。)

メール本文と同様にメールの件名を入力値で置換することができます。
管理者宛と自動応答メールの件名は、それぞれ config.ini の"subject"と"responder_subject"で指定します。
次のように "subject" に "{name}" のように波括弧で項目名を指定すると、その部分がフォームの入力値に置き換えられます。

;; 件名
subject = "{name}様からお問い合わせがありました"

※ 件名を置換できるタイプは "text, select, radio, checkbox, hidden, email" の6種類です。
※ 件名を置換する機能はバージョン0.2.2で追加されました。

フォームにemailタイプの項目がある場合、その入力値を管理者宛メールの送信元に指定できます。
次のように config.ini の from_item にemailタイプの項目名を指定します。

;; フォームの項目名を指定すると、その項目の入力値を送信元メールアドレスとしてメールを送信します
from_item = email

このようにすると、メールの送信元がフォームの入力値になるため、届いたメールにそのまま返信できます。
送信元表示名も次のように項目名を指定すると、その入力値が表示名となってメールが送信されます。

;; フォームの項目名を指定すると、その項目の入力値を送信元表示名としてメールを送信します
from_name_item = name

※ SMTP送信機能を利用した場合は、ここで指定した値が無効になる場合があります。
※ この機能はバージョン0.2.2で追加されました。

フォームの入力値が妥当でない場合に表示するエラーメッセージを変更できます。
config.ini の [message] セクションでエラーの種別毎にメッセージを指定できます。
例:

[message]
;; エラーメッセージID
;; 入力画面でエラー発生時にだけ表示したい見出しの要素名を指定します。
;; エラーがない場合は、入力画面ではこのIDの要素を削除します。
error_message_id = error_message

;; 選択項目の未選択エラーメッセージ
;; selectタイプ、radioタイプの必須項目エラーが発生した場合のメッセージを指定します。
required_option = "{label}を選択してください。"

;; 入力項目の未選択エラーメッセージ
;; textタイプ、passwordタイプ、textareaタイプで必須項目エラーが発生した場合のメッセージを指定します。
required = "{label}を入力してください。"

;; 最大文字数エラーが発生した場合のメッセージを指定します。
maxlength = "{label}は{maxlength} 文字以内で入力してください。"

;; メールアドレス書式エラーが発生した場合のメッセージを指定します
email = "正しい{label}を入力してください。"

;; CAPTCHA(画像認証)に失敗した場合のメッセージを指定します
captcha = "{label}に失敗しました。"

;; リファラーエラー
referer = "リファラーを確認できません。"

;; メール送信失敗
send = "メールの送信に失敗しました。"

このサンプルのように、{label} を指定するとその項目の表示名(item.iniのlabel項目)と置換できます。
※ label項目と、エラーメッセージの置換機能は、バージョン0.2.2で追加されました。