サイト内検索: ナビゲーション リンクのスキップ

  昨日:6  本日:3  合計:80844


CSSを使ったメール送信フォーム

 ホームページを作成するにあたり、メール送信フォームぐらいは設置したいものです。 

 <mailto:infomation@xxx.co.jp>・・・ のようにタグを記載すれば、ユーザー側のメールソフトを起動させることはできますが、メールアドレスがむき出しになってしまいます。
 迷惑メール対策になりますし、デザイン的にもスマートですから、できればメール送信フォームの設置をおすすめします。

 このページでは、ASP.NET(VB)でCSS(カスケード スタイルシート)を使用したメール送信フォームサンプルをご紹介します。

 動作サンプル は、このホームページのお問い合わせフォームです。

■ デザインビュー

1.スタートメニューよりVWD2008を起動し、新しいWebサイトを作成します。(名前は何でも構いません。)

2.Default.aspxをデザインビューで開きます。
 「メール送信フォーム」と入力し、その部分を選択(沿って反転)し、ツールバー(印)のプルダウンメニューから[見出し 2 <h2>]を選択します。
※ツールバーが表示されてない場合は、上部メニューの[表示]から、[ツールバー]→[書式設定]にチェックをします。
 

3.任意の場所にカーソルをセットした後、上部メニューの[テーブル]→[テーブルの挿入]の順でクリックし、テーブルの挿入ウインドウを表示させます。
 サイズの行に「5」と入力、レイアウトの幅の指定に「500」と入力、「ピクセル」を選択、枠線の「隣接するセルの枠線を重ねて表示する」にチェックし、[OK]ボタンをクリックして5×2のテーブルを挿入します。
 

4.テーブルの5段目を反転選択し、右クリックをしてメニューを表示させ、[変更]→[セルの結合]の順でクリックしてセルを結合します。
 

5.下図は、4つ目のテキストボックスの設定例(右下のプロパティウインドウも切り取ってあります。具体的には「ID」にtextMessage、「Rows」に6、「TextMode」にMultiLine、「Colmuns」に40と入力)ですが、その他ボタンやラベルを下表のようにプロパティを設定して配置します。
 

オブジェクト プロパティ
TextBox(1つ目) (ID) textName
TextBox(2つ目) (ID) textEmail
TextBox(3つ目) (ID) textSubject
TextBox(4つ目) (ID) textMessage
Rows 6
TextMode MultiLine
Colmuns 40
Button(1つ目) (ID) btnSend
Text 送信
Button(2つ目) (ID) btnClear
Text clesr
Label (ID) lblState
Text なし(空白にする)

6.左側のツールボックスをスタイルの管理に切り替え(左下のタブ切り替え、または、上部メニューの表示から、[スタイルの管理]をクリック)て印の[新しいスタイル]をクリックしてウインドウを表示し、「セレクタ」に任意の名前を入力します。
※下図では、.style3(最初にドットをつけることは任意の名前を意味します)と入力しています。
「ブロック」の「vertical-align」をtop、「背景」の「background-color」に#EEEEEE、「枠線」の「borde-style」をsold、「borde-width」に1、「borde-color」にgrayとして、[適用]をクリックすると、CSSスタイルに追加されます。
※この時点ではまだスタイル設定しただけで、デザインには反映されません。
 

7.スタイルを反映させたいところを反転選択して、先に登録したstyle3の上で右クリックしてメニューを表示し、[スタイルの適用]をクリックして、スタイルをデザインに反映させます。
 

8.タグ(<body>や<h2>等)にスタイルを設定することもできます。
 [新しいスタイル]をクリックしてウインドウを表示し、「セレクタ」のプルダウンメニューから任意のタグを選択します。
 今回は、bodyを選択して、「フォント」の「font-family」を MS ゴシック,Courier New,monospace、「font-size」に 12 と入力し、[適用]をクリックします。
※タグに設定した場合は、この時点でデザインに反映されます。

■ Default.aspx

 下記は Default.aspx のソースサンプルです。
 ソースで記述したい場合は、Defaut.aspx をソースビューに切り替えて、<head>~</head>部分と、<body><form>・・・の<div>~</div>部分に下記のように書き足してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>メール送信フォーム</title>
  <style type="text/css">
    .style1 { width: 500px; border-collapse: collapse; }
    .style3 { border: 1px solid gray; background-color: #EEEEEE; vertical-align: top; }
    .Style2 { border: 1px solid gray; }
    body { font-family: "MS ゴシック", "Courier New", monospace; font-size: 12px; }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <h2>メール送信フォーム</h2>
  <p> ご意見、ご感想など、お気軽にどうぞ!!</p>
  <table class="style1">
   <tr>
    <td class="style3"> お名前:</td>
    <td class="Style2">
    <asp:TextBox runat="server" ID="textName" Width="230px"></asp:TextBox></td>
   </tr>
   <tr>
    <td class="style3"> Eメールアドレス:</td>
    <td class="Style2">
    <asp:TextBox runat="server" ID="textEmail" Width="230px"></asp:TextBox></td>
   </tr>
   <tr>
    <td class="style3"> 件名:</td>
    <td class="Style2">
    <asp:TextBox runat="server" ID="textSubject" Width="230px"></asp:TextBox></td>
   </tr>
   <tr>
    <td class="style3"> メッセージ:<br /> </td>
    <td class="Style2">
    <asp:TextBox runat="server" ID="textMessage" TextMode="MultiLine" Rows="6" Columns="40"></asp:TextBox> </td>
   </tr>
   <tr class="Style2">
    <td colspan="2">
    <asp:Button runat="server" ID="btnSend" Text="送信" />  
    &nbsp;<asp:Button runat="server" ID="btnClear" Text="clear" /></td>
   </tr>
  </table>
  <div><asp:Label runat="server" ID="lblState"></asp:Label></div>
  </div>
  </form>
</body>
</html>

■ Default.aspx.vb

 下記は Default.aspx.vb のソースサンプルです。
 Defaut.aspx.vb を開き、冒頭のImports・・・、Private変数、btnSend_Clickイベント、btnClear_Clickイベント部分に下記のように書き足してください。

 ※自分宛にメールが送信されるように、メールアドレス、メールサーバー部分を書き換えてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
Imports System
Imports System.Web
Imports System.Net.Mail

Partial Class _Default
  Inherits System.Web.UI.Page

  Private regex As New Regex("^[-_\.a-zA-Z0-9]+\@[-_\.a-zA-Z0-9]+$")

  Protected Sub btnSend_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSend.Click
    'エラーチェック
    If String.IsNullOrEmpty(textName.Text) Then
      lblState.ForeColor = Drawing.Color.Red
      lblState.Text =
"エラー: お名前を入力してください。"
      Exit Sub
    End If
    Dim chk As Match = regex.Match(textEmail.Text)
    If Not chk.Success Then
      lblState.ForeColor = Drawing.Color.Red
      lblState.Text =
"エラー: メールアドレスは半角英数字と@マークで入力してください。"
      Exit Sub
    End If
    If String.IsNullOrEmpty(textSubject.Text) Then
      lblState.ForeColor = Drawing.Color.Red
      lblState.Text =
"エラー: 件名を入力してください。"
      Exit Sub
    End If
    If String.IsNullOrEmpty(textMessage.Text) Then
      lblState.ForeColor = Drawing.Color.Red
      lblState.Text =
"エラー: メッセージを入力してください。"
      Exit Sub
    End If
    'メール送信
    Try
      Dim fromAdd As New MailAddress(textEmail.Text, textName.Text)
      '下記xxx@xxx.co.jpを自分のメールアドレスに書き換えてください。
      Dim toAdd As New MailAddress("xxx@xxx.co.jp")
      Dim msg As New MailMessage(fromAdd, toAdd)
      msg.Subject = textSubject.Text &
"(VWD2008 by Kenzo メールフォーム)"
      msg.Body =
"お名前 = " & textName.Text & vbLf & _
           
"送信時刻 = " & Now.ToString("yyyy/MM/dd HH:mm:ss") & vbCrLf & _
           
"Email = " & textEmail.Text & vbLf & _
           
"件名 = " & textSubject.Text & vbLf & _
           
"Message = " & textMessage.Text
      '下記mail.xxx.co.jpを自分の使用できるメールサーバーに書き換えてください。
      Dim smtp As New SmtpClient("mail.xxx.co.jp")
      smtp.Send(msg)
      lblState.ForeColor = Drawing.Color.Blue
      lblState.Text =
"上記内容で送信完了しました。"
    Catch ex As Exception
      lblState.ForeColor = Drawing.Color.Red
      lblState.Text =
"送信エラー: " & ex.Message
    End Try
  End Sub

   Protected Sub btnClear_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnClear.Click
    textName.Text = ""
    textEmail.Text =
""
    textSubject.Text =
""
    textMessage.Text =
""
  End Sub
End Class

[Ctrl]+[F5]キーを押すか、上部メニューから[デバッグ]→[デバッグなしで開始]を選択して実行し、メールが届くか確認してみましょう。


Copyright (C) 2009-2009 ケンゾー
初版:2009年4月17日、最終更新:2009年5月28日
http://www.xox.bz/