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

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

入力エラー用、確認用カスタムテンプレートHTMLファイルを作成します(フォームマスター管理者メニューの「初期設定」の30.,31.で設定した場合のみ)

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

  • 初期設定で入力の確認をカスタムテンプレートHTMLファイルを使用して表示させる設定を行った場合はカスタムテンプレートHTMLファイルを作成します。
  • 確認用カスタムテンプレートには入力エラーがあったときに使われるエラー用と、入力エラーがなかった場合に使われる確認用の2種類があります。
  • インストール直後は入力エラーがなかった場合に使われる確認用カスタムテンプレートは ok_standard.html が使われます。
    このテンプレートはマスター管理者メニューの「テンプレート編集」で変更することが可能です。
  • 初期設定でカスタムHTMLを選択しているにもかかわらずカスタムHTMLを指定していないとフォームのHTMLファイルを解析してカスタムHTMLを自動で作成してくれます。(ファイル名はフォームのHTMLファイルと同じになります、またエラー用はファイル名_e.htmlとなります)
  • 自動で作成されたカスタムHTMLを編集して使用することもできます。(マスター管理者メニューから編集できます)
  • リンクタグ、イメージタグ <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="">
    保存項目〜
    <!--!key_input!-->
    submit ボタン
    </form>

    で構成します。
    (<form〜action="" にCGIプログラム名を記述する必要はありません)
    実行するCGIを敢えて指定しフォームIDなどを固定で指定したい場合は、<form method=post action="/cgi-bin/formmail_pro.cgi">で action を指定しIDなどの hidden 項目を配置します。
  • カスタムHTMLファイル内に配置する項目名はオプションを省いたものを使います。例:お名前(ch) -->お名前

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

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

    自動タイプは「確認再現」でのテンプレートには使えません。
    自動タイプは送信される入力項目のデータ並びはフォームに出てくる順番になります。

    <!--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>
    <!--loop-->
    <tr bgcolor=#FFFFFF><td bgcolor=#FFFFCE><!--name--></td><td><!--value <br>--></td></tr>
    <!--loop_end-->
    </table>
    <form method=post action="">
    <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>

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

    ●入力エラー用、確認用カスタムのカスタムHTMLファイル内で使用できる表示に関するタグ

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

    フォーマット:%%入力項目名%%
    または
    フォーマット:<!--xxx {!入力項目名!}オプション yyy-->
    オプションには「B」「C」が組み合わせて指定できます。
    「B」入力値がブランクの場合に <br> に置き換わります、tableを使用している場合に罫線が表示されない対策に有効です。
    「C」入力値に3桁ごとのカンマが挿入されて表示されます。
    <!--xxx {!入力項目名!}B yyy-->  入力項目名の入力値に置き換わります。(Bを付けると入力値がブランクの時 <br> に置き換わります

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

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

    以上のタグで xxx を指定すると xxx が前に表示され、yyy を指定すると yyy が後ろに表示されます。(価格12,345円)

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

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

    ●データ保存に関するタグ(マスター管理者メニューの「初期設定」の3.でサーバーにデータを保存する設定をした時のみ)

    • <!--{%項目名%}-->
      指定した項目名の入力値がサーバーに保存されます。
    • <!--{%項目名1,項目名2,〜%}-->
      項目名を半角のカンマで区切って指定すると復数の項目を一括で指定できます。
    • 上記のデータ保存に関するタグが1つも存在しないときはマスター管理者メニューの「初期設定」の1.で設定されている送信フォームのHTMLファイルを解析して同じ順で保存するよう自動設定します。


    ●確認用の例

    <html>
    <head><title>確認画面</title></head>
    <body bgcolor="#FFFFFF">
    <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>
    <tr><td bgcolor="#FFFFCE">画像ファイル</td><td><!--{!画像ファイル!}--></td></tr>
    </table>
    <form method="post" action="">
    <!--{%お名前,ご住所,メールアドレス,画像ファイル%}-->
    <!--!key_input!-->
    <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>
    <tr><td bgcolor="#FFFFCE">画像ファイル</td><td><!--{!画像ファイル!}--></td><td><!--E{!画像ファイル!}--></td></tr>
    </table>
    <br><input type="button" name="#_can" value="入力画面に戻る" onClick="javascript:history.go(-1)">
    </form></body></html>

    ●入力エラー用、確認用カスタムテンプレートHTMLファイルには条件式を記述し入力値の値によって表示内容を変えることができます、記述の仕方は自動返信メールの本文に記述する条件式と同じ仕様です。

    例:
    (if:購入します=yes)

    (if:)

    この例では入力項目「購入します」の値が「yes」の場合は〜の部分のソースを出力し「yes」以外の場合は出力しません。

  • テキストエディターで独自に作成されたカスタムHTMLファイルは使用するフォームディレクトリの下の _formhtml/_temp ディレクトリにアップロードして下さい。
  • ●入力エラー用、確認用カスタムテンプレートHTMLファイルを作成する場合はCGIファイルがあるディレクトリの以下のサンプルHTMLを参考に作成ください。
    ok_standard.html、ok_standard_i.html、ok_standard_s.html

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

表示場面日本語英語
入力確認画面入力確認画面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として開発されていてどのようなサイトでもご使用いただけます。また、CGI制作も承ります。