ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

フリーのメールフォーム「TransmitMail」の使い方、設置方法とカスタマイズ

      2016/06/17

 - HTML CSS

フリーのphpメールフォーム「TransmitMail」の使い方、設置方法、カスタマイズをまとめます。フリーのメールフォームは結構秀逸なものもたくさんありますが、ファイル添付も可能なものを探していましたら、TransmitMailが見つかりました。

設置は比較的簡単な方です。MITライセンスで商用利用も可能とのことです。汎用性も高いので、使いやすいと思います。

ファイルのダウンロードはGitHubのページ内の「Clone or download」の「Download ZIP」から行えます。

TransmitMail設置方法

zipファイルをダウンロードできますので、解凍してファイルをサーバーにアップロードします。以下のファイルが入っています。
TransmitMailダウンロードファイル

input.htmlがフォームページのテンプレートHTMLです。
confirm.htmlが確認ページのテンプレートHTMLです。confirm_kobetsu.htmlは個別に記述する場合用です。
finish.htmlが完了ページのテンプレートHTMLです。
error.htmlがエラーページのテンプレートHTMLです。
index.phpでフォームページを表示します。

中身はサンプルのコードが書かれています。

公式の設置方法ページはこちらです。
設置方法(v2) · dounokouno/TransmitMail Wiki

ファイルのパーミッションは上記ページを確認してください。
サーバーにファイルをアップロードすると、以下URLでフォームぺージが表示されます。

http://{TransmitMail設置ディレクトリ}/index.php

チェックモード

TransmitMailにはチェックモードとして、設定内容をチェックできます。チェックモードをONにしている場合は以下URLで設定内容を確認できます。初期設定は「ON」です。公開時は忘れずにOFFにしましょう。(設定ファイルで変更)

http://{TransmitMail設置ディレクトリ}/index.php?checkmode

公式デモのチェックモード
http://etc.dounokouno.com/TransmitMail/demo/index.php?checkmode

設定ファイルの記述方法

設定ファイルはconfigフォルダの中にあるconfig.yml.sampleを参考にして作成します。config.yml.sampleには設定のサンプルが記述されています。
config.yml.sampleからconfig.ymlに変更してアップロードします。
configフォルダ

config.json.sample、config.php.sampleは使用しません。(以前のバージョンのもの?)

必要なファイルは、config.yml、mail_body.txt、mail_auto_reply_body.txtです。
config.ymlに設定内容を記述して、アップロードします。

mail_body.txtは、送信メール本文です。mail_auto_reply_body.txtは、自動返信メール本文です。自動返信を使用しない場合は不要です。

config.yml設定内容サンプル、書き方

公式の設定ファイルの記述方法ページはこちらです。
設定ファイルの記述方法(v2) · dounokouno/TransmitMail Wiki

config:
 to_email: info@example.com //送信先メールアドレス
 to_subject: [株式会社テスト]お問い合わせ //送信メールの件名
 auto_reply: true //自動返信メール機能の利用(true:有効 false:無効)
 auto_reply_email: メールアドレス //自動返信メールの宛先(※name="メールアドレス"のvalue宛に送信)
 auto_reply_subject: [株式会社テスト]お問い合わせありがとうございます //送信メールの件名
 auto_reply_from_email: no-reply@example.com //自動返信メールの送信元メールアドレス
 checkmode: 2 //チェックモードの利用(0:無効 1:簡易有効 2:詳細有効)
 file: true //ファイル添付機能の利用(true:有効 false:無効)
 file_allow_extension: gif,jpg,jpeg,png //ファイル添付を許可する拡張子
 file_max_size: 512000 //ファイル添付の1ファイルの上限サイズ(Byte)例: 512000Bytes = 500KB
 file_retention_period: 1800 //添付ファイルのファイル保存期間(秒)例: 30分 = 1800秒
 csv_output: false //CSV出力機能の利用(true:有効 false:無効)
 deny_host: ^192.168.1.* //アクセス拒否ホスト設定

 //外部SMTPサーバーの利用
 # 外部 SMTP サーバーの利用
 # true => yes, false => no
 smtp: true

 # 外部 SMTP サーバーのホスト名
 # Gmailの場合: ssl://smtp.gmail.com もしくは tls://smtp.gmail. com
 smtp_host: ssl://smtp.gmail.com

 # 外部 SMTP サーバーのポート番号
 # Gmailの場合: 465
 smtp_port: 465

 # 外部 SMTP サーバーに接続するプロトコル(SMTP_AUTH, POP_BEFORE, SMTP)
 # Gmailの場合: SMTP_AUTH
 smtp_protocol: SMTP_AUTH

 # 外部 SMTP サーバーに接続するユーザー名
 # Gmailの場合: username@gmail.com
 smtp_user: username@gmail.com

 # 外部SMTPに接続するパスワード
 smtp_password: password

上記以外にも設定を変更可能な項目があります。lib/TransmitMail.php の68行目付近に記述されています。参考にしてください。

送信、自動返信メール本文

送信されるメールの本文は、mail_body.txtに記載します。自動返信メールの本文は、mail_auto_reply_body.txtに記載します。

公式のテンプレート記述方法ページ、送信メール本文、自動返信メール本文の箇所

フォームページの作成方法・カスタマイズ

フォームの入力項目の設定、カスタマイズの方法です。フォームのテンプレートは、input.htmlを編集します。編集前はサンプルが記述されています。自分の設置したい内容に編集しましょう。

公式のテンプレート記述方法ページはこちらです。
テンプレートの記述方法 · dounokouno/TransmitMail Wiki

基本的な設定内容については上記ページで詳細に記載されていますので、公式ページを参考にしてください。

以下サンプルコードは、簡易的に使用できるように作ったものです。参考にしてください。
最後の添付ファイルの項目以外すべて必須項目です。

1.名前入力(必須)
2.メールアドレス(必須)
3.メールアドレス確認(必須)2と同一チェック
4.電話番号(必須)数字とハイフンチェック
5.生年(必須)数字チェック
6.都道府県(必須)セレクトボックス
7.添付ファイル3つ設置

ソースサンプル

<form method="post" action="./index.php" enctype="multipart/form-data">
 {if:$global_errors}
 <div>
 <p>以下の入力項目が正しく入力されていません。</p>
 <div>
 <ul>
 {loop:$global_errors}
 <li><em>{$global_errors[]}</em></li>
 {/loop:$global_errors}
 </ul>
 </div>
 </div>
 {/if:$global_errors}
 <table>
 <tr>
 <th>お名前<span>必須</span></th>
 <td><input type="text" name="お名前" value="{$お名前}" />
 <input type="hidden" name="required[]" value="お名前" />
 {if:$required.お名前}
 <div class="error"><em>{$required.お名前}</em></div>
 {/if:$required.お名前} </td>
 </tr>
 <tr>
 <th>メールアドレス<span>必須</span></th>
 <td><input type="email" name="メールアドレス" value="{$メールアドレス}" />
 <input type="hidden" name="email[]" value="メールアドレス" />
 {if:$email.メールアドレス}
 {$email.メールアドレス}
 {/if:$email.メールアドレス}
 <input type="hidden" name="required[]" value="メールアドレス" />
 {if:$required.メールアドレス}
 <div class="error"><em>{$required.メールアドレス}</em></div>
 {/if:$required.メールアドレス} </td>
 </tr>
 <tr>
 <th>メールアドレス(確認)<span>必須</span></th>
 <td><input type="email" name="メールアドレス(確認)" value="{$メールアドレス(確認)}" />
 <input type="hidden" name="match[]" value="メールアドレス メールアドレス(確認)" />
 {if:$match.メールアドレス}
 <div class="error"><em>{$match.メールアドレス}</em></div>
 {/if:$match.メールアドレス}
 <input type="hidden" name="required[]" value="メールアドレス(確認)" />
 {if:$required.メールアドレス(確認)}
 <div class="error"><em>{$required.メールアドレス(確認)}</em></div>
 {/if:$required.メールアドレス(確認)} </td>
 </tr>
 <tr>
 <th>電話番号<span>必須</span></th>
 <td><input type="text" name="電話番号" value="{$電話番号}" />
 <input type="hidden" name="num_hyphen[]" value="電話番号" />
 {if:$num_hyphen.電話番号}
 <div class="error"><em>{$num_hyphen.電話番号}</em></div>
 {/if:$num_hyphen.電話番号}
 <input type="hidden" name="required[]" value="電話番号" />
 {if:$required.電話番号}
 <div class="error"><em>{$required.電話番号}</em></div>
 {/if:$required.電話番号} </td>
 </tr>
 <tr>
 <th>生年<span>必須</span></th>
 <td><input type="text" name="生年" value="{$生年}" />
 年
 <input type="hidden" name="num[]" value="生年" />
 {if:$num.生年}
 <div class="error"><em>{$num.生年}</em></div>
 {/if:$num.生年}
 <input type="hidden" name="required[]" value="生年" />
 {if:$required.生年}
 <div class="error"><em>{$required.生年}</em></div>
 {/if:$required.生年} </td>
 </tr>
 <tr>
 <th>都道府県<span>必須</span></th>
 <td><select name="都道府県" class="add">
 <option value="" {$selected.default}>【選択して下さい】</option>
 <optgroup label="北海道・東北地方">
 <option value="北海道" {$selected.都道府県.北海道}>北海道</option>
 <option value="青森県" {$selected.都道府県.青森県}>青森県</option>
 <option value="岩手県" {$selected.都道府県.岩手県}>岩手県</option>
 <option value="秋田県" {$selected.都道府県.秋田県}>秋田県</option>
 <option value="宮城県" {$selected.都道府県.宮城県}>宮城県</option>
 <option value="山形県" {$selected.都道府県.山形県}>山形県</option>
 <option value="福島県" {$selected.都道府県.福島県}>福島県</option>
 </optgroup>
 <optgroup label="関東地方">
 <option value="栃木県" {$selected.都道府県.栃木県}>栃木県</option>
 <option value="群馬県" {$selected.都道府県.群馬県}>群馬県</option>
 <option value="茨城県" {$selected.都道府県.茨城県}>茨城県</option>
 <option value="埼玉県" {$selected.都道府県.埼玉県}>埼玉県</option>
 <option value="東京都" {$selected.都道府県.東京都}>東京都</option>
 <option value="千葉県" {$selected.都道府県.千葉県}>千葉県</option>
 <option value="神奈川県" {$selected.都道府県.神奈川県}>神奈川県</option>
 </optgroup>
 <optgroup label="中部地方">
 <option value="山梨県" {$selected.都道府県.山梨県}>山梨県</option>
 <option value="長野県" {$selected.都道府県.長野県}>長野県</option>
 <option value="新潟県" {$selected.都道府県.新潟県}>新潟県</option>
 <option value="富山県" {$selected.都道府県.富山県}>富山県</option>
 <option value="石川県" {$selected.都道府県.石川県}>石川県</option>
 <option value="福井県" {$selected.都道府県.福井県}>福井県</option>
 <option value="静岡県" {$selected.都道府県.静岡県}>静岡県</option>
 <option value="岐阜県" {$selected.都道府県.岐阜県}>岐阜県</option>
 <option value="愛知県" {$selected.都道府県.愛知県}>愛知県</option>
 </optgroup>
 <optgroup label="近畿地方">
 <option value="三重県" {$selected.都道府県.三重県}>三重県</option>
 <option value="滋賀県" {$selected.都道府県.滋賀県}>滋賀県</option>
 <option value="京都府" {$selected.都道府県.京都府}>京都府</option>
 <option value="大阪府" {$selected.都道府県.大阪府}>大阪府</option>
 <option value="兵庫県" {$selected.都道府県.兵庫県}>兵庫県</option>
 <option value="奈良県" {$selected.都道府県.奈良県}>奈良県</option>
 <option value="和歌山県" {$selected.都道府県.和歌山県}>和歌山県</option>
 </optgroup>
 <optgroup label="四国地方">
 <option value="徳島県" {$selected.都道府県.徳島県}>徳島県</option>
 <option value="香川県" {$selected.都道府県.香川県}>香川県</option>
 <option value="愛媛県" {$selected.都道府県.愛媛県}>愛媛県</option>
 <option value="高知県" {$selected.都道府県.高知県}>高知県</option>
 </optgroup>
 <optgroup label="中国地方">
 <option value="鳥取県" {$selected.都道府県.鳥取県}>鳥取県</option>
 <option value="島根県" {$selected.都道府県.島根県}>島根県</option>
 <option value="岡山県" {$selected.都道府県.岡山県}>岡山県</option>
 <option value="広島県" {$selected.都道府県.広島県}>広島県</option>
 <option value="山口県" {$selected.都道府県.山口県}>山口県</option>
 </optgroup>
 <optgroup label="九州・沖縄地方">
 <option value="福岡県" {$selected.都道府県.福岡県}>福岡県</option>
 <option value="佐賀県" {$selected.都道府県.佐賀県}>佐賀県</option>
 <option value="長崎県" {$selected.都道府県.長崎県}>長崎県</option>
 <option value="大分県" {$selected.都道府県.大分県}>大分県</option>
 <option value="熊本県" {$selected.都道府県.熊本県}>熊本県</option>
 <option value="宮崎県" {$selected.都道府県.宮崎県}>宮崎県</option>
 <option value="鹿児島県" {$selected.都道府県.鹿児島県}>鹿児島県</option>
 <option value="沖縄県" {$selected.都道府県.沖縄県}>沖縄県</option>
 </optgroup>
 </select>
 <input type="hidden" name="required[]" value="都道府県" />
 {if:$required.都道府県}
 <div class="error"><em>{$required.都道府県}</em></div>
 {/if:$required.都道府県} </td>
 </tr>
 <tr>
 <th>添付ファイル</th>
 <td><p>※ファイル種類「jpg,jpeg,txt,doc,docx,xls,xlsx,pdf」ファイルサイズ「それぞれ2MB以内」</p>
 <div> {if:$添付ファイル1.tmp_name}
 <label>
 <input type="checkbox" name="file_remove[]" value="添付ファイル1">
 このファイルを削除する</label>
 <p><a href="index.php?file={$添付ファイル1.tmp_name}" target="_blank">添付ファイルを別ウィンドウで開く</a></p>
 <input type="hidden" name="file[添付ファイル1][tmp_name]" value="{$添付ファイル1.tmp_name}">
 <input type="hidden" name="file[添付ファイル1][name]" value="{$添付ファイル1.name}">
 {/if:$添付ファイル1.tmp_name}
 <input type="file" name="添付ファイル1">
 {loop:$file.添付ファイル1}
 <div class="error"><em>{$file.添付ファイル1[]}</em></div>
 {/loop:$file.添付ファイル1} </div>
 <div> {if:$添付ファイル2.tmp_name}
 <label>
 <input type="checkbox" name="file_remove[]" value="添付ファイル2">
 このファイルを削除する</label>
 <p><a href="index.php?file={$添付ファイル2.tmp_name}" target="_blank">添付ファイルを別ウィンドウで開く</a></p>
 <input type="hidden" name="file[添付ファイル2][tmp_name]" value="{$添付ファイル2.tmp_name}">
 <input type="hidden" name="file[添付ファイル2][name]" value="{$添付ファイル2.name}">
 {/if:$添付ファイル2.tmp_name}
 <input type="file" name="添付ファイル2">
 {loop:$file.添付ファイル2}
 <div class="error"><em>{$file.添付ファイル1[]}</em></div>
 {/loop:$file.添付ファイル2} </div>
 <div> {if:$添付ファイル3.tmp_name}
 <label>
 <input type="checkbox" name="file_remove[]" value="添付ファイル3">
 このファイルを削除する</label>
 <p><a href="index.php?file={$添付ファイル3.tmp_name}" target="_blank">添付ファイルを別ウィンドウで開く</a></p>
 <input type="hidden" name="file[添付ファイル3][tmp_name]" value="{$添付ファイル3.tmp_name}">
 <input type="hidden" name="file[添付ファイル3][name]" value="{$添付ファイル3.name}">
 {/if:$添付ファイル3.tmp_name}
 <input type="file" name="添付ファイル3">
 {loop:$file.添付ファイル3}
 <div class="error"><em>{$file.添付ファイル3[]}</em></div>
 {/loop:$file.添付ファイル3} </div>
 </td>
 </tr>
 </table>
 <div>
 <button type="submit">確認画面へ</button>
 </div>
</form>

追記:

サンプルコードをまとめた記事を追加しました。
TransmitMailのHTMLテンプレート記述コードサンプルまとめ・覚書

確認画面の作成方法

確認画面ページは、confirm.htmlを編集します。編集前はサンプルが記述されています。

出力方法には「ループ出力」と「個別出力」の2種類があります。「ループ出力」は、入力項目を自動で順番に表示させます。「個別出力」は表示したい内容を個別に設定させることができます。

表示させたくない項目がある場合や、表示内容を自由に調整したい場合、表示順を変更したい場合などがあるときは、「個別出力」で作成します。

公式のテンプレート記述方法ページ、確認画面の箇所

完了画面の作成方法

完了画面ページは、finish.htmlを編集します。編集前はサンプルが記述されています。自由に編集しましょう。プログラム上、特に何かコードを書かなければならないものはありません。

エラー画面の作成方法

エラー画面ページは、表示エラーなどが起きた場合に表示される画面です。error.htmlを編集します。編集前はサンプルが記述されています。以下のコードが記述されていればOKです。エラー内容が表示されます。

 {if:$global_errors}
 <div class="section">
 <ul>
 {loop:$global_errors}
 <li><em>{$global_errors[]}</em></li>
 {/loop:$global_errors}
 </ul>
 </div>
 {/if:$global_errors}

仕様覚書

・フォームページと確認画面、完了画面のURLを変更することはできない。
 ⇒action 属性にパラメータを追加する方法があり。index.php?confirm、index.php?finish コメント
 ⇒完了画面のみURLをfinish.phpにすることは可能。コメント

・添付ファイルは必須化できない。
 ⇒仕様上できない。コメント

・添付ファイルをアップロードした際の表示内容の変更、画像以外の場合
 ⇒変更できる。コメント

・自動返信メールに添付ファイルを添付しないようにする
 ⇒仕様上できない。直接ファイル編集で可?コメント