ホームページ

メールフォームの設置方法(基本)について

インターネット活用研究会のWebサーバーで使用できるメールフォームを設置する方法について説明します。設定事項はすべてタグでの指定となります。


[STEP 1] メールを送信したいWebページに フォームを配置します
[STEP 2] メールフォームで利用できるパラメータ一覧
[STEP 3] 受け取りメールをわかり易くするために


【mailform2.cgi の機能】
 ・項目ごとに必須の設定ができます。(複数選択の場合も可能)
 ・フォームに記入した人が入力内容を一旦確認することができます。
 ・フォームに記入した人が入力内容の控えをメールで受け取ることができます。
 ・メールの送信先に複数のアドレスを設定できます。
 ・メールフォームから送信した人に送られる確認メールのサブジェクトが指定できます。
 ・メール及びプレビュー画面の文面を自由にカスタマイズできます。(応用編)


[STEP 1] メールを送信したいWebページに フォームを配置します。

――HTMLソース――

※メールフォームを設置するには,<form>タグの「action」で
<form method="POST" action="http://www4.toyama-smenet.or.jp/cgi-bin/mailform2.cgi">
と指定することで、mailform2.cgiを動作させることができます。
その際、methodオプションはPOSTを指定してください。

●メールフォームを利用したサンプルイメージ


●メールフォームのソース(html)

++ここから++
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>注文書(サンプル)</title></head> <body>
<h1> ―商品注文書―</h1>
以下の入力フォームに、必要事項をご入力のうえ、<font color="#0000FF">送信ボタン</font>をおしてください。
<hr>
<form method="post" action="http://www4.toyama-smenet.or.jp/cgi-bin/mailform2.cgi">
<table>
<tr><td><b>お名前<font color="#ff0000">(必須)</font>:</b></td><td><input
type="text" name="01_名前">(全角でお願いします。)</td></tr>
<tr><td><b>ご住所<font color="#ff0000">(必須)</font>:</b></td><td><input
type="text" name="02_住所" size="50">(全角でお願いします。)</td></tr>
<tr><td><b>お電話番号:</b></td><td><input type="text"
name="03_電話">(半角英数,"-"なしでお願いします。(例)0764445600)</td></tr>
<!--ページを見ている人のメールアドレス-->
<tr>
<td><b>メールアドレス:</b></td><td><input type="text"
name="FROM" size="50"></td></tr>
</table>
<br>
<br>
<hr>
ご注文になりたい商品の商品名、サイズ、数量を入力してください。
<table>
<tr>
<td> </td><td><b>商品名</b></td><td><b>サイズ</b></td><td><b>数量</b></td></tr>
<tr><td><b>1</b></td>
<td><input type="text" name="04_商品名1"></td>
<td>
<select name="05_サイズ1">
<option selected> S<option> M<option> L</select>
</td>
<td><input type="text" name="06_数量1" size="5"></td></tr>
<tr><td><b>2</b></td>
<td><input type="text" name="07_商品名2"></td>
<td>
<select name="08_サイズ2">
<option selected> S<option> M<option> L</select>
</td>
<td><input type="text" name="09_数量2" size="5"></td></tr>
<tr><td><b>3</b></td>
<td><input type="text" name="10_商品名3"></td>
<td>
<select name="11_サイズ3">
<option selected> S<option> M<option> L</select>
</td>
<td><input type="text" name="12_数量3" size="5"></td></tr>
</table>
特に必要な事項がございましたら、お書きください。<br>
<textarea rows=5 cols=60 name="13_コメント"></textarea>
<hr>
お支払い方法を選択してください。<br>
<input type="radio" name="14_支払方法" value="銀行振込"
checked> 銀行振込(銀行振込をご選択の場合は、入金確認後に商品を発送いたします。)<br>
<input type="radio" name="14_支払方法" value="代金引換"
> 代金引換
<hr>
<b>受取可能な時間帯を全て選択してください。<font color="#ff0000">(必須)</font></b>
<input type="checkbox" name="15_配送時間[]" value="午前中">午前中
<input type="checkbox" name="15_配送時間[]" value="12時~17時">12時~17時
<input type="checkbox" name="15_配送時間[]" value="17時~21時">17時~21時
<input type="checkbox" name="15_配送時間[]" value="21時以降">21時以降
<hr>
<!--必須項目にする-->
<input type="hidden" name="MUST[]" value="01_名前">
<input type="hidden" name="MUST[]" value="02_住所">
<input type="hidden" name="MUST[]" value="15_配送時間">

<!--研究会メンバの方が受取るメールアドレスの指定例-->
<input type="hidden" name="ADDR" value="staff@toyama-smenet.or.jp">

<!--入力内容の確認プレビュー画面を利用するか?-->
<input type="hidden" name="CHECK" value="1">

<!--入力者に確認メールを送信するか?-->
<input type="hidden" name="RECPT" value="1">

<!--研究会メンバの方が受取るメールのサブジェクトの指定例-->
<input type="hidden" name="SUBJECT" value="商品注文書">

<!--フォーム送信が成功した場合に表示させるURL指定例-->
<input type="hidden" name="ACCEPTREDIRECT" value="http://www.toyama-smenet.or.jp/test/thankyou.html">

<!--フォーム送信が失敗した場合に表示させるURL指定例-->
<input type="hidden" name="INVALIDREDIRECT" value="http://www.toyama-smenet.or.jp/test/error.html">

<!--メールフォームから送信した人に送られる確認メールのサブジェクト-->
<input type="hidden" name="SUBJECTRECPT" value="商品の注文承りました。">

<!--以下のパラメータはメール及びプレビュー画面をカスタマイズする際に使用します-->
<input type="hidden" name="ID" value="sample01">

<input type="hidden" name="TOCUSTOMER" value="customer.txt">
<input type="hidden" name="TOADMIN" value="admin.txt">
<input type="hidden" name="CHECKTEMP" value="check.txt">

<input type="submit" value="送信"> <input type="reset"
value="リセット">
</form>
</body>
</html>

++ここまで++


[STEP 2] メールフォームで利用できるパラメータ一覧

この一覧のパラメータを利用してメールフォームを制御することができます。利用される際にはサンプルのHTMLソースを参考にしてください。

フィールド名:ADDR
入力する値:インターネット活用研究会メンバーが受取るメールアドレス
指定例:<input type="hidden" name="ADDR" value="staff@toyama-smenet.or.jp">
【ポイント】カンマ区切りで複数アドレスを指定できます。
指定例:<input type="hidden" name="ADDR" value="member@toyama-smenet.or.jp,staff@toyama-smenet.or.jp">
※上記のタグ内のメールアドレスは、ご自身の設定に合わせて書き換えてください。


フィールド名:FROM
入力する値:ページを見ている人に入力してもらうメールアドレス
指定例:<input type="text" name="FROM" size="50">

フィールド名:ACCEPTREDIRECT
入力する値:フォーム送信が成功した時に表示されるURL指定
指定例:<input type="hidden" name="ACCEPTREDIRECT" value="http://www.toyama-smenet.or.jp/test/thankyou.html">
※上記のタグ内のURLは、ご自身の設定に書き換え、絶対パスで指定することをお勧めします。

フィールド名:INVALIDREDIRECT
入力する値:フォーム送信が失敗した時に表示されるURL指定
指定例:<input type="hidden" name="INVALIDREDIRECT" value="http://www.toyama-smenet.or.jp/test/error.html">
※上記のタグ内のURLは、ご自身の設定に書き換え、絶対パスで指定することをお勧めします。

フィールド名:SUBJECT
入力する値:研究会メンバの方が受取るメールのサブジェクト
指定例:<input type="hidden" name="SUBJECT" value="商品注文書">
※上記のタグ内のサブジェクトは、ご自身の設定に合わせて書き換えてください。

フィールド名:SUBJECTRECPT
入力する値:メールフォームから送信した人に送られる確認メールのサブジェクト
指定例:<input type="hidden" name="SUBJECTRECPT" value="商品の注文承りました。">
※上記のタグ内のサブジェクトは、ご自身の設定に合わせて書き換えてください。
【ポイント】指定がない場合、サブジェクトは「From CGI Mailer」となります。

フィールド名:CHECK
入力する値:フォームに入力した内容が確認できる確認プレビュー画面を利用するか?
指定例:利用する="1"利用しない="0"
<input type="hidden" name="CHECK" value="1">

フィールド名:RECPT
入力する値:フォームから送信に成功した場合に入力者に確認メールを送信するか?
指定例:送信する="1"送信しない="0"
<input type="hidden" name="RECPT" value="1">

※必須項目にする場合の設定方法
フィールド名:MUST[]
入力する値:必須項目にする項目名
指定例:<input type="hidden" name="MUST[]" value="01_名前">

フィールド名:MUST[]  …(複数選択の場合)
入力する値:複数選択の場合に必須項目にする
指定例:
<input type="checkbox" name="15_配送時間[]" value="午前中">午前中
<input type="checkbox" name="15_配送時間[]" value="12時~17時">12時~17時
<input type="checkbox" name="15_配送時間[]" value="17時~21時">17時~21時
<input type="checkbox" name="15_配送時間[]" value="21時以降">21時以降
<input type="hidden" name="MUST[]" value="15_配送時間">


※設置にあたっての注意
ADDR、SUBJECT、ACCEPTREDIRECT、INVALIDREDIRECTはフォームコントロール(hidden)"非表示"で設定することをお勧めします。特にACCEPTREDIRECT、INVALIDREDIRECTを任意で入力させることは止めてください。


[STEP 3] 受け取りメールをわかり易くするために

サンプルメールフォームから送られてくるメールのサンプルを以下に掲載します。

FROM = abcd@toyama-smenet.or.jp
01_名前 = 富山太郎
02_住所 = 富山県富山市高田
03_電話 = 0764445600
04_商品名1 = 商品A
05_サイズ1 = S
06_数量1 = 10
07_商品名2 = 商品B
08_サイズ2 = M
09_数量2 = 20
10_商品名3 = 商品C
11_サイズ3 = L
12_数量3 = 30
13_コメント = 商品Aは包装出来ませんか?
14_支払方法 = 銀行振り込み


 フォームページ設置者が受取るメールは、以下の順に並びます。
  ・ページ閲覧者のメールアドレス(FROM)が必ず先頭になる。
  ・その他は、inputタグの中のnameパラメータでソートされる

 したがって、サンプルフォームでは、上から順に、
  ・お名前
  ・ご住所
  ・お電話番号
   ・・・・
  という順にメール本文を受け取るために、下記のようにします。

<input type="text" name="01_名前">
<input type="text" name="02_住所" size="50">
<input type="text" name="03_電話">

以上です。