テンプレートの記述方法

tagawa edited this page Jan 17, 2017 · 77 revisions

入力画面(input.html)のフォームパーツ

シングルラインインプット

エラー画面の時、{$name値} に送信された値が出力されます。

<input type="text" name="お名前" value="{$お名前}">

マルチラインインプット

エラー画面の時、{$name値} に送信された値が出力されます。

<textarea name="お問い合わせ">{$お問い合わせ}</textarea>

ラジオボタン

エラー画面の時、{$checked.name値.value値}checked="checked" が出力されます。

初期状態で checked="checked" を出力したい場合は、{$checked.default} を記述します。

<input type="radio" name="性別" value="男性" {$checked.性別.男性} {$checked.default}>男性
<input type="radio" name="性別" value="女性" {$checked.性別.女性}>女性

チェックボックス

エラー画面の時、{$checked.name値.value値}checked="checked" が出力されます。

初期状態で checked="checked" を出力したい場合は、{$checked.default} を記述します。

チェックボックスは複数の選択ができるため、name値の最後に [] を記述します。

<input type="checkbox" name="お問い合わせ種別[]" value="資料請求" {$checked.お問い合わせ種別.資料請求} {$checked.default}>資料請求
<input type="checkbox" name="お問い合わせ種別[]" value="お見積もり" {$checked.お問い合わせ種別.お見積り}>お見積り

セレクトメニュー

エラー画面の時、{$selected.name値.value値}selected="selected" が出力されます。

初期状態で selected="selected" を出力したい場合は、{$selected.default} を記述します。

<select name="お返事方法">
    <option value="" {$selected.default}>お返事方法を選択してください</option>
    <option value="メール" {$selected.お返事方法.メール}>メール</option>
    <option value="電話" {$selected.お返事方法.電話}>電話</option>
</select>

複数選択可能なセレクトメニューの場合は、name値の最後に [] を記述します。

<select name="お返事方法[]" multiple="multiple">
    <option value="" {$selected.default}>お返事方法を選択してください</option>
    <option value="メール" {$selected.お返事方法.メール}>メール</option>
    <option value="電話" {$selected.お返事方法.電話}>電話</option>
</select>

入力画面の入力オプション

入力必須

<input type="text" name="入力必須" value="{$入力必須}">
<input type="hidden" name="required[]" value="入力必須">
{if:$required.入力必須}
{$required.入力必須}
{/if:$required.入力必須}

{$required.入力必須} 部分にエラーメッセージが表示されます。

半角(ASCII)文字チェック

<input type="text" name="半角文字" value="{$半角文字}">
<input type="hidden" name="hankaku[]" value="半角文字">
{if:$hankaku.半角文字}
{$hankaku.半角文字}
{/if:$hankaku.半角文字}

※入力された「全角英数字」は「半角英数字」に変換されます。

入力可能文字列

!"#$%&'()*+-./0123456789:;<=>?@ABCDEFGHIJKLNMOPQRSTUVWXYZ[\]^_`abcdefghijklnmopqrstuvwxyz{|}~

半角英数字チェック

<input type="text" name="半角英数字" value="{$半角英数字}">
<input type="hidden" name="hankaku_eisu[]" value="半角英数字">
{if:$hankaku_eisu.半角英数字}
{$hankaku_eisu.半角英数字}
{/if:$hankaku_eisu.半角英数字}

※入力された「全角英数字」は「半角英数字」に変換されます。

入力可能文字列

0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

半角英字チェック

<input type="text" name="半角英字" value="{$半角英字}">
<input type="hidden" name="hankaku_eiji[]" value="半角英字">
{if:$hankaku_eiji.半角英字}
{$hankaku_eiji.半角英字}
{/if:$hankaku_eiji.半角英字}

※入力された「全角英字」は「半角英字」に変換されます。

入力可能文字列

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

数字チェック

<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_hyphen[]" value="数字+ハイフン">
{if:$num_hyphen.数字+ハイフン}
{$num_hyphen.数字+ハイフン}
{/if:$num_hyphen.数字+ハイフン}

※入力された全角英数字は半角英数字に変換されます。

ひらがなチェック

<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="zenkaku_katakana[]" value="全角カタカナ">
{if:$zenkaku_katakana.全角カタカナ}
{$zenkaku_katakana.全角カタカナ}
{/if:$zenkaku_katakana.全角カタカナ}

※入力された「ひらがな」は「全角カタカナ」に変換されます。

半角カタカナチェック(v1のみ)

<input type="text" name="半角カタカナ" value="{$半角カタカナ}">
<input type="hidden" name="hankaku_katakana[]" value="半角カタカナ">
{if:$hankaku_katakana.半角カタカナ}
{$hankaku_katakana.半角カタカナ}
{/if:$hankaku_katakana.半角カタカナ}

※入力された「ひらがな」、「全角カタカナ」は「半角カタカナ」に変換されます。

全角文字を含むかチェック

<input type="text" name="全角文字を含むか" value="{$全角文字を含むか}">
<input type="hidden" name="zenkaku[]" value="全角文字を含むか">
{if:$zenkaku.全角文字を含むか}
{$zenkaku.全角文字を含むか}
{/if:$zenkaku.全角文字を含むか}

全て全角文字チェック

<input type="text" name="全て全角文字" value="{$全て全角文字}">
<input type="hidden" name="zenkaku_all[]" value="全て全角文字">
{if:$zenkaku_all.全て全角文字}
{$zenkaku_all.全て全角文字}
{/if:$zenkaku_all.全て全角文字}

文字数チェック

1〜3文字の場合

<input type="text" name="年齢" value="{$年齢}">
<input type="hidden" name="len[]" value="年齢 1-3">
{if:$len.年齢}
{$len.年齢}
{/if:$len.年齢}

1文字以上の場合

<input type="text" name="年齢" value="{$年齢}">
<input type="hidden" name="len[]" value="年齢 1-">
{if:$len.年齢}
{$len.年齢}
{/if:$len.年齢}

3文字以下の場合

<input type="text" name="年齢" value="{$年齢}">
<input type="hidden" name="len[]" value="年齢 -3">
{if:$len.年齢}
{$len.年齢}
{/if:$len.年齢}

2文字固定の場合

<input type="text" name="年齢" value="{$年齢}">
<input type="hidden" name="len[]" value="年齢 2-2">
{if:$len.年齢}
{$len.年齢}
{/if:$len.年齢}

メールアドレス書式チェック

<input type="text" name="メールアドレス" value="{$メールアドレス}">
<input type="hidden" name="email[]" value="メールアドレス">
{if:$email.メールアドレス}
{$email.メールアドレス}
{/if:$email.メールアドレス}

※チェックは簡易的なものです。チェックに通ったメールアドレスの存在を保証するものではありません。

一致チェック

<input type="text" name="メールアドレス" value="{$メールアドレス}">
<input type="text" name="メールアドレス確認" value="{$メールアドレス確認}">
<input type="hidden" name="match[]" value="メールアドレス メールアドレス確認">
{if:$match.メールアドレス}
{$match.メールアドレス}
{/if:$match.メールアドレス}

※3つ以上の一致には対応していません。

URLチェック

<input type="text" name="URL" value="{$URL}">
<input type="hidden" name="url[]" value="URL">
{if:$url.URL}
{$url.URL}
{/if:$url.URL}

※チェックは簡易的なものです。チェックに通ったURLの存在を保証するものではありません。

数値(整数)の範囲チェック

3文字以下の数字の場合

<input type="text" name="3以下の数字" value="{$3以下の数字}">
<input type="hidden" name="num_range[]" value="3以下の数字 -3">
{if:$num_range.3以下の数字}
{$num_range.3以下の数字}
{/if:$num_range.3以下の数字}

0-3 と設定した場合と同じ動作をします。

3文字以上の数字の場合

<input type="text" name="3以上の数字" value="{$3以上の数字}">
<input type="hidden" name="num_range[]" value="3以上の数字 3-">
{if:$num_range.3以上の数字}
{$num_range.3以上の数字}
{/if:$num_range.3以上の数字}

ちょうど3の数字の場合

<input type="text" name="ちょうど3の数字" value="{$ちょうど3の数字}">
<input type="hidden" name="num_range[]" value="ちょうど3の数字 3-3">
{if:$num_range.ちょうど3の数字}
{$num_range.ちょうど3の数字}
{/if:$num_range.ちょうど3の数字}

1〜12の数字の場合

<input type="text" name="1〜12の数字" value="{$1〜12の数字}">
<input type="hidden" name="num_range[]" value="1〜12の数字 1-12">
{if:$num_range.1〜12の数字}
{$num_range.1〜12の数字}
{/if:$num_range.1〜12の数字}

添付ファイルの入力必須(v2のみ)

<input type="file" name="ファイルの入力必須">
<input type="hidden" name="file_required[]" value="ファイルの入力必須">
{if:$file_required.ファイルの入力必須}
{$file_required.ファイルの入力必須}
{/if:$file_required.ファイルの入力必須}

※添付ファイルの記述はすべて記述すると長いため、ここでは一部記述を省略しています。

入力オプションの組み合わせ例

入力オプションは複数のチェックを組み合わせることが可能です。

郵便番号をチェックしたい場合

郵便番号として、「数値とハイフンを含む8文字」をチェックする

<input type="text" name="郵便番号" value="{$郵便番号}">
<input type="hidden" name="num_hyphen[]" value="郵便番号">
<input type="hidden" name="len[]" value="郵便番号 8">
{if:$num_hyphen.郵便番号}
{$num_hyphen.郵便番号}
{/if:$num_hyphen.郵便番号}
{if:$len.郵便番号}
{$len.郵便番号}
{/if:$len.郵便番号}

ファイル添付

ファイル添付を利用する場合は、form要素に enctype="multipart/form-data" を追加します。

<form method="post" action="index.php" enctype="multipart/form-data">

ファイル添付には「ファイル投稿パーツ」「確認用表示」「ファイルを削除するチェックボックス」などを併記する必要があり、下記のコードが1セットの記述になります。

<!-- 添付ファイルの確認、削除 -->
{if:$添付ファイル.tmp_name}
<input type="checkbox" name="file_remove[]" value="添付ファイル" 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.添付ファイル}
<!-- /エラー -->

multiple属性には対応していませんが、入力欄を複数個記述することで、複数のファイル添付をすることが可能です。

※safe_modeがonの場合、ファイル添付機能はご利用いただけません。

統括エラーメッセージ

v2の場合

{if:$global_errors}
<p>入力に誤りがあります。</p>
    <ul>
    {loop:$global_errors}
        <li>{$global_errors[]}</li>
    {/loop:$global_errors}
    </ul>
{/if:$global_errors}

v1の場合

{if:$global_error_flag}
<p>入力に誤りがあります。</p>
    <ul>
    {loop:$global_error}
        <li>{$global_error[]}</li>
    {/loop:$global_error}
    </ul>
{/if:$global_error_flag}

確認画面(confirm.html)

出力方法には「ループ出力」と「個別出力」の2種類があります。

個別に表示内容を調整したい場合は、「個別出力」をご利用ください。

ループ出力

<table>
    {loop:$params}
    <tr>
        <th>{$params[].key}&nbsp;</th>
        <td>{$params[].value.nl2br}&nbsp;</td>
      </tr>
    {/loop:$params}
</table>

ファイル添付を利用する場合

<table>
    {loop:$params}
    <tr>
        <th>{$params[].key}&nbsp;</th>
        <td>{$params[].value.nl2br}&nbsp;</td>
    </tr>
    {/loop:$params}
    {loop:$files}
    <tr>
        <th>{$files[].key}&nbsp;</th>
        <td>{$files[].name}<br>
            <img src="index.php?file={$files[].tmp_name}" width="300"><br>
            <a href="index.php?file={$files[].tmp_name}" target="_blank">画像を別ウィンドウで開く</a></td>
    </tr>
    {/loop:$files}
</table>

各出力内容は下記の通りです。

  • {$files[].key}: ファイル投稿パーツの項目名
  • {$files[].name}: ファイル名
  • index.php?file={$files[].tmp_name}: 一時保存されたファイル

個別出力

<table>
    <tr>
        <th>{$会社名.key}&nbsp;</th>
        <td>{$会社名.value}&nbsp;</td>
    </tr>
    <tr>
        <th>{$お名前.key}&nbsp;</th>
        <td>{$お名前.value}&nbsp;</td>
    </tr>
    <tr>
        <th>{$メールアドレス.key}&nbsp;</th>
        <td>{$メールアドレス.value}&nbsp;</td>
    </tr>
    <tr>
        <th>{$お問い合わせ内容.key}&nbsp;</th>
        <td>{$お問い合わせ内容.value.nl2br}&nbsp;</td>
    </tr>
</table>

改行コードを <br> に変換する場合(マルチラインインプットの確認画面等)は {$項目名.value.nl2br} とします。

ファイル添付を利用する場合

<table>
    <tr>
        <th>{$会社名.key}&nbsp;</th>
        <td>{$会社名.value}&nbsp;</td>
    </tr>
    <tr>
        <th>{$お名前.key}&nbsp;</th>
        <td>{$お名前.value}&nbsp;</td>
    </tr>
    <tr>
        <th>{$メールアドレス.key}&nbsp;</th>
        <td>{$メールアドレス.value}&nbsp;</td>
    </tr>
    <tr>
        <th>{$お問い合わせ内容.key}&nbsp;</th>
        <td>{$お問い合わせ内容.value.nl2br}&nbsp;</td>
    </tr>
    <tr>
        <th>{$添付ファイル.key}&nbsp;</th>
        <td>{$添付ファイル.name}<br>
            <img src="index.php?file={$添付ファイル.tmp_name}" width="300"><br>
            <a href="index.php?file={$添付ファイル.tmp_name}" target="_blank">画像を別ウィンドウで開く</a></td>
    </tr>
</table>

各出力内容は下記の通りです。

  • {$添付ファイル.key}: ファイル投稿パーツの項目名
  • {$添付ファイル.name}: ファイル名
  • index.php?file={$添付ファイル.tmp_name}: 一時保存されたファイル

入力画面に戻るボタンと送信するボタン

<form method="post" action="index.php">
    {$hiddens}
    <input type="hidden" name="page" value="input">
    <input type="submit" value="入力画面に戻る">
</form>
&nbsp;
<form method="post" action="index.php">
    {$hiddens}
    <input type="hidden" name="page" value="finish">
    <input type="submit" value="送信する">
</form>

form要素を display:inline; にすると、ボタンが横に並ぶかと思います。

送信メール本文(mail_body.txt)、自動返信メール本文(mail_auto_reply_body.txt)

出力方法には「ループ出力」と「個別出力」の2種類があります。

個別に表示内容を調整したい場合は、「個別出力」をご利用ください。

ループ出力

お問い合わせフォームよりメールが送信されました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

{loop:$params}
{$params[].key} = {$params[].value}
{/loop:$params}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IP: {$_SERVER.REMOTE_ADDR}
HOST: {$_SERVER.REMOTE_HOST}
USER_AGENT: {$_SERVER.HTTP_USER_AGENT}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

※上記は送信メールのサンプルです。

個別出力

{if:$会社名.value}{$会社名.value}
{/if:$会社名.value}{$お名前・ご担当者名.value} 様

お問い合わせいただき、ありがとうございます。
1〜2営業日以内に担当者よりご連絡さしあげます。

1週間以上経ってもお返事がない場合は、
お手数ですが下記アドレスよりお問い合わせくださいませ。

info@example.com

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【お問い合わせ内容は下記の通りです】

{$会社名.key} = {$会社名.value}
{$お名前.key} = {$お名前.value}
{$メールアドレス.key} = {$メールアドレス.value}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

※上記は自動返信メールのサンプルです。

その他

チェックボックスとマルチプルセレクトメニューの値を配列で取得する

チェックボックスとマルチプルセレクトメニューの値は配列で取得することが可能です。

配列で取得し、ul要素とli要素でマークアップした場合は下記のような記述になります。

<ul>
    {loop:$チェックボックス.array}
        <li>{$チェックボックス.array[]}</li>
    {/loop:$チェックボックス.array}
</ul>

GET値の表示

GET値を入力画面、確認画面、メール本文に表示できます。

index.php?example=xxx の場合

{$_GET.example}

GET値の値渡し

GET値で全角文字を渡す場合、URIエンコードするようにしてください。
URIエンコードしない状態の時、IE6で文字化けを確認しました。

index.php?example=GET値渡しテスト の場合

<script>
// めんどいのでjQuery使って書きます
$(function(){
    var get = '?example=GET値渡しテスト';
    var href = $('#example').attr('href');
    $('#example').attr('href, href + encodeURI(get)');
});
</script>
<a href="index.php" id="example">メールフォーム</a>