GOiGOi Project　（ゴイゴイ・プロジェクト） -> フォームメール・プロ index -> 入力確認用カスタムHTMLを作成
　

確認用カスタムテンプレートHTMLファイルを作成します

確認用カスタムテンプレートHTMLファイルを作成します（初期設定で設定した場合）

  • フォームメールプロは入力のエラーがあったときのエラー確認画面、全ての入力項目が問題なく入力された時の最終確認画面をテンプレートとしてカスタマイズすることが可能です。
    最終確認画面をカスタマイズすることにより送信データを保存するときや自動返信メールに表示するときの項目の順序を変更することができます。
    （自動の最終確認画面ではフォームに記述された項目の順番になります）

  • 初期設定で入力の確認をカスタムテンプレートHTMLファイルを使用して表示させる設定を行った場合はカスタムテンプレートHTMLファイルを作成します。
  • 確認用カスタムテンプレートには入力エラーが有ったときに使われるエラー用と、入力エラーがなかった場合に使われる確認用の２種類があります。
  • インストール直後は入力エラーがなかった場合に使われる確認用カスタムテンプレートは ok_standard.html が使われます。
    このテンプレートはマスター管理者メニューの「テンプレート編集」で変更することが可能です。
  • 初期設定でカスタムHTMLを選択しているにもかかわらずカスタムHTMLを指定していないとフォームのHTMLファイルを解析してカスタムHTMLを自動で作成してくれます。（ファイル名はフォームのHTMLファイルと同じになります、またエラー用はファイル名_e.htmlとなります）
  • 自動で作成されたカスタムHTMLを編集して使用することもできます。（マスター管理者メニューから編集できます）
  • カスタムテンプレートHTMLファイルの漢字コードはシフトJISで記述してください。
  • リンクタグ、イメージタグ <img src=""> <a href=""> など他のページ、画像にリンクしたり参照するパスは確認用HTMLファイルが存在するディレクトリからの相対パスで記述すればドキュメントルート / からのパスに自動補正します。
    自動補正を行いたくない場合は設定プログラムファイル formmail_set.pl の $auto_sw=1; を $auto_sw=0; に変更してください。
    HTMLの記述の仕方やスクリプトを含む特殊なタグを使っているとうまく補正できない場合があります。
    その場合は、以下の方法で回避してください。
    • CGIプログラムが存在する実行パスからの相対パスか、ドキュメントルート / から記述して下さい。
      もしも相対パス、ドキュメントルート / からのパスがわからない時は http:// から始まる絶対パスで記述してください。
    • 【推奨】確認用HTMLファイルの<head>〜</head>の間に<base href="">を記述してリンクの基準となるURLを指定します。
      例えば、<base href="http://www.xxx.co.jp/test/">と指定するとこの確認用HTMLファイルに書かれている相対パスはhttp://www.xxx.co.jp/test/を基準として参照されます。
      ただし、HTMLソース内に同一ページ内へのリンク記述があるとうまくリンクできませんので注意が必要です。（<a name="xxx">、<a href="yyy#xxx">）
  • 確認用は<form method=post action="">　表示項目〜　submit ボタン　</form>　で構成します。
    （<form〜にCGIプログラム名を記述する必要はありません　action=""）
    実行するCGIを敢えて指定しフォームIDなどを固定で指定したい場合は、<form method=post action="/cgi-bin/formmail_pro.cgi">で action を指定しIDなどの hidden 項目を配置し、置換、特殊タグが現れるまでに <!--form--> を配置します。
    <form method=post action="https://www.xxx.co.jp/cgi-bin/formmail/formmail_pro.cgi">
    <input type=hidden name=_check value="判定">
    <input type=hidden name=_id value="フォームID">
    <!--form-->
  • カスタムHTMLファイル内で使用できる置換、特殊タグ
    項目名はオプションを省いたものを使います。例：お名前(ch)　--＞お名前

  • カスタムテンプレートには２種類のタイプがあります。１つはフォームに存在するインプット項目を自動でセットできる自動タイプ、もう１つはインプット項目の name属性の名前をご自分で配置する手動タイプです。

    ■自動タイプのテンプレート記述法

    自動タイプは「確認再現」でのテンプレートには使えません。
    自動タイプは送信されるインプット項目のデータ並びはフォームに出てくる順番になります。
    自動タイプのテンプレートファイル名は必ず ok_ で始めてください。（例：ok_tenp.html）

    <!--loop-->と<!--loop_end-->で囲まれたタグ群がインプット項目数だけ繰り返して表示されます。
    囲まれたタグ群の中には以下の置換タグを配置することができます。
    <!--name-->　項目名に置き換わります。
    <!--value <br>-->　項目名の入力値に置き換わります。<br>の部分は入力値がブランクの場合に置き換えるタグを指定します。
    <!--error <br>-->　入力エラーメッセージに置き換わります。<br>の部分は正しい入力の場合に置き換えるタグを指定します。
    フォーマット例：<!--loop--><tr bgcolor=#FFFFFF><td bgcolor=#FFFFCE><!--name--></td><td><!--value <br>--></td></tr><!--loop_end-->

    テンプレートファイル例
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <title>送信前確認</title><body style="font-size:13px;color:#666666">
    <center>
    <table border=0 cellspacing=1 cellpadding=2 bgcolor=#333333 style="font-size:13px;color:#666666">
    <tr bgcolor=#999999 align=left style="color:white"><th align=center>項目名</th><th> 送信されるデータ</th></tr>
    <form method=post action="">
    <!--loop--><tr bgcolor=#FFFFFF><td bgcolor=#FFFFCE><!--name--></td><td><!--value <br>--></td></tr><!--loop_end-->
    </table>
    <br><span style="font-size:13px;color:#666666">上記の内容に間違いがなければ、「送　信」をクリックしてください。</span><br><br><input type=submit name=#_submit value="送　信">　　　<input type=button name=#_can value="入力画面に戻る" onClick="javascript:history.go(-1)">
    </form></body></html>

    ■手動タイプのテンプレート記述法

    手動タイプは送信されるインプット項目のデータ並びはご自分で記述する順番になります。

    フォーマット：<!--xxx {項目名}オプション yyy-->
    オプションには「B」「C」「*」「%」「&」「=」「!=」が組み合わせて指定できます、「=」「!=」は単独使用のみ。
    「B」入力値がブランクの場合に <br> に置き換わります、tableを使用している場合に罫線が表示されない対策に有効です。
    「C」入力値に3桁ごとのカンマが挿入されて表示されます。
    「*」この入力項目は表示のみでデータは送信されません。
    「%」この入力項目はデータは送信のみで表示されません。
    「&」項目が画像の場合に必ず指定します。

    hidden タイプを指定した場合は value= に自動返信メールに設定する置換タグをセットすることができます。
    hidden タイプは name= の最初を半角の # で始めます。
    例：<input type="hidden" name="#URL" value="%renban%">　%renban% の部分が送信時に連番に置き換わります。

    以下のオプションは送信データを管理者に送信のみ、または何も処理しない場合にのみ有効です。
    「=」この入力項目の入力値が yyy と等しい場合は以下の <!--{}--> タグまでのソースを出力します。等しくない場合は出力されません。
    「!=」この入力項目の入力値が yyy と等しくない場合は以下の <!--{}--> タグまでのソースを出力します。等しい場合は出力されません。
    　例：<!--{購入します}=yes-->
    　　　　〜
    　　　　<!--{}-->
    　　　この例では入力項目「購入します」の値が「yes」の場合は〜の部分のソースを出力し「yes」以外の場合は出力しません。

    <!--xxx {項目名}B yyy-->　　項目名の入力値に置き換わります。(Bを付けると入力値がブランクの時 <br> に置き換わります

    <!--xxx E{項目名}B yyy-->　　入力値にエラーがあった場合にエラー内容に置き換わります。（エラー用に使用します。Bを付けるとエラーが無かった場合に <br> に置き換わります、tableを使用している場合に罫線が表示されない対策に有効です）

    <!--価格 {項目名}BC 円-->　　項目名の入力値を3桁ごとのカンマを挿入し置き換わります。(入力値がブランクの場合に <br> に置き換わります、tableを使用している場合に罫線が表示されない対策に有効です）


    以上のタグで xxx を指定すると xxx が前に表示され、yyy を指定すると yyy が後ろに表示されます。

    <!--print_button-->　　初期設定で確認画面を「印刷」に設定した時に、印刷ボタンに置き換わります。

    <!--form-->　　確認画面を送信しないときに<form method=post action=""> 〜の代わりに記述します。

    確認用の例：
    <html>
    <head><title>確認画面</title></head>
    <body bgcolor=#FFFFFF>
    <form method=post action="">
    <center><table border=1 cellpadding=2 cellspacing=0 style="font-size:13px"><tr bgcolor=#FFFFCE><th>項目名</th><th>入力（選択）内容</th></tr>
    <tr><td bgcolor=#FFFFCE>お名前</td><td><!--{お名前}B--></td></tr>
    <tr><td bgcolor=#FFFFCE>ご住所</td><td><!--{ご住所}B--></td></tr>
    <tr><td bgcolor=#FFFFCE>メールアドレス</td><td><!--{メールアドレス}B--></td></tr>
    </table>
    <br><!--print_button-->　　<input type=submit name=#_send value="送信">
    </form></body></html>

    エラー用の例：
    <html>
    <head><title>エラー画面</title></head>
    <body bgcolor=#FFFFFF>
    <form method=post action="">
    <center><table border=1 cellpadding=2 cellspacing=0 style="font-size:13px"><tr bgcolor=#FFFFCE><th>項目名</th><th>入力（選択）内容</th><th>エラー内容</th></tr>
    <tr><td bgcolor=#FFFFCE>お名前</td><td><!--{お名前}B--></td><td><!--E{お名前}B--></td></tr>
    <tr><td bgcolor=#FFFFCE>ご住所</td><td><!--{ご住所}B--></td><td><!--E{ご住所}B--></td></tr>
    <tr><td bgcolor=#FFFFCE>メールアドレス</td><td><!--{メールアドレス}B--></td><td><!--E{メールアドレス}B--></td></tr>
    </table>
    <br><input type=button name=#_can value="入力画面に戻る" onClick="javascript:history.go(-1)">
    </form></body></html>

  • テキストエディターで独自に作成されたカスタムHTMLファイルは使用するフォームディレクトリの下の _formhtml/_temp ディレクトリにアップロードして下さい。

その他のメッセージ一覧　（全て変更可能です）

表示場面日本語英語
入力確認画面入力確認画面Input check page
入力確認画面項目名Field name
入力確認画面入力（選択）内容Input
入力確認画面確認事項Message
システムエラーメーラーメッセージError message
入力確認画面入力画面に戻るReturn to the input page
入力確認画面
フォーム形式		入力に不備があります、内容を確認しまちがいなく入力した後、
再度送信下さい		A defect is in an input. Please transmit again
after checking the contents and inputting rightly.
入力確認画面
表形式		入力に不備があります、
ブラウザの「戻る」で入力画面に戻り再入力して下さい。		A defect is in an input. Please click
the BACK button of a browser, return to the input page and reinput.
全て正しい入力上記の入力内容でよろしければ、「送　信」
をクリックしてください。		Please click a button [SEND] ,
if the contents of an input are right.

変更する場合は設定ファイル、formmail_set.pl 104行から127行に記述されている上記のメッセージを変更して下さい。

使用講習会、説明会をご指定の場所で開催させていただきます

　本サイトの CGI は高機能で何でもできますが、高機能のため使用方法を完全に理解するためには説明を受けた方が解りやすいと思います。京阪神奈の制作会社様には使用講習会、説明会をご指定の場所で開催させていただきます。最下段のメールアドレスまでお問い合わせ下さい。（場所が京阪神奈以外の場合は実費交通費が必要です）

インストール、CGI制作の請け負い

　本サイトのプログラムは今までに CGI をインストールされた方なら簡単にインストールしていただけますが、設定も含めたインストール、サイト構築作業、CGI制作を請け負うことも可能です。お問い合わせページからご連絡ください。
GOiGOi Projectではフォームメール、WhatsNew（汎用データベース）、ページ自動生成、ページ更新、空き情報・予約など、ホームページを管理、運営する上でどうしても必要になってくるＣＧＩをプロ仕様で提供しています。全てのプログラムは汎用CGIとして開発されていてどのようなサイトでもご使用いただけます。また、CGI制作も承ります。