生協インターネットは、大学生協が運営する安心・安全のインターネットプロバイダーです。会員のお客様向けの情報を掲載しています。

メールフォームの基本的な使い方

メールフォームの基本的な使い方

【基本的な使い方】

ホームページの感想をホームページ上から送信してもらいたいときなど、入力したデータを指定したアドレスに送るメールフォームを設置するには、そのWWWページのHTMLファイル(例えば「form.html」)中に、次のタグを埋め込みます。

<form method="post" action="/cgi-bin/mail.cgi" enctype="multipart/form-data">
<input type="hidden" name="to_mailaddr" value="xxx@mxx.seikyou.ne.jp">
<input type="hidden" name="success" value="http://hxx.seikyou.ne.jp/home/xxx/xxx.html">
<input type="hidden" name="act" value="send">
<input type="text" name="name" size=20 maxlength=40>
<input type="text" name="from_mailaddr" size=40 maxlength=40>

<input type="text" name="title" size=40 maxlength=80>

<textarea name="message" cols=40 rows=10 wrap="soft"></textarea>

<input type="file" name="attachment">
<input border="0" value="Check" type="image"
src="/images/mail_send.gif" width="170" height="25">
<a href ="http://hxx.seikyou.ne.jp/home/xxx/yyy.html"><img
src="/images/mail_reset.gif" border="0" width="170"
height="25"></a>

</form>

赤色で表示している部分が、お客様にてご用意いただく、メールアドレスやメール送信後に表示するURL等になります。

すると、次のようなフォームが表示されます。

名前
差出人アドレス
タイトル
メッセージ
添付ファイル
送信・リセットボタン

(表示上、色を付け体裁を整えてあります)

メールフォームから送信されたメールは以下のような内容にて届きます。

To: s-taro@ma1.seikyou.ne.jp あらかじめ指定した宛先
From: jiroi@hogehoge.ne.jp メールフォームにて書き込まれた差出人アドレス
Subject: こんにちは(From Mail Form) メールタイトルとメールフォームから送られてきたことを示す項目

お名前:生協 太郎
メールアドレス:jiroi@hogehoge.ne.jp

タイトル:こんにちは
メッセージ:
テストメールです。

入力された項目と内容が表示されます

---------------------------------------------
IPアドレス:***.***.***.***
送信時間:2002/04/15(月)12:12
ホスト名:***.seikyou.ne.jp
ユーザーエージェント:Mozilla/4.78 [ja] (Windows NT 5.0; U)
---------------------------------------------


メールを送信した人が書き込んだ端末のIPアドレス(ホスト名)送信時間、使用ブラウザ(OS)が表示されます

※一部のヘッダは省略しています。


【ご注意】

メールフォームでは、ユーザー様が自由に項目を追加することはできません。利用時の基本的な使い方を含め、独自に作成されたhtmlファイルへの項目の記述方法についてご案内いたします。

1.<form>:必須

<form>は必ず以下の形式で記述します。

<form method="post" action="/cgi-bin/mail.cgi" enctype="multipart/form-data">

これは、全てのユーザーにおいて共通です。

2.フォーム部品に関する説明

<form> で作成したフォームの中に、テキスト入力や実行ボタンなどの各フォーム部品を記述します。CGIプログラムにて各項目の名前を判断しています。ユーザー様が独自に項目を追加されても無視されます。なお、name部分に変更がない限り、表現方法を変更することは可能です。

2.1 name="to_mailaddr":必須

受取人(ユーザー)のメールアドレスを指定します。
標準値:<input type="hidden" name="to_mailaddr" value="xxx@mxx.seikyou.ne.jp">
赤字で指定した部分に、受取人(ユーザー)のメールアドレスを入力します。
本項目は画面上では表示されません。

2.2 name="success":必須

メールフォームを利用した方をフォーム送信後に案内するページを指定します。
標準値:<input type="hidden" name="success" value="http://hxx.seikyou.ne.jp/home/xxx/xxx.html">
赤字で指定した部分に、フォーム送信後に案内するページのアドレス(URL)を指定します。
本項目は画面上では表示されません。

2.3 name="act" :必須

メールフォームを利用するに当たって必要な項目です。
標準値:<input type="hidden" name="act" value="send">
本項目は画面上では表示されません。

2.4 name="name":必須

フォームを利用してメールを出す方の名前を入力するための欄です。
標準値:<input type="text" name="name" size=20 maxlength=40>
最大40文字(全角20文字)まで入力可能です。

2.5 name="from_mailaddr":必須

差出人のメールアドレスです。
標準値:<input type="text" name="from_mailaddr" size=40 maxlength=40>
最大40文字まで指定できます。

2.6 name="title":必須

メールタイトルです。
標準値:<input type="text" name="title" size=40 maxlength=80>
最大80文字(全角40文字)まで指定できます。
その他の設定例:<select>と<option>を組み合わせることによりメニュー形式にすることが可能です。


<select name="title">
<option selected>今日は何時に帰ってくるの?</option>
<option>夕御飯はどうする?</option>
<option>あした暇?</option>
<option>おはよ!</option>
</select>

画面上には、
として表示されます。あらかじめ決まった題名でメールを送信する際に利用します。

2.7 name="message":必須

メール本文です。
標準値:<textarea name="message" cols=40 rows=10 wrap="soft"></textarea>
最大400文字(全角200文字)まで指定できます。
「cols」で入力欄の横幅を、「rows」で入力欄の行数を表示枠の幅として指定します。表示上の入力枠が400文字以内であっても、記入者が400文字以上の内容を送信しようとしたときにはエラーが表示されます。
「textarea」を「text」に変更し、「cols」「rows」を外すと、1行メッセージ欄としてご利用頂けます。

2.8 name="attachment":選択可

メールにファイルを添付させたいときに利用します。 標準値:<input type="file" name="attachment"> 一度に送信できるメールは1.5MB程度のサイズで、1通に限ります。 ※意図しないファイルが送信されることがあります。利用の際は十分ご注意ください。

3.フォーム内容送信ボタン/リセットボタン:必須

各種部品設置の後に、フォーム内容を送信するボタン、リセットするボタンを設置します。
送信ボタン標準値;<input border="0" value="Check" type="image"
src="/images/mail_send.gif" width="170" height="25">:
「src="/images/mail_send.gif" width="170" height="25"」(画像ファイルの場所と画像サイズ)を変更することにより、お客様でご用意いただいた画像を変更することができます。

リセットボタン標準値;<a href ="http://hxx.seikyou.ne.jp/home/xxx/yyy.html"><img src="/images/mail_reset.gif" border="0" width="170" height="25"></a>

標準状態では、リセットボタンとして用意した画像に、メールフォーム自体(hetmlファイル)をリンク先として指定しています。

サンプル画像:

標準
タイトルバー(50%縮小にて表示)

/images/mail_title.gif

送信ボタン

/images/mail_send.gif

リセットボタン

/images/mail_reset.gif

サンプル1
タイトルバー(50%縮小にて表示)

/images/mail_title2.gif

送信ボタン

/images/mail_send2.gif

リセットボタン

/images/mail_reset2.gif

サンプル2
タイトルバー(50%縮小にて表示)

/images/mail_title3.gif

送信ボタン

/images/mail_send3.gif

リセットボタン

/images/mail_reset3.gif

※上記サンプル以外の画像についてはユーザー様でご用意ください。

その他の設定:

一般的に使用されている<input type="submit" name="submit" value="送信">(画面上には として表示)や、<input type="reset" name="reset" value="リセット">(画面上には として表示)を利用することも可能です。

4. </form>:必須

全てのフォーム部品の記述が終わりましたら、</form>でフォームを閉じます。

以上がメールフォームの基本的な利用方法です。詳細に関しましては市販の書籍等をご覧ください。

各種サービスの設定方法