フォームジェネレータを使って作成

お使いの送信フォームをフォームメールプロ用に移行します

この機能を利用すると既にお使いの送信フォームをフォームメールプロ用に簡単に変更することができます。

パソコンに存在するオリジナル送信フォームをフォームメールプロ用に変更して登録します。
オリジナル送信フォームを他のフォーム送信CGIに使っている場合はフォーム送信CGI用の特殊なタグ類は外しておいてください。

パソコンに存在するオリジナル送信フォームを「参照」で選択します。
オリジナル送信フォームを「参照」せずに「送信フォーム移行」をクリックするとフォームメールプロで現在使われている送信フォームのソースのオプションを編集することができます。

編集はマスター管理者メニューの「送信フォーム移行」をクリックして編集します。以下の画面が表示されます。

base href を指定する場合は指定します。指定したbase href をHTMLに挿入する場合はチェックを入れます。（<head> の直後に挿入されます）

項目名を指定します、項目名には全角（漢字も）文字が使えます。

項目を必須入力にする場合は必須にチェックを入れます。

項目が名前入力の項目の場合は「自動返信宛名項目」にチェックを入れます。（名前項目とは自動返信メールの本文に～様と表示させるための名前入力項目です）

入力属性が指定できる場合は入力属性を選択します。（入力チェックのオプションがつきます）

項目が半角数字入力の場合で入力の桁数、入力値の範囲をチェックしたい場合は桁数、範囲を指定します。
入力桁数の指定は桁数指定は5～5（5桁）、桁数範囲指定は2～5（2～5桁）、～5（5桁まで）のように指定します。
入力値の範囲はその項目が例えば月の入力項目であれば 1～12 のように許される値の範囲を指定します。

項目が数字以外の入力の場合で入力の桁数をチェックしたい場合は文字入力桁数を指定します。
入力桁数の指定は桁数指定は5～5（5桁）、桁数範囲指定は2～5（2～5桁）、～5（5桁まで）のように指定します。
桁数は半角換算で指定します。

上記以外のオプションがある場合は指定します。複数のオプションを指定する場合は半角の // で続けて指定します。（例：　max3//cookie）

オプションのセレクトボックスから選択して「オプション挿入」ボタンをクリックするとカーソルの位置のその他オプション項目（薄い水色の背景色の入力欄）にオプションを挿入することができます。

「実行」ボタンをクリックします。

作成された送信フォームのソースの編集画面になりますので微調整が必要なら変更して編集します。

また、フォームジェネレータ用の設定ファイルと送信フォームを以下の例のように作成しています。
この設定ファイルをマスター管理者メニュー「フォームを編集」の訂正処理で選択して編集すれば新たなデザインで送信フォームを生成することができます。
指定ファイル：test.html のオリジナルフォームを処理した場合は、設定ファイル（test_org.dat）、送信フォーム（test_org.html）

Tips　お使いの送信フォームの入力項目の部分だけを入れ替えたい場合は、次の「フォームジェネレータを使って送信フォームを作成する」の「生成にテンプレートファイルを使用して生成する場合はテンプレートファイルの指定を行います」でテンプレートファイルとしてお使いの送信フォームを指定します。（<form～>～</form>間に設定した入力項目が配置されます）

フォームジェネレータを使って送信フォームを作成する

ブラウザのアドレス入力欄にマスタ管理者メニュー画面を呼び出すURLをフルパスで入力し実行させます。
（例：http://www.xxxx.co.jp/cgi-bin/formmail/formmail_edit.cgi?master　あなたがアップロードした場所と formmail_edit.cgi の名称を変更した場合は違う指定になります）

マスタ管理者メニュー画面の「フォームを編集」で新規作成にチェックを入れ、登録名を指定します。登録名は半角の英数字で構成し漢字を使ってはいけません。また、拡張子を付けないで下さい。
ここで指定した登録名にhtmlの拡張子がついたフォームHTMLが生成されます。(携帯電話用を指定した場合は _i.html がつきます）
フォームHTMLが保存されるディレクトリは「初期設定」の最初に指定したフォームHTMLが存在するディレクトリです。
（CGI以下以外のディレクトリを指定している場合は、そのディレクトリにCGIからの書き込み権限を設定しておく必要があります）
ページの前後に複雑なタグや画像が入りフォーム・ジェネレータだけでは作成しきれない場合は入力項目部分だけをフォーム・ジェネレータで作成しソースコードを他のHTMLファイルにペーストして作成して下さい。

以下の設定画面に切り替わります。

とりあえず送信のテストを行う場合は何も変更せずに「次の設定項目へ」ボタンを押して下さい。細目はテストした後で編集し直すことができます。

設定画面は上下２段に別れています。上段は下段の薄いピンクの背景色の入力欄が狭いときに上段の広い入力欄に取込編集後に元にもどす事ができます。
下段の薄いピンクの背景色の入力欄をクリックし上段の「取込」ボタンをクリックします。編集します。「設定」ボタンをクリックします。
また、入力項目に指定する主なオプション一覧が選択できるようになっています、薄い水色の背景色の指定するオプションを選択し、指定したい入力項目のオプション欄をクリックします。「↓オプション挿入」ボタンをクリックするとオプションが設定されます。

この設定を保存するファイル名を指定します。（ファイル名は半角の英数で指定します、拡張子は必要ありません。呼び出した設定ファイルと違うファイル名を指定すると呼び出した設定ファイルを基に新たな設定ファイルを追加することができます）

送信入力項目が多すぎるなどの場合に送信フォームを何回かに分けて（分割して）送信することができます。

複数で分けて送信する場合は「次は何番目」欄で次のフォームが何番目かを選択します。そして次の送信フォームのファイル名を指定します。
（ファイル名は半角英数で指定しファイル名で並び替えたとき後の送信フォームの方が大きくなるよう名前を設定してください。拡張子は必要ありません。例：最初のフォーム form 次のフォーム form1 次のフォーム form2）
最初のHTMLファイルを生成後に次の送信フォームのファイル名の設定ファイルを呼出し最初のHTMLファイルの入力項目以降の２番目の送信フォームの入力項目を指定して２番目の送信フォームを作成します。
新規の作成で次の送信フォームのファイル名を指定すると次の送信フォームのファイル名の設定ファイルが作成されます。この設定ファイルには前のフォームで指定した入力項目が hidden 項目に設定し直し、最終確認画面で表示させるオプション（hidisp)を設定して作成しています。
つまり、最初以降の送信フォームには以前のフォームの入力項目が、hiddenまたは入力項目として全て存在していなければいけないということです。
そして最後の送信フォームに於いて送信が実際に行われます。
どの送信フォームに続くかは「初期設定」の一番上の送信フォームを指定するところで送信フォームを順番に複数指定します。
「初期設定」での指定　form1.html,form2.html

送信フォームを何回かに分けて送信する場合の設定について

最初の送信フォーム　（form1.html)
<form method="post" action="/cgi-bin/formmail/formmail_pro.cgi">
<input type="hidden" name="_check" value="判定">
2番目のフォームに続くことを指定します
どの送信フォームに続くかは「初期設定」の一番上の送信フォームを指定するところで送信フォームを順番に複数指定します。
「初期設定」での指定　form1.html,form2.html
この例では最初の送信フォームは form1.html（この記述のフォーム）２番目の送信フォームは form2.html になります。
標準のディレクトリ以外の場所のファイルを指定する場合はフルパスで指定します。
<input type="hidden" name="_continue" value="2">
<input type="hidden" name="_id" value="test">
<input type="text" name="名前(ch//name)" size=20>
～
<input type="submit" value="次の入力へ">

２番目の送信フォーム　（form2.html)
<form method="post" action="/cgi-bin/formmail/formmail_pro.cgi">
<input type="hidden" name="_check" value="判定">
<input type="hidden" name="_id" value="test">
１番目の送信フォームの入力項目は全て２番目のフォームの中に埋め込んでください。（ hidden項目でも構いません、hidden項目で埋め込んだ場合はオプションに hidisp を付けておくと最終の確認画面では表示することができます）
<input type="hidden" name="名前(name//hidisp)" value="" size=20>
～
２番目の送信フォームでの入力項目
<input type="text" name="住所" size=20>
～
<input type="submit" value="確認画面へ">

※「初期設定」の「入力に不備があった時のエラー表示画面」は必ず「フォーム形式」を選択してください。

生成するフォームの入力欄を指定します。

タイトルの指定項目をクリックするとヘルプが上の【ヘルプ表示スペース】に表示されますので指定方法がわからない場合は表示させてください。

新規の場合は既に標準で使う項目が設定されています。

「並順」を指定します。３桁の半角数字で指定して下さい、実際にフォームHTMLファイルが生成される時はこの数字の小～大で並び変えられて入力順序になります。ある項目と次の項目の間に項目を移動させたり新規に登録したい場合は並順を両方の数字の間に指定します。（例：020と030の間に設定する場合は021～029を指定）
並順に000は指定できません。
並順を指定しないとこの入力フォーム順に生成されます。

「入力タイプ」を指定します、※マークが付いた標準タイプは項目名、項目名表記、初期値、選択値、選択値に対応する表示テキストを省略することができます。
「入力タイプ」に「削除」を選択するとその項目行は削除されます。

「項目名」を指定します。管理者へのメール、データをファイルに保存するときの項目名になります。
また、入力確認のときに項目名として表示されます。

入力タイプが【区切り】の場合は区切りバーのバックグラウンドカラーを指定します。

「項目名表記」を指定します。フォームHTMLで項目の入力欄の左側に表示されます。指定しないと「項目名」が採用されます。

「続右」上の項目の右側に表示させる場合はチェックを入れます。

入力タイプが【区切り】の場合は区切りバーに表示するテキストの文字色を指定します。

「初期値」を指定します。

入力タイプが【input】の場合は入力欄の初期値を指定します。
入力タイプが【年月日】の場合は年の初期値を指定します。#は本年を表し、+-を付けることに相対で指定できます。#+0本年、#+5は５年先、#-5は５年前の指定になります）
入力タイプが【select,checkbox,radio】の場合は初期選択値を指定します。
入力タイプが【区切り】の場合は区切りバーに表示するテキストを指定します。（HTMLタグも記述できます）
入力タイプが【都道府県】【性別】の時に「初期値」に初期選択値を指定することができます。（例：男または女、大阪府）

「選択値」を指定します。

入力タイプが年月日の場合は年を選択させる時に年の範囲を半角の - で区切って指定することができます。
1950-2000 の様に直接年を指定する他以下の様に # で本年からの相対の年を指定することもできます。
2003-#+3 2003年～本年から3年先まで（本年その年を指定する場合は #+0）
年の範囲の指定はフォームを作成した時点の選択肢のことであり、フォームを表示させたときに年が自動的に変化するわけではありません。
年が変わったときはフォームを再ジェネレート（生成）する必要があります。
入力タイプが select,checkbox,radio の場合は選択値1,選択値2,選択値3 のように選択値を半角のカンマで区切って指定して下さい。
select の場合は <option value="xxx">yyyyy</option> のvalue値xxxが選択値、yyyが対応する表示テキストになります。
例えば職業を選択させたい場合は「,会社員,公務員,自営,その他」などと指定します。
この場合は「」「会社員」「公務員」「自営」「その他」から選択できます。
選択値が連続した数値の場合は半角の数字を - で区切って範囲を指定することができます。（例：0-15 ）
入力タイプが「年月日(Popup対応)」の場合は【選択値】と【選択値に対する表示テキスト】に選択できる日の範囲を指定することができます。（例：2007/01/05～2007/02/10【選択値】に 2007/01/05【選択値に対する表示テキスト】に 2007/02/10 を指定します）

「選択値に対応する表示テキスト」を指定します。
select の場合は <option value="xxx">yyyyy</option> のvalue値xxxが選択値、yyyが対応する表示テキストになります。

入力タイプが select,checkbox,radio の場合に選択地に対応する表示テキストを半角のカンマで区切って指定して下さい。（例：「,会社員,公務員,自営,その他」）
選択値を「,1,2,3,4」と指定するいると表示は日本語で送信されるデータは数字となります。
選択値と表示テキストが同じ場合は表示テキストを省略することができます。選択値と同じ値が表示されます。
入力タイプが「年月日(Popup対応)」の場合は【選択値】と【選択値に対する表示テキスト】に選択できる日の範囲を指定することができます。（例：2007/01/05～2007/02/10【選択値】に 2007/01/05【選択値に対する表示テキスト】に 2007/02/10 を指定します）

「必須」を指定します。チェックを入れるとこの項目は必須入力の指定となり、上記で指定した必須マークがつきます。
項目が【区切り】の場合は必須にチェックを入れると表示文字が細字になります。（標準は太字）

「桁数」を指定します。入力タイプが【input】の場合は入力欄のサイズを指定します、上記で指定した入力標準桁数を超えて指定すると <textarea> になります。
入力標準桁数に関係なく<textarea>に設定するには桁数を colsxrows で指定します（例： 70x3 70文字で3行の<textarea>に設定します）。
入力タイプが radio、checkbox で選択肢が多い場合は約80文字（半角）で改行が行われます。桁数に半角数字を指定すると文字数を変更することができます。
タイプが、※電話番号、※携帯電話番号、※ファックス番号の場合は p3 を指定すると3つの入力エリアになります。 p2 は２つの入力エリアになります。
タイプが、※郵便番号の場合は p2 を指定すると2つの入力エリアになります。
p3、p2 の後にセパレータのキャラクターを指定することができます。（例 p3- と指定 0000-000-000）
入力タイプが【区切り】の場合、中央に表示される表示テキストを右または左に変更したいときはは right または left を指定します。

「オプション」を指定します。オプションはこの後で説明されている「オプション一覧」で説明されているオプションを指定します。
オプションは半角の ( ) で囲む必要はありません。（例：rg4:1-5）
複数のオプションを指定するときは半角の // で続けます。（例：comma//rg4:1-5）

「コメント」を指定します。ここで指定したテキストが入力欄の右側に表示されます。注意書きなどに使用します。（携帯用には使えません）
入力欄の下に表示したい場合はコメントの前に <br> を記述します。

※入力項目を設定する欄が足らない場合は一度一杯になった時点で保存し、再度ジェネレート処理を行うと入力欄が増えます。

「次の設定項目へ」をクリックします。以下の設定画面に切り替わります。

生成するフォームHTMLがPC用か携帯用か指定します。

生成するフォームHTMLソースに埋め込む BASE HREF タグのURLを指定します。何も指定しないと BASE HREF タグは埋め込まれません。
生成するフォームHTMLソースに埋め込む Form タグの action のCGIを指定します。
標準設定のままでうまく動作しない、画像がうまく表示できない、うまくリンクがつかない場合は BASE HREF と Form Action の指定を調整してみてください。
SSL で送信する場合は BASE HREF と Form Action のどちらかに https:// の指定を行ってください。
基本的には Form Action に CGI（formmail_pro.cgi）をSSLで呼び出すURLを https://～指定を行い、 BASE HREF に非SSLのホームページのURL を http://～指定します。

生成に使用するテンプレートファイルを指定します。
テンプレートファイルが標準のディレクトリにある場合は選択します（携帯電話用は指定したHTMLファイルの～_i.html を採用します）。
標準のディレクトリ以外にある場合はファイル名をフルパスで指定します。ドキュメントルート以下からの指定は~/で始めます。
パソコン内のファイルを参照する場合はパソコン内のファイルを選択します。
※テンプレートの  の位置に入力項目が配置されます
Tips　テンプレートファイルにフォームメール以外の送信フォームを指定すると<form～>～</form>間に設定した入力項目が配置されます。（現状のフォームのデザインを利用し入力部分のみをフォームメールプロの自動生成に置き換えたい時に有効です）

「ページ全体のバックグラウンド」を指定します。バックグラウンドの色はカラーコード (#FFFFFF) か色名で指定します。
画像ファイルを指定するとバックグラウンドに画像が繰り返して表示されます。操作しているパソコンの中の画像ファイルを選択すると同時にアップロードもできます。（漢字のファイル名のファイルは選択できません）

「フォームタイトル」を指定します。

「フォームタイトルバーの色指定」をします。上記で指定したフォームタイトルがここで指定したバーの下に白文字で表示されます。指定がないとタイトルバー（フォームタイトル）は表示されません。（色の指定は16進カラーコード #FFFFFF か色名）

作成するフォームで javascript 等のスクリプトを埋め込みたい場合は指定します。<base href="">または</title>の後に挿入されます。改行は改行として挿入されます。

作成するフォームで「フォームメールプロ」の以下のオプション(一例）を指定する場合は指定します。 <input type=hidden name="_imode" value="1"> <input type="hidden" name="_idx" value="test1"> <input type="hidden" name="_form" value="form1.html">

ページ説明文TOPを指定します。（タグも挿入できます、改行は<br>に置き換わります、%HISSU%は必須の説明に置換されます、携帯用の%HISSU%は必須文字と置換されます）

「フォーム表形式の指定」をします。フォームの枠線を表示する場合は枠線の太さを 1～5のピクセル数から選択します。
項目名表示の文字色を指定します。（指定しなければ黒が採用されます）
項目名表示のバックグラウンド色を指定します。

項目名の前に表示するテキストを指定します。（タグも挿入できます）
項目名を「左揃え」「右揃え」のどちらで表示するかも指定します。

「必須項目名に表示するテキスト」に関する指定をします。（タグも挿入できます）
テキストの表示場所を「項目名の前」「項目名の後」「入力欄の後」「バーで表示」から選択します。「バーで表示」の縦長のカラーバーの幅を指定します。（1～）
「バーで表示」を選択するとテキストではなく縦長のカラーバーで表示されます。
表示するバー、またはテキストの表示色を指定します。16進カラーコードまたはカラー名で指定します。
幅指定は項目を「横に並べて表示した場合、最小の項目のバーにのみ有効です。

どれかが必須にする項目は 7オプション欄に chグループ番号を指定します。
グループ番号は 0 ～指定し複数のグループを指定することができます。

フォームの文字サイズを指定します、半角数字で指定して下さい。数字のみの場合はpxが採用されます。

タイプがinputの項目の入力標準桁数を半角換算で指定します。この桁数を超えて指定すると<textarea>になります。また項目のサイズを指定しない場合のデフォルトサイズになります。

作成するフォームの言語を選択します。日本語または英語のどちらかを選択できます。

送信ボタンの上に表示される送信前の説明文を指定します。（HTMLタグも記述できます、改行は<br>に置き換わります）

送信ボタンに表示するテキストを指定します。

「作成実行」ボタンをクリックします。

住所自動入力、AjaxZip 2.0 を使用する

フォームジェネレータを使うと川崎有亮さんの作成されたフリーのjavascript、AjaxZip 2.0 を簡単に組み込めます。

郵便番号の入力が終わると都道府県、住所欄に自動的に住所がセットされます。
都道府県を使用しない場合は住所欄に都道府県も一緒にセットされます。

【入力タイプ】に「※郵便番号」を選択します。

【初期値】に ajaxzip2 を入力します。

AjaxZip 2.0 を使用する場合は、ドキュメントルート（index.html と同じ場所）に作成したディレクトリ formmail_js の下に ajaxzip2 フォルダー以下をアップロードしておいてください。

年月日入力にポップアップカレンダー、JKL.Calendar を使用する

フォームジェネレータを使うと川崎有亮さんの作成されたフリーのjavascript、JKL.Calendar を簡単に組み込めます。

年月日入力欄をクリックするとカレンダーがポップアップ表示され希望の日を選択することができます。

【入力タイプ】に「年月日(PopUp)」を選択します。

【項目名】項目名を指定します。

【選択値】と【選択値に対する表示テキスト】に選択できる日の範囲を指定することができます。（例：2007/01/05～2007/02/10【選択値】に 2007/01/05【選択値に対する表示テキスト】に 2007/02/10 を指定します）
どちらかの指定も可能です。today と指定すると本日以降が選択可能になります。

年月日入力のポップアップカレンダーは１つのフォームに２つまで使用可能です。

JKL.Calendar を使用する場合は、ドキュメントルート（index.html と同じ場所）に作成したディレクトリ formmail_js の下に jkl-calendar.js をアップロードしておいてください。

JKL.Calendar はカレンダー表示領域にセレクトボックスがあるとその部分の表示が抜けます。
これを回避するには年月日入力位置を年月日入力より下のセレクトボックスにかからないように変更するか、応急処置版をお使い下さい。
JKL.Calendar はこのホームページのダウンロードページからもダウンロードすることができます。

登録フォームを修正、削除

管理者メニューの「フォーム編集」のうち希望する処理にチェックを入れます。
「登録フォームは次画面で選択」　□：訂正 □：削除 □：HTMLソースを訂正
「フォーム編集」ボタンをクリックすると登録フォームを選択する画面になりますので編集するフォームを選択します。

訂正処理では現在の設定が新規登録と同じフォーマットの画面で表示されますので訂正したい箇所を訂正します。

HTMLソースを訂正処理では生成後のHTMLファイルソースを編集することができます。
ただしソースを編集後はフォーム編集で再訂正するとソースの変更は元に戻ってしまいますので注意が必要です。
このような場合はテンプレートを作成します。

送信フォーム、テンプレートなどHTMLファイルを編集します

フォーム自動生成でテンプレートHTMLファイルを使用した場合にテンプレートを編集します。

編集はマスター管理者メニューの「テンプレートを編集」をクリックして編集します。以下の画面が表示されます。

編集するテンプレートHTMLファイルを選択して編集します。

テンプレートには以下のタグが配置できそれぞれの項目が置換して挿入されます。

タグ	置換される項目
<!--title-->	フォームタイトル
<!--tbg_color-->	タイトルバーのバックグラウンドカラー
<!--top_comment-->	トップの説明文
<!--form-->	指定した入力項目が表形式で繰り返して挿入されます
<!--bottom_comment-->	ボトムの説明文
<!--button-->	送信ボタンのテキスト

テスト送信します

初期設定で指定したフォームを呼び出しテスト送信します。

「テスト送信」ボタンをクリックします。