メールテンプレート

導入準備編の内容と一部重複する内容ですが、メールテンプレートについての詳細を説明します。

espar form では柔軟なメール配信が可能です。管理画面からメールの設定を行うことができます。ログイン情報は担当者にお問い合わせ下さい。

template_0-1

メールテンプレート

宛先や件名などのルールやメール本文を設定することができます。それらの設定をひとまとめに メールテンプレート といいます。

(1) 管理画面にログイン
(2) espar管理画面メニューから「フォーム」をクリック
(3) 「テンプレートを選択してください」のリストボックスから編集したいテンプレートを選択
(4) 現状の設定がテキストフィールドに表示されるので後述のルールに従って編集
(5) 画面最下部の「変更を保存」をクリック

変更を保存した直後のフォーム入力から適用されます。

メールテンプレートの種類

1つのフォームに2つのメールテンプレートを指定することができます。

区別	必須かどうか	用途
通知メール	必須	サイト管理側に送られるメール
返信メール	必須でない	フォームを入力したユーザに問い合わせ受理を知らせるメール (フォーム内でメールアドレスを入力して貰うことが前提です)

通知メールと返信メールそれぞれに管理画面上のタブが用意されていますので、必要に応じて設定します。

メールの宛先や件名

メールテンプレートには、以下のようにメールの宛先やメールの件名を設定できます。

template_1-2-1

上図は、espar form の申し込み直後に標準て設定されている内容です。各項目の以下の解説を参考に適切な値に変更して下さい。

設定項目	意味	解説と例
宛先	送信先のメールアドレス	送り先のメールアドレスを指定する
返信先	返信先のメールアドレス	メールの受取人がメーラ上で返信を指定した時に宛先となるメールアドレスを指定する
差出人	送信元とするメールアドレス	発信元メールアドレスを指定する
Cc	CC送信する先のメールアドレス	ccに含めるメールアドレスを指定する
Bcc	BCC送信する先のメールアドレス	tBccに含めるメールアドレスを指定する
件名	メールのタイトル	メールのタイトルを指定する

なお、メールアドレスの表記は以下のいずれかの形式で指定可能です。また、複数のメールアドレスを指定する場合は , (カンマ) で区切って指定して下さい。


メールアドレスを直接指定	info@example.com
メーラー等での表示名も指定	問い合わせ窓口 <info@example.com>

複数のメールアドレスを指定する時に、以下のように上記の2形式を混在させることもできます。

test@example.com, 問い合わせ窓口<info@example.com>

メール本文

送出するメールの内容を記載します。記載した内容がそのままの文章としてメール送信されます。

添付ファイル

「添付ファイルを送信する」のチェックボックスをONにすると、<input type="file"> を使って受け取ったファイルをメールに添付することができます。(デフォルトはOFF)

変数

メールテンプレートでは、問合せフォームで入力された値に置き換える「変数」を使用できます。フォーム内の <input> 要素を表す入力要素変数、または espar form が標準で用意する組み込み変数があります。

変数を使用する場合、変数名の頭に.(ドット)をつけ、前後を二重ブレースで囲んで下さい。二重プレースの直後や直前にはスペースが、また変数名の直前には.(ドット)が必要ですのでご留意下さい。以下のような指定となります。

{{ .[変数名] }}

入力要素変数

フォームの input, textarea, select 要素の name 属性値がそのまま変数名となります。例えば、名前入力用のテキストフィールドが

<input type="text" name="nickname" class="form-control espfEsparFormMonitor-required" value="" id="name" size="50">

となっていた場合、メールテンプレートでは以下のように使用します。

{{ .nickname }} 様から以下の問い合わせが届きました。

なお、変数名に使用できる文字は、半角英数字・アンダースコア・全角文字となります。ハイフンは使用できません。この制約により、espar form を使用するページの input 要素や textarea 要素などの name 属性にも同じ原則が当てはまり、ハイフンが使用できません。以下のような記述は html 的には正しくても、espar form では正しく動作しませんのでご注意下さい。(name属性の値が nike-name になっている)

<input type="text" name="nick-name" class="form-control espfEsparFormMonitor-required" value="" id="name" size="50">

組み込み変数

フォームの入力情報を分析するのに有用な各種情報をメールテンプレートで使用することができます。これを組み込み変数と言います。2019年3月現在、以下の組み込み変数を使用することができます。

変数名	内容
espf_date	送信日。フォーマットは YYYY/MM/DD
espf_time	送信時。フォーマットは HH:mm:ss
espf_remote_addr	問い合わせ者のIPアドレス
espf_user_agent	問い合わせ者のブラウザのUser-Agent
espf_referer	送信元となったフォームのURL

以下は使用例です。

■ 入力元情報
日時：{{ .espf_date }} {{ .espf_time }}
リクエストIP：{{ .espf_remote_addr }}
ユーザエージェント：{{ .espf_user_agent }}
フォームのURL：{{ .espf_referer }}

実際にフォーム入力があると上記の内容は以下のような内容に展開されます。

■ 入力元情報
日時：2019/03/12 12:23:34
リクエストIP：123.1.2.3
ユーザエージェント：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
フォームのURL : https://www.example.com/form/

条件分岐

フォームで入力された内容に基づいてメールテンプレート内の記述を条件分岐させることができます。「この項目が入力されていればこのテキストが挿入される」「この項目が○○ならメールの宛先は□□にする」などの指定が可能です。

入力項目の値一致で分岐する例

テンプレート内で以下のように記述すると、会社名が test の時に「お世話になっております。」と表示され、それ以外の場合は「お世話になります。」と表示されます。(会社名を入力する input 要素の name 属性が company である前提)

{{ if eq .company "test" }}
お世話になっております。
{{ else }}
お世話になります。
{{ end }}

項目への入力有無で分岐する例

テンプレート内で以下のように記述すると、会社名が入力されていれば、「会社名あり : (入力値)」が、それ以外の場合は「会社名なし」が表示されます。(会社名を入力する input 要素の name 属性が company である前提)

{{ if .company }}
会社名あり : {{ .company }}
{{ else }}
会社名なし
{{ end }}

入力値を見て宛先メールアドレスを変える例

宛先欄で以下のように指定すると、問い合わせの種類に応じて宛先メールアドレスを切り替えることができます。

{{ if eq .type "製品Aについて" }}infoA@example.com{{ else if eq .type "サービスBについて" }}serviceB@example.com{{ else }}other@example.com{{ end }}

この例では、name属性が type の<select>タグによるリストボックスを想定していますが、選択された項目によって以下のように宛先を変える設定となっています。

“製品Aについて” であれば infoA@example.com へ
“サービスBについて” であれば serviceB@example.com へ
それら以外の場合は other@example.com へ

項目が未入力のときに空文字を表示する例

以下のように書くことで、未入力時は項目名のみを表示することができます。

【電話番号】
{{ if .tel }}
    {{ .tel }}
{{ end }}

name属性が tel の input 要素で未入力の場合、{{ if }} 〜 {{ end }} 文が評価されないため該当箇所には何も表示されず空白となります。ただ上記の書き方では余計な改行空白が入ってしまうため、1行に納めたい場合は以下のように書きます。(改行や空白を削除しても条件分岐は機能します)

【電話番号】 {{ if .tel }}{{ .tel }}{{ end }}

なお全ての項目についてこのような書き方をするのは非常に面倒ですので、htmlフォームの記述で最初から初期値を空文字設定することをお勧めします。

<input type="text" name="tel" class="espf_required espf_tel" value="">

このようにすれば未入力時は自動的に空文字が指定されるようになり、

【電話番号】 {{ if .tel }}

と書くだけで、未入力時の空文字表示が実現できます。