フォームメールの設置方法
基本的なフォームメール
- フォームメール(デコードメール)とは、お客さまのホームページ上からお客さまのメールアドレスにメールを送信することができる機能です。アンケートページなどに使用することができます。
- この仕組みで配送されるメールの差出人欄は、お客さまのメールアドレス自身になります。
- エディオンネット以外のメールアドレスにフォームメールを送ることはできません。
<html>
<head>
<title> アンケートページ </title>
</head>
<body>
<form method="POST" action="/cgi-bin/mail? sample@do3.enjoy.ne.jp ">
<input type="hidden" name="subject" value="Comment Page">
<input type="hidden" name="from-name" value="Comment Page Visitor">
<input type="hidden" name="next-url" value=" http://ww4.enjoy.ne.jp/~sample/ ">
こちらへコメントをどうぞ。(必須) <br>
<textarea name="require:comment" rows="5" cols="60"></textarea><p>
E-Mail Addressをお持ちのかたは、こちらへご記入下さい。 <br>
<input type="text" name="email" size="60"><p>
書き終わりましたら、送信のボタンを押して下さい。 <br>
<input type="submit" value="送信">
<input type="reset" value="内容をクリア">
</form>
</body>
</html>
Webブラウザで表示を確認すると以下のようになります。
E-Mail Addressをお持ちのかたは、こちらへご記入下さい。
書き終わりましたら、送信のボタンを押して下さい。
内容を入力し送信ボタンをクリックすると以下の内容のメールがお客さまのメールアドレスに送信されます。
送信者:Comment Page Visitor 件名:Comment Page
(subject) Comment Page
(from-name) Comment Page Visitor
(comment) とても良いホームページですね。
(email) xxxxx@example.ne.jp
パラメーターの設定
<form method="POST" action=" /cgi-bin/mail? sample@do3.enjoy.ne.jp">
- 赤字の部分は大文字と小文字が認識されますので正しく入力してください。
- sample@do3.enjoy.ne.jpの部分はお客様のメールアドレスに変更してください。
<input type="hidden" name="subject" value="Comment Page">
- subjectは件名を意味します。Comment Pageの部分をお客様の好きな件名に修正してください。
- 日本語は使用できません。必ず半角英数字にしてください。
<input type="hidden" name="from-name" value=" Comment Page Visitor ">
- from-nameは送信者を意味します。Comment Page Visitorの部分をお客様のお名前(ニックネーム等)に修正してください。
- 日本語は使用できません。必ず半角英数字にしてください。
<input type="hidden" name="next-url" value=" http://ww?.enjoy.ne.jp/~sample/ ">
- next-urlは正しく送信された場合に表示されるページを指定します。
- http://ww?.enjoy.ne.jp/~sample/の部分をお客様のページのURLに修正してください。
- この行を省略した場合は以下のページが表示されます。
www.enjoy.ne.jp Email Sent
The following message has been sent.
Reply-to: sample@do3.enjoy.ne.jp (Comment Page Visitor)
From: sample@do3.enjoy.ne.jp (Comment Page Visitor)
To: sample@do3.enjoy.ne.jp
Subject: Comment Page
(subject) Comment Page
(from-name) Comment Page Visitor
(comment) とても良いホームページですね。
(email) xxxxx@example.ne.jp
name=" require: comment"
nameパラメータの前にrequire:をつけることによってその項目を入力必須項目にすることができます。
より高度なフォームメール
フォームのオブジェクトに『ラジオボタン』や『チェックボックス』『リストメニュー』を使用することによってより高度なフォームメール画面をつくることができます。
<html>
<head>
<title>アンケートページ</title>
</head>
<body>
<form method="POST" action="/cgi-bin/mail?deo-taro@do3.enjoy.ne.jp">
<input type="hidden" name="subject" value="Comment Page">
<input type="hidden" name="from-name" value="Comment Page Visitor">
<input type="hidden" name="next-url" value="http://ww4.enjoy.ne.jp/~deo-taro/">
<p>お名前:<input type="text" name="require:name" size="50"></p>
<p>性別:
<input type="radio"name="seibetsu"value="man">男、
<input type="radio"name="seibetsu"value="woman">女</p>
<p>E-Mail:<input type="text"name="require:email" size="50"></p>
<p>ご職業:
<select name="work">
<option value="kaisyain">会社員</option>
<option value="koumuin">公務員</option>
<option value="jieigyou">自営業</option>
<option value="syufu">主婦</option>
<option value="musyoku">無職</option>
<option value="gakusei">学生</option>
<option value="other">その他</option>
</select>
</p>
<p>コメント:<textarea name="textarea" cols="50" rows="5"></textarea></p>
<p>
<input type="submit" name="submit" value="送信する">
<input type="reset" name="reset" value="リセット">
</p>
</form>
</body>
</html>
Webブラウザで表示を確認すると以下のようになります。
お名前:
性別: 男、 女
E-Mail:
ご職業:
コメント:
タグについて
<input type= "text" name= "require:name" size= "50" >
< input type ="text" ★>は1行の入力フォールドを作る基本タグです。
★部分には name ="フィールド名"、 size ="文字数"などが入ります。
上記の例ではフィールド名にrequire:をつけて必須項目にしています。
<input type= "radio" name= "seibetsu" value= "man" > 男、
< input type ="radio" ★>は単独選択用の丸形ボタンを作るタグです。
★部分には name ="フィールド名"、 value ="サーバーへ送られる文字"、checkedなどが入ります。上記の例では、選択されていると"man"という情報がサーバーに送られます。
checkedが入っているとデフォルトで選択された状態になります。
その他の選択ボタンとして< input type ="checkbox" ★>があります。
主に選択肢の複数選択時に使用されます。★部分は"radio"と同じです。
<select name= "work" ><option value = "kaisyain" > 会社員 </option> ~ </select>
<select name="★"><option value="☆">~</option>< /select>はプルダウン形式の選択欄を作るタグです。
★部分にはフィールド名が入ります。
☆部分にはサーバーへ送られる文字が入ります。
~部分にはプルダウンメニューに表示される文字が入ります。
上記の例ではプルダウンメニューで会社員が選択されていると"kaisyain"という情報がサーバーに送られます。
<textarea name="textarea"cols="50" rows="5"></textarea>
<textarea name ="★" ☆>~</textarea>は複数行の入力フォールドを作るタグです。
★部分にはフィールド名が入ります。
☆部分には縦幅を表す属性rows="行数"、横幅を表す属性cols="文字数"が入ります。
~にはあらかじめテキストエリア内に表示される文字列が入ります。
上記の例では縦幅5文字分・横幅50文字分の何も入っていないテキストエリアになります。