カスタムメールテンプレートの設定

対象プラン: ビジネスプラン

メールを特定のブランドに合わせたい場合や、メールの文言を管理したい場合は、カスタムメールテンプレートを使用して実現できます。

テンプレートの作成

カスタムテンプレートはプロジェクトに紐付けられ、プロジェクト内の任意のフォームで使用できます。フォームがプロジェクト内にない場合、カスタムテンプレートは使用できません。プロジェクトの設定ページでテンプレートタブをクリックします。+新規テンプレートを選択し、テンプレート名を入力して適切なテンプレートタイプを選択します。テンプレートは送信通知用または自動返信用に設計できます。

テンプレートコードの編集

インラインコードエディターにより、メールテンプレートを完全にデザインできます。メールのレイアウトと文言は HTML タブで編集でき、スタイリングは CSS タブで行います。

ほとんどのメールブラウザは <script> タグをサポートしておらず、無視します。HTML タブに <style> タグを含めないでください。代わりに CSS タブを使用してください。以前に HTML メールを送信したことがある場合、CSS をインライン化する必要があったかもしれません。Formspree は記述した HTML と CSS に基づいてこれを自動的に処理するため、CSS をインライン化する必要はありません。

Formspree は mustache テンプレートを使用しているため、テンプレートタイプに応じて特定の特殊変数を認識します。

送信通知変数

変数	説明
`{{ _time }}`	送信の日時
`{{ _host }}`	フォームのURL（「https://」を除く）
`{{ <fieldname> }}`	フォームの任意の名前付き入力値
`{{# _fields }}`	すべてのフィールドのリストを開始します
`{{ _name }}`	_fields内で、現在のフィールド名…
`{{ _value }}`	…およびフィールド値
`{{/ _fields }}`	_fields ブロックを閉じます
`{{ _unsubscribe }}`	配信停止リンク

スパム対策のため、テンプレートには必ず {{_unsubscribe}} を含める必要があります。

自動返信変数

変数	説明
`{{ _time }}`	送信の日時
`{{ submission_message }}`	プラグイン設定で定義されたメッセージ

スパム対策のため、現在、自動返信メッセージに送信フィールドを含めることはできません。

ファイルアップロードの処理

Formspree では1つの入力フィールドで複数のファイルアップロードを送信できるため、ファイルアップロードフィールドはファイルアップロードURLのリストとして送信されます。形式は ['URL 1', 'URL 2', ...] です。

URLを分割したい場合は、特定のフォームフィールドのリスト反復構文を使用できます。例えば、image_upload という名前のファイル入力フィールドがある場合、メール本文にすべての画像を表示するには、テンプレートに以下を追加します：

        {{# image_upload }}
        <tr><td><a href="{{ . }}"><img src="{{ . }}" />{{ . }}</a></td></tr>
        {{/ image_upload }}

送信者名と件名の設定

送信通知の場合、テンプレートで送信者名と件名を編集できます。設定した件名は、フォームで設定した subject フィールドを上書きすることに注意してください。上記と同じ mustache コンテキストを使用してフィールド名を含めることもできます。自動返信の場合、この情報はプラグイン設定で設定できます。

プレビューと保存

ページ下部のプレビューをクリックすると、サンプルメールでテンプレートの見え方を確認できます。変更を本番環境に反映する準備ができたら、デプロイをクリックします。デプロイ前に気が変わった場合は、元に戻すをクリックできます。

テンプレートの適用

送信通知テンプレートの場合、フォームの設定タブでテンプレートを設定できます。自動返信の場合、自動返信プラグインの設定でテンプレートを設定できます。

この機能はプロジェクト内にあるフォームのみで使用できます。フォームにカスタムテンプレートのオプションが表示されない場合は、フォーム一覧にアクセスして、フォームが正しいプロジェクトにあることを確認してください。プロジェクトにない場合は、フォームの設定タブでフォームをプロジェクトに移動できます。それでもテンプレートオプションが表示されない場合は、請求詳細を確認して、ビジネスプランに加入していることを確認してください。