Intro To WebMatrix: Create a Contact Form Part 3 Adding E-Mail Support

This is the third in a series of posts on using the new ASP.NET WebMatrix tool. Today we are going to add automated E-Mail functionality. Again the Html Helpers make this a very easy task.

Continuing where I left off after adding the database insert functionality lets add the code to manage an automatic confirmation response and notification E-Mail mechanism. Just following the database code added in the last post I added a couple of string variables to hold the body of the messages. One message goes to the user to let them know their request was received. The other goes to a site administrator type to let them know they have some work to do ;). Notice the use of the string.Format function to perform a simple merge with the data submitted in the form?

//Send E-Mail Confirmations


var contactConfirm =

string

.Format(

"Thanks {0} {1} for contacting us. We will respond as soon as we can."

,
firstName, lastName);

var mewContact =

string

.Format(

"A new contact request has been made by {0} {1}, {2}. Please respond ASAP!! \r\n{3}"

,
firstName,
lastName,
email,
comment);

After creating the body of the E-Mail messages its time to send them. If you have ever done automated E-Mail from a .NET application of any kind the following code will be second nature. I am not going to cover the ins and outs of how sending E-Mail actually works here, I have covered how to send E-Mail in .NET several times over the years and it has not changed.

In particular, I encourage you to review the articles I wrote on using Neptune SMTP server as a local SMTP server to test against. Because I am using Neptune I set the SmtpServer property to localhost. If you are trying to test against a non-local SMTP server please make sure you set this property to the address of your test SMTP server.

Next set the port, by default SMTP is port 25. If you have read the documentation that came with my version of WebMatrix it says the port number of 587. That is absolutely wrong. While it could be that is not the default well known port for SMTP.

Continue setting other properties as you need. You will need a from address for the message to originate. The final step is to send the messages. Here you will notice the use of dynamic parameters, a new feature to C# 4.0. If you have worked in JavaScript this will look very familiar to you. Here you can define a series of comma separated parameters and their corresponding values. Since each message has a unique destination, subject and body they are all set in the Send function.

// Initialize Mail helper


Mail.SmtpServer =

"localhost"

;
Mail.SmtpPort = 25;
Mail.EnableSsl =

false

;
Mail.UserName =

"clove"

;
Mail.From =

"info@test.com"

;
Mail.Password =

"pass@word"

;

// Send confirmation email


Mail.Send(to: email,
subject:

"Contact Request"

,
body: contactConfirm
);

// Send alert email


Mail.Send(to:

"test@test.com"

,
subject:

"Contact Request"

,
body: mewContact
);

Now when the form is submitted it now adds a record to the database followed by sending a couple of notification E-Mails. Here is the entire page's code and markup so you can see how it all fits together:

@{

var contact = new Contact();

if(IsPost){

contact.FirstName = Server.HtmlEncode(Request["FirstName"]);
contact.LastName = Server.HtmlEncode(Request["LastName"]);
contact.EMail = Server.HtmlEncode(Request["email"]);
contact.Coment = Server.HtmlEncode(Request["comment"]);

var db = Database.Open("Simple Contact");
db.Execute("INSERT INTO Contact (
FirstName, LastName, email, Coment) VALUES (@0, @1, @2, @3)",
contact.FirstName,
contact.LastName,
contact.EMail,
contact.Coment
);

//Send E-Mail Confirmations
var contactConfirm = string.Format(
"Thanks {0} {1} for contacting us. We will respond as soon as we can.",
contact.FirstName, contact.LastName);

var mewContact = string.Format(
"A new contact request has been made by {0} {1}, {2}. Please respond ASAP!! \r\n{3}",
contact.FirstName,
contact.LastName,
contact.EMail,
contact.Coment);

// Initialize Mail helper
Mail.SmtpServer = "localhost";
Mail.SmtpPort = 25;
Mail.EnableSsl = false;
Mail.UserName = "clove";
Mail.From = "info@test.com";
Mail.Password = "pass@word";

// Send confirmation email
Mail.Send(to: contact.EMail,
subject: "Contact Request",
body: contactConfirm
);

// Send alert email
Mail.Send(to: "test@test.com",
subject: "Contact Request",
body: mewContact
);

}
}

<!

DOCTYPE

html

>


<

html

>


<

head

>


<

title

>

Simple Contact Form With WebMatrix

</

title

>


<

link

href

="css/print.css"

rel

="stylesheet"


type

="text/css"

media

="print"

/>


<

link

href

="css/screen.css"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


<

link

href

="css/ie.css"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


<

link

href

="css/main.css"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


</

head

>


<

body

>



<

form

method

="post"

>


<

fieldset

class

="span-12"

>


<

legend

>

Simple Contact

</

legend

>


@if(!IsPost){

<

ul

>


<

li

><

label

for

="FirstName"

>

First Name:

</

label

>


<

input

id

="FirstName"

name

="FirstName"

/></

li

>


<

li

><

label

for

="LastName"

>

Last Name:

</

label

>


<

input

id

="LastName"

name

="LastName"

/></

li

>


<

li

><

label

for

="email"

>

E-Mail:

</

label

>


<

input

id

="email"

name

="email"

/></

li

>


<

li

><

label

for

="Comment"

>

Comment:

</

label

>


<

textarea

id

="Comment"

name

="Comment"

></

textarea

></

li

>


<

li

><

button

id

="btnComment"

>

Submit

</

button

></

li

>


</

ul

>


}else{

<

p

>

Thanks @contact.FirstName; @contact.LastName; for your comment

</

p

>


<

p

>

@contact.Coment;

</

p

>


}

</

fieldset

>


</

form

>


</

body

>


<

script

src

="js/jquery-1.4.2.min.js"

type

="text/javascript"

></

script

>


</

html

>



Tomorrow I will a master page to the site and apply it to the contact form.

Share This Article With Your Friends!