メールフォームの作成

このメールフォームを使うことで、あなたのホームページ上からメールを送信できるようになります。


解説

作成例:注意点

作成例1:よくあるフォームの例 

作成例2:表題を選択できるフォームの例 

作成例3:アンケートフォームの例

※どうも、良く分からない・・・という場合は、作成例のHTML文をコピーして赤字の部分を自分用に変更して試してみてください。

実例1:ユーザ掲示板/チャットルーム募集フォーム
     (実例なので、ソースを見るだけにしてください。決して送信テストはしないでください)


解説

まず、下のHTMLを見てください。これは、メールを送信するために最低限必要な記述内容です。

赤字の部分は基本的に変更してはいけない部分です。
青時の部分はフォームフィールドのタイプで、目的に応じて変更することができます。
緑色の部分は各行の説明です
紫色の部分は、あなたのアカウントなどに必ず変更しなくてはいけない部分です。
黒字の部分は、変更できます

<form method="POST" action="/asp/mailto.asp"> (1) メール送信フォームの始まりです。メール送信プログラムの場所を定義しています
宛先<input type="text" name="toaddr" size="50"><br> (2) 宛先の入力フィールドを定義しています
送信元<input type="text" name="fromaddr" size="60"><br> (3) 送信元の入力フィールドを定義しています
題名<input type="text" name="subject" size="78"><br> (4) 題名の入力フィールドを定義しています
本文<textarea rows="4" name="body" cols="56"></textarea><br> (5) メール本文の入力フィールドを定義しています
<input type="submit" value="送信する"> (6) 送信ボタンを定義しています
<input type="hidden" name="nextpage" value="NEXTURL"> (7) メール送信後、表示したいページを定義しています(省略できます)
</form> (8) メール送信フォームの終了です

上記のHTMLをそのままブラウザで表示させると以下のようなります。

宛先
送信元
題名
本文
 

 

各HTMLタグに関する説明は以下のとおりです。

(1),(8) メール送信プログラムを明記したフォームタグ及びフォームの終了タグです
・メソッドには"POST"の指定をしてください
・アクションには、"/asp/mailto.asp"もしくは、"http://nas.ne.jp/asp/mailto.asp" を指定してください
・その他のフォーム属性は必要に応じて設定してください
(2),(3),(4),(5) メールの内容をブラウザから入力させるためのフォームフィールドタグです
name= 内容
toaddr 送信先メールアドレスが入力されるフィールドです。(必須)
・メールアドレス形式(info@nas.ne.jpなど)である必要があります。
・長さはおおむね50〜60文字程度が妥当です。
・通常は「あなた」宛となるはずなので、隠しフィールドとすることが多いかと思います(後述)
・その他のフィールド属性は必要に応じて設定してください。

 

fromaddr 送信元メールアドレスが入力されるフィールドです。
・メールアドレス形式(半角で、"XXXX@YYYYY"のように、"@"が付いた形式)である必要があります。
・長さはおおむね50〜60文字程度が妥当です。
・その他のフィールド属性は必要に応じて設定してください。
このフィールドが間違っていたり、空白だった場合は、"someone@somewhere" に置き換えられてメールが送信されます。(全角や@が付いていない場合などは、間違っているとみなされます)
 送信元のメールアドレスが置き換えられた場合は、本文の最初に”■送信元[XXXXXXX]”という形式で、入力された内容が付きます。
subject メールの表題となるフィールドです。
・通常は1行程度の文字列を入力します。

 

body メールの本文となるフィールドです。
・複数行の入力ができるように、<textarea>タグを使うとよいでしょう

 

各フィールドは必ず必要です。( 隠しフィールドでもかまいません)
項目の順番は、どのような順番で定義してもかまいません。
(6) 送信ボタンのタグです。
(7) メールを送信した後に表示させたいページのURLを指定します。
カレントフォルダは無効となりますので、必ず絶対URLもしくは、NASのドキュメントルートからの相対URLで指定してください。

たとえば、あなたのアカウントが"abc"で、表示させたいページが"thanks.html"というファイル名で、あなたのルートドキュメントフォルダに置いてある場合は、

<input type="hidden" name="nextpage" value="http://www.nas.ne.jp/usr/abc/thanks.html">
もしくは
<input type="hidden" name="nextpage" value="/usr/abc/thanks.html">

となります。

nextpageは省略可能ですが、省略された場合は、NASの標準メールフォーム受領ページが表示されます。
標準受領ページは、送信元、送信先、表題、本文などの項目が表示され、直前のメールフォームへのリンクのみが置かれたページとなりますので、デバッグ用にご利用ください。

 


もっと色々やってみたい方に・・・

次のフォームフィールドを記述することが可能です

name= 内容
cc カーボンコピーとして送信する送信先メールアドレスを指定するフィールドです。
・メールアドレスを複数指定する場合はコロン(";")で区切る必要があります。
bcc ブラインドカーボンコピーとして送信する送信先メールアドレスを指定するフィールドです。
・メールアドレスを複数指定する場合はコロン(";")で区切る必要があります。
Importance 電子メールの重要度を数値で指定します。
(0:低,1:通常,2:高)

 

item1〜item20 主にアンケート用に利用できます。
各項目の入力内容は、メール本文の先頭に次の形式で挿入されます。
□1□item1に入力された内容XXXXXX
□2□item2に入力された内容XXXXXX
□3□item3に入力された内容XXXXXX
   :
□20□item20に入力された内容XXXXXX
(この後に本文が続きます)

・項目名はitem1,item2,item3...と、最大item20 まで使えます。(使っていない項目は送信されません)
・注意:「item01」と、数字の頭に「0」を入れてしまうと認識されません(その項目は送信されません)

 


作成例

ご注意 この例の送信ボタンは押しても動作しないようになっていますが、右のHTML文をコピーしてあなたのページで使用すれば、メールが送信されるようになります。
作成例のフォームには、あらかじめそれらしい文が入力例として入力されています。 右のHTML文をコピーしてあなたが作成したフォームページには表示されません。
HTML文の「赤字の部分」は、必ずあなたのアカウントやフォルダ名に変更してください。
getmonthメソッドでは月が0〜11の数字で抜き出されるため、表示する際には月を入れておく変数に1を足さないと、正しい月が表示されなくなっています。
サンプルをご用意しましたので下記のように作成してみてください。
サンプル <head>
<script language="JavaScript">
<!--
SysDate = new Date();
Year = SysDate.getYear();
Month = SysDate.getMonth();
Date = SysDate.getDate();
//-->
</script>
</head>

<body>
<script language="JavaScript">
<!--
document.write("本日は",Year,"年",Month+1,"月",Date,"日です");
//-->
</script>
</body>

 

作成例その1

ブラウザで表示されるフォーム HTML文
このホームページのご意見をどうぞ
あなたのメールアドレス
ご意見ご感想

このホームページのご意見をどうぞ<br> 
<form method="POST" action="/asp/mailto.asp"> 
<input type="hidden" name="toaddr" value="あなたのID@nas.ne.jp"> 
<input type="hidden" name="subject" value="■ホームページの意見"> 
あなたのメールアドレス 
<input type="text" name="fromaddr" size="56"><br> 
ご意見ご感想<br> 
<textarea rows="4" name="body" cols="59"></textarea><br> 
<input type="submit" value="このボタンを押して送信してください">
<input type="hidden" name="nextpage" value="/usr/あなたのID/thanks.html"> 
</form>
送信後に表示されるページ HTML文(ドキュメントルートに置いたthanks.html)
ご意見ありがとうございます。
またのお越しをお待ちしております。
<html><head></head>
ご意見ありがとうございます。<br>
またのお越しをお待ちしております。<br> 
</body>
解説
よくあるご意見メールのフォームです。

このフォームでは、「宛先」と「題名」の入力項目がありません。通常は宛先はあなた自身のはずですから、隠しフィールドを使って、宛名を隠してしまっています。

<input type="hidden" name="toaddr" value="あなたのID@nas.ne.jp">

この行の「あなたのID」に、あなたのユーザIDを入れておけば、このフォームからはかならずあなた宛にメールが送られることになります。

同様に、「題名」も隠しフィールドにしてしまっています。 これは、あなたのメールボックスにメールが到着したときに、通常やりとりしている他のメールと見分けやすいように、ここから送られてくるメールの題名を固定で「■ホームページの意見」とするようにしたものです。

作成例その2

ブラウザで表示されるフォーム HTML文
私のホームページのご意見を聞かせてください
内容はいかがでしたか? (選んでください)

その他気が付いたことなどを教えてください

あなたのメールアドレスをおしえてください 
メールアドレス
私のホームページのご意見を聞かせてください<br> 
<form method="POST" action="/asp/mailto.asp"> 
<input type="hidden" name="toaddr" value="あなたのID@nas.ne.jp">
内容はいかがでしたか?
<select size="1" name="subject">
  <option value="■意見:とてもよかった">とてもよかった</option>
  <option value="■意見:まあまあだった">まあまあだった</option>
  <option value="■意見:とくに良くも悪くもない">とくに良くも悪くもない</option>
  <option value="■意見:あまりよくなかった">あまりよくなかった</option>
  <option value="■意見:全くよくなかった">全くよくなかった</option>
</select>(選んでください)<br>
<br>
その他気が付いたことなどを教えてください<br>  
<textarea rows="4" name="body" cols="59"></textarea><br>
あなたのメールアドレスをおしえてください<br>
メールアドレス<input type="text" name="fromaddr" size="56"><br> 
<input type="submit" value="このボタンを押して送信してください">  
<input type="hidden" name="nextpage" value="/usr/あなたのID/abc/thanks.html"> 
</form> 
送信後に表示されるページ HTML文(abcフォルダに置いたthanks.html)
貴重なご意見ありがとうございました。

2000年3月4日 1時46分8秒

ホームページに戻ります
<html><head></head>
<body>
貴重なご意見ありがとうございました。<br><br>
<script language="JavaScript">
var dt=new Date();
document.write( dt.getYear() + "年" + dt.getMonth() + "月" +
dt.getDate() + "日  " + dt.getHours() + "時" + 
dt.getMinutes() + "分" + dt.getSeconds() + "秒" );
</script>
<a href="/usr/あなたのID">ホームページに戻ります</a>
</body>
解説
今度は、意見をドロップダウンメニューから選べるフォームの例です。
「宛先」の入力項目は、前の例のようにあなた自身のメールアドレスを固定で指定しています。
「題名」の入力フィールドは、<select>タグを使って、いくつかの意見を選べるようにしています。
選択されるメニューに表示する内容は<option></option>タグで囲まれた部分、メール送信プログラムに表題として渡される文字列は、value=の中身となります。 この例も、あなたのメールボックスにメールが到着したときに、通常やりとりしている他のメールと見分けやすいように、ここから送られてくるメールの題名を固定で「■意見:」から始まるようにしたものです。
あなたのメールボックスには、
■意見:とてもよかった
■意見:まあまあだった
■意見:とくに良くも悪くもない
■意見:あまりよくなかった
■意見:全くよくなかった
などの題名で、メールが到着します。

送信後に表示されるページは、ドキュメントルートではなくて、"abc"というフォルダの下に置いてある設定となっています。
送信後に表示されるページには、あなたのホームページに戻るためのリンクが張ってあります。
日付と時刻はJavaScriptで表示しています。

作成例その3

ブラウザで表示されるフォーム HTML文
アンケートにお答えください
内容ははいかがでしたか?
色使いいかがでしたか? 良い悪い
あなたの年齢
あなたの性別
その他気が付いたことなどを教えてください

あなたのメールアドレスをおしえてください 
メールアドレス
アンケートにお答えください<br> 
<form method="POST" action="/asp/mailto.asp"> 
<input type="hidden" name="subject" value="■アンケートメール">
<input type="hidden" name="toaddr" value="あなたのID@nas.ne.jp">
内容はいいかがでしたか?
<select size="1" name="item1">       
  <option value="内容:とてもよかった">とてもよかった</option>
  <option value="内容:まあまあだった" selected>まあまあだった</option>
  <option value="内容:とくに良くも悪くもない">とくに良くも悪くもない</option>
  <option value="内容:あまりよくなかった">あまりよくなかった</option>
  <option value="内容:全くよくなかった">全くよくなかった</option>
</select><br> 
色使いいかがでしたか?
<input type="radio" value="色:良い" checked name="item2">良い
<input type="radio" name="item2" value="色:悪い">悪い<br>
あなたの年齢       
<select size="1" name="item3"> 
  <option value="年齢:10代未満">10代未満</option>
  <option value="年齢:10代">10代</option>
  <option value="年齢:20代">20代</option>
  <option value="年齢:30代">30代</option>
  <option value="年齢:40代">40代</option>
  <option value="年齢:50代">50代</option>
  <option value="年齢:60歳以上">60歳以上</option>
</select><br>
あなたの性別
<input type="radio" name="item4" value="性別:男" checked>男
<input type="radio" name="item4" value="性別:女">女     
<br>     
その他気が付いたことなどを教えてください<br>       
<textarea rows="4" name="body" cols="59"></textarea><br>     
あなたのメールアドレスをおしえてください<br>    
メールアドレス<input type="text" name="fromaddr" size="56"><br>     
<input type="submit" value="このボタンを押して送信してください">      
<input type="hidden" name="nextpage" value="/usr/あなたのID/abc/thanks.html">
</form> 
送信後に表示されるページ HTML文(abcフォルダに置いたthanks.html)
ご協力ありがとうございました。

ホームページに戻ります
<html><head></head>
<body>
ご協力ありがとうございました。<br><br>
<a href="/usr/あなたのID">ホームページに戻ります</a>
</body>
解説
今度は、アンケートメールの例です。
ドロップダウンメニューやラジオボタン等を使って、アンケート入力項目を作成しています。
ポイントになる点は、必ず項目ごとに value= を使って、具体的な文字列を入れているところです。
たとえば、このアンケートフォームでは、次のようなメールが到着します。
送信者 someone@anywhere.co.jp
宛 先 あなたのID@nas.ne.jp
題 名 ■アンケートメール
本 文 □1□内容:まあまあだった
□2□色:良い
□3□年齢:20代
□4□性別:男
ホームページ見ました。旅行のページなどはもう少し写真などが載っていると、状況がよくわかってよかったような気がします。 がんばってください!

いかがですか?ちょっとしたアンケートメールは、item番号項目をつかうことで作成できます。
item1 から item20 まで使えば、全部で最大20項目までのアンケートフォームを作成することができます。