XHTML/CSS・トップ | JavaScript&CSS・目次

●セキュアでカラフルなメール送信フォーム

 JavaScriptとCSSのスタイルシートを組み合わせたメールフォームの作り方ですが、CGI環境が必要です。ここではプロバイダが用意するCGIを使った方法で解説しています。誰もがセキュアでフォーム部品をカラフルにできるようにしました。

 セキュアとは具体的には、1行テキストボックス、複数行のテキストボックスへの空入力に対して、JavaScript で入力を促すことですが、必要以上の警告を与えてはなんのために送信フォームを設置するのか意味がなくなってしまいます。必要がなければ最低限にしておきましょう。

 また、多少の知識は必要ですが、フォーム部品のデザインのカスタマイズも自由にできます。入力フィールドの背景色(画像も可)、フォント色、フォントサイズ、枠(border)などを含め、詳細にレイアウトすることもできます。動作、レイアウト確認は、筆者の環境において、Windows版 IE(Ver.6.0)とNetscape(Ver.7.1)です。(確認はしていませんが、他ブラウザでも大丈夫だと思います。)

■シンプルメール送信フォーム(サンプル)↓

送信者のお名前(ハンドルネーム可)

送信内容(メッセージ)

   

※必要最低限のサンプル品です。プロバイダ環境のときは、すべて入力し、送信ボタンをクリックすると本当に送信されましたが、レンタルサーバへ移行しましたので現在は送信されません。空入力に対しての警告ダイアログボックスは表示されますのでクリックしてみてください。

■ HTML文書にコピー&ペースト↓

<script type="text/javascript">
<!--
function opinion(){
 if(document.user.1-1.value==""){
 alert("名前を入れてください。");
 return false;
}
 if(document.user.2-2.value==""){
 alert("本文が未入力です。");
 return false;
}
 return true;
}
// -->
</script>
<style type="text/css">
<!--
.sample1 {
 color: #390000;
 background: #ffffcd;
 font-size: 0.8em;
}
.sample2 {
 font-family: "HG丸ゴシックM-PRO";
 color: #ffffff;
 font-size: 0.6em;
 border: outset 4px #c0c0c0;
 background: #a24906;
}
textarea {
 color: #800000;
 background: #b0ffff;
 border: inset 8px #ff0000;
 font-size: 0.7em;
 scrollbar-base-color: #000000;
}
-->
</style>

※アラームとしてのメッセージ内容は任意に変更してください。

■↑解説↓

 <head>〜</head>の間にある<title>〜</title>の下へペーストしてください。位置がわからない場合はブラウザ・メニューバーの「表示」をクリックし、プルダウンメニューから「ソース」または「ページ ソース」をクリックし、位置を確認してください。(ソースは多少違いますが)

 注意する点としては、CSSのソース(<style>〜</style>)の真ん中がインデントされていますが、HTML文書に貼り付けると、作成ソフトによっては、インデントが動いてしまうことがあります。その結果、スタイルが反映されないことがあります。インデントは半角スペース二つ分です。(上手くいかないときは確認してみてください。)

 functionの後に続く、opinion(下のソース含め、計二個所使用)は筆者が任意で付けたものです。opinionはJavaScriptにおいて、関数名と言われるもので、作者が条件付きですが、任意に付けられます。使用可能な文字はJavaScriptで使われるキーワードや予約語を除く半角英字です。数字も使えますが、先頭には使えません。また、記号はアンダーバー( _ )が使えます。なお、半角英字の大文字・小文字は問いませんが、区別はされます。

※関数名と同様に任意で付けられる名前としては変数などほかにもあります。

■ページの任意の場所へコピー&ペーストする。↓

※<body>〜</body>の間の任意の場所へ以下をペーストしてください。

<form action="○○○" method="post" name="user" onsubmit="return opinion()">
<input type="hidden" name="3-3" value="受信先のメールアドレス">
<p>送信者のお名前(ハンドルネーム可)<br>
<input type="text" name="1-1" size="30" class="sample1"></p>
<p>送信内容(メッセージ)<br>
<textarea name="2-2" rows="10" cols="40"></textarea></p>
<p>   <input type="submit" value="送信" class="sample2"> <input type="reset" value="リセット" class="sample2"></p>
</form>

■↑解説↓

 form要素の開始タグ(<form 〜)は通常、 <form method="post"action="cgiプログラムへのURL">となっています。"cgiプログラムへのURL"はプロバイダで決まっていますので、それをそのまま貼り付けてください。そして name="user" onsubmit="return opinion()"を加えて、<form action="cgiプログラムへのURL"" method="post" name="user" onsubmit="return opinion()">としてください。 name="user"とフォーム(form)の名前に「user」を付けていますが、もし、名前が付いている場合はそれをお使いください。付いていない場合は、作者が任意に付けられます。使える文字は関数名のときと同じです。「user」を変更する場合は、ソースで使用している「user」をすべて変更してください。

 1-1、2-2、3-3はプロバイダで指定されているフォームの部品名に変更してください。部品名とは具体的には、各フォーム部品のタグ内に記載されているname="○△□"の○△□のことです。メールアドレスの入力欄、名前入力欄、件名、送信内容(メッセージ)などのフォーム部品にはそれぞれ名前が付いています。プロバイダが指定する文字を正確に使用しないと、エラーと表示されるか、エラーがなくても受信したときに正確に表示されない可能性があります。(契約しているプロバイダのメール送信フォームの解説を併せてご参照ください。)

 次に<input type="hidden" name="3-3" value="受信先のメールアドレス">とありますが、type="hidden"の意味はページに表示されないように隠し表示にしています。受信先のメールアドレスとはプロバイダと契約しているメールアドレスのことです。フリーメールや任意のメールアドレスは指定できません。

 そのほか、input 要素の中にある size="30" は1行テキストボックスの横幅のことです。textarea 要素にあるrows="10" cols="40"は複数行のテキストボックスの縦幅と横幅のことで、必ず指定する必要があります。数字はそれぞれ自分のホームページに合うように調整してください。

 プロバイダによっては、送信内容(メッセージ)の形式が複数行テキストボックスではなく、1行テキストボックスの場合があります。その場合、ほかの1行テキストボックスと同じように指定するか、または、nameに付いている名前をtextareaの名前として利用する方法もあります。試してみてください。

 そのほか、送信ボタンのみでリセットボタンまで指定していないプロバイダもありますが、上記のソースをそのまま貼り付ければリセットボタンが作れます。

■総括↓

 それぞれコピー&ペーストして、プロバイダの環境に合うように変更しましたら、取りあえず、動作を確認しましょう。Win XPのIEでSP2を適用されている方はブラウザを立ち上げたときに、警告のダイアログボックスが表示されるはずです。ブラウザ上部の情報バーにポイントした後、右クリックして「ブロックされているコンテンツを許可」を選択し、そのまま実行してください。これは自分のパソコン上のことで、サイトへHTMLファイルをアップロードするか、または、ほかのブラウザ利用ならば警告は表示されません。

 メッセージそのものはCGI環境がないので送信されませんが、JavaScriptによるアラーム(警告)の動作は自分のパソコン上で確認することができます。

■スタイルシートの解説と変更について↓

※実際に、アップロードするときはFTPツールを使って、試験的にサイト上に設置して動作を確認してからリンクを貼り、正式に公開すると良いでしょう。リンクでつながっていなくてもURLでアクセスすることは可能です。以下に、スタイルシートのソース部分を再度アップして解説します。

<style type="text/css">
<!--
.sample1 {
 color: #390000;
 background: #ffffcd;
 font-size: 0.8em;
}
.sample2 {
 font-family: "HG丸ゴシックM-PRO";
 color: #ffffff;
 font-size: 0.6em;
 border: outset 4px #c0c0c0;
 background: #a24906;
}
textarea {
 color: #800000;
 background: #b0ffff;
 border: inset 8px #ff0000;
 font-size: 0.7em;
 scrollbar-base-color: #000000;
}
-->
</style>

 sampleはクラス名と言われるものです。詳細にレイアウトできるように、ひとつひとつのフォーム部品にこのクラス名を使って、スタイルを指定しています。クラス名以外の指定方法もありますが、ここではクラス名を使い個別に指定する方法で解説します。sampleの前にはドット( . )が付いていることに注意してください。クラス名の使い方については関連ページを参照にしてください。

 backgroundは背景色(背景画像も可)を指定するプロパティです。colorはフォントの色を font-sizeはフォントの大きさをborderは周りの枠線関連のデザインをまとめて指定するプロパティです。また、font-familyはフォント名を指定するプロパティです。

 scrollbar-base-colorはスクロールバーに色を付けるプロパティです。色に#000000(黒)を指定しています。ただし、Win IE(古いバージョン除く)のブラウザのみ有効です。必要がなければscrollbar-base-color: #000000;"を取り払ってください。CSSのプロパティは自由に変更することができますので、CSSのプロパティの使い方についてはリンク先の関連ページをご参照ください。

 また、単位にem(エム)を使っていますが、そのほかの単位も使えます。長さを表す単位付きの数値ですが、パーセンテージ(〜%)も使えます。それぞれの値を変更し、調整してみてください。また、sampleはクラス名ですが、任意でそのほかの文字に変更できます。使える文字は半角英数字となります。(小文字が望ましい)そのほかも含め、詳細と応用についてはスタイルシートのコーナーを参照にしてください。

■関連ページ↓

■より詳細なメール送信フォームを作る↓

<script type="text/javascript">
<!--
function opinion(){
 if(document.user.1-1.value==""){
 alert("メールアドレスが未入力です。");
 return false;
}
 if(document.user.2-2.value==""){
 alert("名前を入れてください。");
 return false;
}
 if(document.user.3-3.value==""){
 alert("件名を入れてください。");
 return false;
}
 if(document.user.4-4.value==""){
 alert("本文が未入力です。");
 return false;
}
 return true;
}
// -->
</script>
<style type="text/css">
<!--
.sample1 {
 font-family: "Times New Roman";
 color: #390000;
 background: #e2ffc2;
 border: double 4px #f1ffff;
 font-size: 0.7em;
}
.sample2 {
 color: #390000;
 background: #ffffcd;
 font-size: 0.8em;
}
.sample3 {
 color: #390000;
 background: #ff71ff;
 font-size: 0.8em;
}
.sample4 {
 font-family: "HG丸ゴシックM-PRO";
 color: #ffffff;
 font-size: 0.6em;
 border: outset 4px #c0c0c0;
 background: #a24906;
}
textarea {
 color: #800000;
 background: #b0ffff;
 border: inset 8px #ff0000;
 font-size: 0.7em;
 scrollbar-base-color: #000000;
}
-->
</style>

「高度なメール送信フォーム」(←クリックすると別ウィンドウで表示されます。)

<form action="cgiを呼び出すためのURL" method="post" name="user" onsubmit="return opinion()">
<input type="hidden" name="5-5" value="受け取るためのメールアドレス">
<p>送信者(差出人)のメールアドレス<br>
<input type="text" name="1-1" size="35" class="sample1"></p>
<p>送信者のお名前<br>
<input type="text" name="2-2" size="30" class="sample2"></p>
<p>件名<br>
<input type="text" name="3-3" size="30" class="sample3"></p>
<p>送信内容(メッセージ)<br>
<textarea name="4-4" rows="10" cols="40"></textarea></p>
<p>   <input type="submit" value="送信" class="sample4"> <input type="reset" value="取消" class="sample4"></p>
</form>

■補足↓

 1-1、2-2、3-3、4-4、5-5は必ず、プロバイダ指定の文字(名前)に置き換えてください。なお、名前はすべて英字、または英数字で表されています。

■簡単なデザインのメール送信フォームを作る↓

<script type="text/javascript">
<!--
function opinion(){
 if(document.user.1-1.value==""){
 alert("名前を入れてください。");
 return false;
}
 if(document.user.2-2.value==""){
 alert("本文が未入力です。");
 return false;
}
 return true;
}
// -->
</script>
<style type="text/css">
<!--
input, textarea {
 font-size: 0.7em;
}
-->
</style>

<form action="○○○" method="post" name="user" onsubmit="return opinion()">
<input type="hidden" name="3-3" value="受信先のメールアドレス">
<p>送信者のお名前(ハンドルネーム可)<br>
<input type="text" name="1-1" size="30"></p>
<p>送信内容(メッセージ)<br>
<textarea name="2-2" rows="10" cols="40"></textarea></p>
<p>   <input type="submit" value="送信"> <input type="reset" value="リセット"</p>
</form>

 ↑もっとも簡単なデザインのメール送信フォームです。1行テキストボックス、複数行テキストボックス、ボタンすべてに0.7emの同じフォントサイズだけを指定しています。

XHTML/CSS・目次 | JavaScript&CSS・目次

Copyright (C) 2005-2007 http://www.xml.vc/