TransmitMailのHTMLテンプレート記述コードサンプルまとめ・覚書
2019/04/08
フリーのメールフォーム「TransmitMail」のHTMLテンプレート記述のサンプルです。記述する際に分かりやすいように覚書。
テンプレートの記述方法 · dounokouno/TransmitMail Wiki
使い方、設置方法、カスタマイズはこちらの記事
フリーのメールフォーム「TransmitMail」の使い方、設置方法とカスタマイズ
input text
必須ではない
<input type="text" name="お名前" value="{$お名前}">
必須
<input type="text" name="お名前" value="{$お名前}">
<input type="hidden" name="required[]" value="お名前">
{if:$required.お名前}
<div class="error">{$required.お名前}</div>
{/if:$required.お名前}
半角(ASCII)文字チェック
半角文字が入力されているかどうかのチェック
必須ではない
<input type="text" name="半角文字" value="{$半角文字}">
<input type="hidden" name="hankaku[]" value="半角文字">
{if:$hankaku.半角文字}
<div class="error">{$hankaku.半角文字}</div>
{/if:$hankaku.半角文字}
必須
<input type="text" name="半角文字" value="{$半角文字}">
<input type="hidden" name="hankaku[]" value="半角文字">
{if:$hankaku.半角文字}
<div class="error">{$hankaku.半角文字}</div>
{/if:$hankaku.半角文字}
<input type="hidden" name="required[]" value="半角文字">
{if:$required.半角文字}
<div class="error">{$required.半角文字}</div>
{/if:$required.半角文字}
※入力された「全角英数字」は「半角英数字」に変換
半角英数字チェック
半角の英語か数字が入力されているかどうかのチェック
必須ではない
<input type="text" name="半角英数字" value="{$半角英数字}">
<input type="hidden" name="hankaku_eisu[]" value="半角英数字">
{if:$hankaku_eisu.半角英数字}
{$hankaku_eisu.半角英数字}
{/if:$hankaku_eisu.半角英数字}
必須
<input type="text" name="半角英数字" value="{$半角英数字}">
<input type="hidden" name="hankaku_eisu[]" value="半角英数字">
{if:$hankaku_eisu.半角英数字}
{$hankaku_eisu.半角英数字}
{/if:$hankaku_eisu.半角英数字}
<input type="hidden" name="required[]" value="半角英数字">
{if:$required.半角英数字}
<div class="error">{$required.半角英数字}</div>
{/if:$required.半角英数字}
※入力された「全角英数字」は「半角英数字」に変換
半角英字チェック
半角の英語が入力されているかどうかのチェック
必須ではない
<input type="text" name="半角英字" value="{$半角英字}">
<input type="hidden" name="hankaku_eiji[]" value="半角英字">
{if:$hankaku_eiji.半角英字}
{$hankaku_eiji.半角英字}
{/if:$hankaku_eiji.半角英字}
必須
<input type="text" name="半角英字" value="{$半角英字}">
<input type="hidden" name="hankaku_eiji[]" value="半角英字">
{if:$hankaku_eiji.半角英字}
{$hankaku_eiji.半角英字}
{/if:$hankaku_eiji.半角英字}
<input type="hidden" name="required[]" value="半角英字">
{if:$required.半角英字}
<div class="error">{$required.半角英字}</div>
{/if:$required.半角英字}
※入力された「全角英字」は「半角英字」に変換
数字チェック
半角の数字が入力されているかどうかのチェック
必須ではない
<input type="text" name="半角数字" value="{$半角数字}">
<input type="hidden" name="num[]" value="半角数字">
{if:$num.半角数字}
{$num.半角数字}
{/if:$num.半角数字}
必須
<input type="text" name="半角数字" value="{$半角数字}">
<input type="hidden" name="num[]" value="半角数字">
{if:$num.半角数字}
{$num.半角数字}
{/if:$num.半角数字}
<input type="hidden" name="required[]" value="半角数字">
{if:$required.半角数字}
<div class="error">{$required.半角数字}</div>
{/if:$required.半角数字}
※入力された「全角数字」は「半角数字」に変換
数字+ハイフンチェック
半角の数字かハイフンが入力されているかどうかのチェック
必須ではない
<input type="text" name="電話番号" value="{$電話番号}">
<input type="hidden" name="num_hyphen[]" value="電話番号">
{if:$num_hyphen.電話番号}
{$num_hyphen.電話番号}
{/if:$num_hyphen.電話番号}
必須
<input type="text" name="電話番号" value="{$電話番号}">
<input type="hidden" name="num_hyphen[]" value="電話番号">
{if:$num_hyphen.電話番号}
{$num_hyphen.電話番号}
{/if:$num_hyphen.電話番号}
<input type="hidden" name="required[]" value="電話番号">
{if:$required.電話番号}
<div class="error">{$required.電話番号}</div>
{/if:$required.電話番号}
※入力された「全角英数字」は「半角英数字」に変換
ひらがなチェック
ひらがなが入力されているかどうかのチェック
必須ではない
<input type="text" name="ひらがな" value="{$ひらがな}">
<input type="hidden" name="hiragana[]" value="ひらがな">
{if:$hiragana.ひらがな}
{$hiragana.ひらがな}
{/if:$hiragana.ひらがな}
必須
<input type="text" name="ひらがな" value="{$ひらがな}">
<input type="hidden" name="hiragana[]" value="ひらがな">
{if:$hiragana.ひらがな}
{$hiragana.ひらがな}
{/if:$hiragana.ひらがな}
<input type="hidden" name="required[]" value="ひらがな">
{if:$required.ひらがな}
<div class="error">{$required.ひらがな}</div>
{/if:$required.ひらがな}
※入力された「カタカナ」は「ひらがな」に変換
全角カタカナチェック
全角カタカナが入力されているかどうかのチェック
必須ではない
<input type="text" name="全角カタカナ" value="{$全角カタカナ}">
<input type="hidden" name="zenkaku_katakana[]" value="全角カタカナ">
{if:$zenkaku_katakana.全角カタカナ}
{$zenkaku_katakana.全角カタカナ}
{/if:$zenkaku_katakana.全角カタカナ}
必須
<input type="text" name="全角カタカナ" value="{$全角カタカナ}">
<input type="hidden" name="zenkaku_katakana[]" value="全角カタカナ">
{if:$zenkaku_katakana.全角カタカナ}
{$zenkaku_katakana.全角カタカナ}
{/if:$zenkaku_katakana.全角カタカナ}
<input type="hidden" name="required[]" value="全角カタカナ">
{if:$required.全角カタカナ}
<div class="error">{$required.全角カタカナ}</div>
{/if:$required.全角カタカナ}
※入力された「ひらがな」は「全角カタカナ」に変換
メールアドレスチェック
メールアドレスが入力されているかどうかのチェック
必須ではない
<input type="text" name="メールアドレス" value="{$メールアドレス}">
<input type="hidden" name="email[]" value="メールアドレス">
{if:$email.メールアドレス}
{$email.メールアドレス}
{/if:$email.メールアドレス}
必須
<input type="text" name="メールアドレス" value="{$メールアドレス}">
<input type="hidden" name="email[]" value="メールアドレス">
{if:$email.メールアドレス}
{$email.メールアドレス}
{/if:$email.メールアドレス}
<input type="hidden" name="required[]" value="メールアドレス">
{if:$required.メールアドレス}
<div class="error">{$required.メールアドレス}</div>
{/if:$required.メールアドレス}
メールアドレス一致チェック
メールアドレスが一致しているかどうかのチェック
必須ではない
<input type="email" name="メールアドレス" value="{$メールアドレス}">
<input type="hidden" name="email[]" value="メールアドレス">
{if:$email.メールアドレス}
{$email.メールアドレス}
{/if:$email.メールアドレス}
<input type="email" name="メールアドレス(確認)" value="{$メールアドレス(確認)}">
<input type="hidden" name="match[]" value="メールアドレス メールアドレス(確認)">
{if:$match.メールアドレス}
<div class="error">{$match.メールアドレス}</div>
{/if:$match.メールアドレス}
両方必須
<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.メールアドレス}
<input type="email" name="メールアドレス(確認)" value="{$メールアドレス(確認)}">
<input type="hidden" name="match[]" value="メールアドレス メールアドレス(確認)">
{if:$match.メールアドレス}
<div class="error">{$match.メールアドレス}</div>
{/if:$match.メールアドレス}
<input type="hidden" name="required[]" value="メールアドレス(確認)">
{if:$required.メールアドレス(確認)}
<div class="error">{$required.メールアドレス(確認)}</div>
{/if:$required.メールアドレス(確認)}
URLチェック
URLが入力されているかどうかのチェック
必須ではない
<input type="text" name="URL" value="{$URL}">
<input type="hidden" name="url[]" value="URL">
{if:$url.URL}
{$url.URL}
{/if:$url.URL}
必須
<input type="text" name="URL" value="{$URL}">
<input type="hidden" name="url[]" value="URL">
{if:$url.URL}
{$url.URL}
{/if:$url.URL}
<input type="hidden" name="required[]" value="URL">
{if:$required.URL}
<div class="error">{$required.URL}</div>
{/if:$required.URL}
textarea
必須ではない
<textarea name="お問い合わせ">{$お問い合わせ}</textarea>
必須
<textarea name="お問い合わせ">{$お問い合わせ}</textarea>
<input type="hidden" name="required[]" value="お問い合わせ">
{if:$required.お問い合わせ}
<div class="error">{$required.お問い合わせ}</div>
{/if:$required.お問い合わせ}
radio
必須ではない
<input type="radio" name="性別" value="男性" {$checked.性別.男性}>男性
<input type="radio" name="性別" value="女性" {$checked.性別.女性}>女性
必須
<input type="radio" name="性別" value="男性" {$checked.性別.男性}>男性
<input type="radio" name="性別" value="女性" {$checked.性別.女性}>女性
<input type="hidden" name="required[]" value="性別">
{if:$required.性別}
<div class="error">{$required.性別}</div>
{/if:$required.性別}
初期状態でチェックを入れる場合
<input type="radio" name="性別" value="男性" {$checked.性別.男性} {$checked.default}>男性
<input type="radio" name="性別" value="女性" {$checked.性別.女性}>女性
checkbox
必須ではない
<input type="checkbox" name="お問い合わせ種別[]" value="資料請求" {$checked.お問い合わせ種別.資料請求}>資料請求
<input type="checkbox" name="お問い合わせ種別[]" value="お見積もり" {$checked.お問い合わせ種別.お見積り}>お見積り
必須
<input type="checkbox" name="お問い合わせ種別[]" value="資料請求" {$checked.お問い合わせ種別.資料請求}>資料請求
<input type="checkbox" name="お問い合わせ種別[]" value="お見積もり" {$checked.お問い合わせ種別.お見積り}>お見積り
<input type="hidden" name="required[]" value="お問い合わせ種別">
{if:$required.お問い合わせ種別}
<div class="error">{$required.お問い合わせ種別}</div>
{/if:$required.お問い合わせ種別}
チェックボックス1つのみ設置の場合は、checkboxの[]は不要
初期状態でチェックを入れる場合
<input type="checkbox" name="お問い合わせ種別[]" value="資料請求" {$checked.お問い合わせ種別.資料請求} {$checked.default}>資料請求
<input type="checkbox" name="お問い合わせ種別[]" value="お見積もり" {$checked.お問い合わせ種別.お見積り}>お見積り
select
必須ではない
<select name="お返事方法">
<option value="" {$selected.default}>選択してください</option>
<option value="メール" {$selected.お返事方法.メール}>メール</option>
<option value="電話" {$selected.お返事方法.電話}>電話</option>
</select>
必須
<select name="お返事方法">
<option value="" {$selected.default}>選択してください</option>
<option value="メール" {$selected.お返事方法.メール}>メール</option>
<option value="電話" {$selected.お返事方法.電話}>電話</option>
</select>
<input type="hidden" name="required[]" value="お返事方法">
{if:$required.お返事方法}
<div class="error">{$required.お返事方法}</div>
{/if:$required.お返事方法}
初期状態は{$selected.default}が記述された項目
複数選択可能にする場合
<select name="お返事方法[]" multiple="multiple">
<option value="" {$selected.default}>選択してください</option>
<option value="メール" {$selected.お返事方法.メール}>メール</option>
<option value="電話" {$selected.お返事方法.電話}>電話</option>
</select>
ファイル添付
ファイル添付を利用する場合は、form要素に enctype=”multipart/form-data” を追加。
<form method="post" action="index.php" enctype="multipart/form-data">
必須ではない
<!-- 添付ファイルの確認、削除 -->
{if:$添付ファイル.tmp_name}
<input type="checkbox" name="file_remove[]" value="{$添付ファイル.tmp_name}" id="file-remove">
<label for="file-remove">このファイルを削除する</label>
<p><img src="index.php?file={$添付ファイル.tmp_name}" alt="{$添付ファイル.name}" width="300"><br>
<a href="index.php?file={$添付ファイル.tmp_name}" target="_blank" class="external">画像を別ウィンドウで開く</a></p>
<input type="hidden" name="file[添付ファイル][tmp_name]" value="{$添付ファイル.tmp_name}">
<input type="hidden" name="file[添付ファイル][name]" value="{$添付ファイル.name}">
{/if:$添付ファイル.tmp_name}
<!-- /添付ファイルの確認、削除 -->
<!-- ファイル投稿パーツ -->
<input type="file" name="添付ファイル">
<!-- /ファイル投稿パーツ -->
<!-- エラー -->
{loop:$file.添付ファイル}
{$file.添付ファイル[]}
{/loop:$file.添付ファイル}
<!-- /エラー -->
必須
{if:$添付ファイル.tmp_name}
<input type="checkbox" name="file_remove[]" value="{$添付ファイル.tmp_name}" id="file-remove">
<label for="file-remove">このファイルを削除する</label>
<p><img src="index.php?file={$添付ファイル.tmp_name}" alt="{$添付ファイル.name}" width="300"><br>
<a href="index.php?file={$添付ファイル.tmp_name}" target="_blank" class="external">画像を別ウィンドウで開く</a></p>
<input type="hidden" name="file[添付ファイル][tmp_name]" value="{$添付ファイル.tmp_name}">
<input type="hidden" name="file[添付ファイル][name]" value="{$添付ファイル.name}">
{/if:$添付ファイル.tmp_name}
<input type="file" name="添付ファイル">
<input type="hidden" name="file_required[]" value="添付ファイル">
{if:$file_required.添付ファイル}
{$file_required.添付ファイル}
{/if:$file_required.添付ファイル}
{loop:$file.添付ファイル}
{$file.添付ファイル[]}
{/loop:$file.添付ファイル}
追記:カスタマイズなど
↓カスタマイズなどこちらの記事がすごく参考になります。
TransmitMailでよく使うカスタマイズ
確認画面が必要ない場合の方法、参考になりました。ありがとうございます。