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

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

TransmitMailのHTMLテンプレート記述コードサンプルまとめ・覚書

      2019/04/08

 - HTML CSS

フリーのメールフォーム「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でよく使うカスタマイズ

確認画面が必要ない場合の方法、参考になりました。ありがとうございます。