Mail Form

Mail Form Ver.1.21 Manual


この度はMail Formをダウンロードしていただき、ありがとうございます。
以下に設置・設定の方法を記します。

なお、このフォームはある程度のHTMLの知識が無いと使えません。
分からない方は、そういうサイトが無数にあると思いますので、先にそちらを。


目次

0.圧縮ファイルについて

1.設置・設定

2.エラーフォーム・送信完了フォーム

3.送信情報入力フォーム

4.送信確認フォーム



0.圧縮ファイルについて △上に戻る

mailform.lzh(または.zip)を解凍すると、以下のファイルが出てきます。
すべて揃っていることを確認してください。

check.html・・・送信確認フォーム
complete.html・・・送信完了フォーム
error.html・・・エラーフォーム
form.html・・・送信情報入力フォーム
form.txt・・・form.html の重要な部分だけ書き出したもの。設定説明に使用。
jcode.pl・・・文字コード変更ライブラリ。歌代氏作成。
mail.cgi・・・メール送信CGI
manual.html・・・マニュアル。今見ているHTMLファイル。
tempfile.dat・・・一時保存用ファイル。


1.設置・設定 △上に戻る

まずは設定です。
mail.cgiをテキストエディタで開き、perlのパスを使用する環境に合わせてください。
その他にもいくつか設定部分がありますが、
大抵は見てすぐわかりますし、分かりづらい部分にはそれなりの説明が書いてあります。
よって、ここでの説明は省略します。

基本的な設置方法を示します。
/ から始まるものはディレクトリ、()内の数値はパーミッションです。

/mailform(755) --+-- mail.cgi (755)
                 |
                 +-- tempfile.dat (666)
                 |
                 +-- form.html(644)
                 |
                 +-- error.html(644)
                 |
                 +-- check.html(644)
                 |
                 +-- complete.html(644)

tempfile.dat は同一IPでの連続投稿チェックのためのものです。
この機能を使わない場合は必要ありません。

CGIディレクトリ内に置いたHTMLが見られない環境の方も多いと思います。
その場合は、form.html complete.htmlを、ブラウザから見られる場所に置きます。
また、これから説明する4つのフォームのうち、送信情報入力・確認の2つのフォームでは、
form タグというものを使用します。
そこでCGIへのパスをあわせるようにしてください。



2.エラーフォーム・送信完了フォーム △上に戻る

このメールフォームでは、全ての表示する場面をHTMLで設定できます。
その場面は4つありますが、とりあえず簡単なものから説明していきます。
はじめからある、サンプルのHTMLを見ながらだと、理解しやすいかもしれません。

まず、送信完了フォーム(complete.html)。
見ていただければわかりますが、単なるHTMLです。
CGIと関連して動く部分は全くありません。ご自由にデザイン変更を行ってください。

次にエラーフォーム(error.html)。
ここと送信確認フォームでは変数というものを使用します。
変数を書くと、実際に表示される時は、書いた部分に内容が置き換わります。

ここで使われているのは、<!--ERROR-->というもの1つだけで、
これはエラーメッセージを表示します。
例えば、名前を入力していなかったら、<!--ERROR-->が「お名前を入力してください。」
という文章に置き換わって表示されます。



3.送信情報入力フォーム △上に戻る

form.htmlの話です。ここから面倒になってきます。
サンプルはデザインの関係上タグが入りこんでいるので、form.txt の方をご覧ください。
form.html のテーブルタグ等を一切除いたものです。

基本のパーツから説明します。

とりあえず、並べてみます。

<form method="post" action="./mail.cgi">

名前
<input type="text" name="name" size=20>

E-Mail
<input type="text" name="mail" size=40>

URL
<input type="text" name="url" size=40>

タイトル
<input type="text" name="title" size=40>

メッセージ
<textarea name="message" cols=40 rows=10></textarea>

コピーメール
<input type="radio" name="copymailcheck" value="1" checked>受け取る
<input type="radio" name="copymailcheck" value="0">受け取らない

<input type="submit" value="Check">
<input type="reset" value="Reset">

<input type="hidden" name="act" value="check">
</form>
まず、一番上と下の form タグ。これは情報を送るぞ、っていう宣言です。
CGIディレクトリの中に form.html を置いていない方は、action で指定するCGIのパスを変更してください。

</form>の1行上、name=act の input タグ。これはおまじないと考えてください。
さらにその2行上にある、input type="submit" のタグ。送信ボタンです。
input type="reset" はやり直しのボタンです。

以上がどんな状況でも必ず必要なタグです。
次は、設定によっては必要無いものたち。

名前〜メッセージまでのタグを見てください。
各々、入力のためのボックスです。
CGIの冒頭で入力を必須に設定した場合だけ、これらのタグを書きます。

コピーメールの選択です。
CGIの設定で $copymail = 0; を設定して、ユーザーに選択させる場合だけ必要です。
ここではラジオボタンを使っていますが、別にセレクトボックスでも構いません。



ここから拡張です。必ず form タグの間に入れてください。
好きなデータを好きなように送ることが出来ます。
form.txt から1つだけ引用します。
<input type="hidden" name="datatitle1" value="Question1">
<input type="hidden" name="datacheck1" value="1">
<input type="text" name="data1" size=10>
このような形です。
まず一番上の datatitle1 。これは、そのデータの名前です。
次の datacheck1 。value が 1 だと、入力または選択が必須になります。そうしないなら 0 を。
で、最後に data1 という名前で入力ボックスを作ってやります。

もっと作りたいなら datatitle2 と datacheck2 と data2 のボックスを。
最後につく数字をどんどん増やしていくだけです。
必ず 1 から順番に番号付けを行ってください。
でないと、まともに動きません。



4.送信確認フォーム △上に戻る

check.htmlです。
CGIの方で確認をしないように設定しているなら、これは無視して結構です。

<form method="post" action="./mail.cgi">
<input type="submit" value="送信">
<input type="hidden" name="act" value="send">
<!--ALLDATA-->
</form>
とりあえず、送信するためのボタンです。これを書かないと送れません。
サンプルでは一番下の方にあります。

ちなみに。
<form method="post" action="./mail.cgi">
<input type="submit" value="戻る">
</form>
これで送信情報入力フォームに戻ることが出来ます。
form.html へリンクを貼るだけでも十分なのですが、デザインをボタンで統一したい方は使ってください。

あとは変数です。以下に変数とその内容を示します。

<!--NAME-->・・・名前
<!--MAIL-->・・・メールアドレス
<!--URL-->・・・URL
<!--TITLE-->・・・タイトル
<!--MESSAGE-->・・・メッセージ
<!--COPYMAIL-->・・・コピーメール送信の有無
<!--DATA1-->・・・入力画面で data1 に入力・選択した値
<!--DATA2-->・・・data2に入力・選択した値。以下data3以降も同様。

これらをテーブルタグなどを組み合わせて、うまくデザインしてください。




2001/04/19 Ver.1.21
2000/12/30 Ver.1.20


The Room