Introduction
A lot of times, we as a web master want to include a contact us form in our web site to gather sales questions from our site visitors. I can see that most of the people actually just include an email like sales@domainname in their Contact Us Page. I know that one works well if you just starting your site. However as your site is getting popular, you will notice that lots of spam email comes to your inbox and you probably has to spend hours and hours just to delete each of the spam email and also you might accidentally delete one of the legitimate email and thus you will lose your website sales.
So the workaround is to create a simple Contact Us Form with Captcha Image to prevent robot from sending spam to you and the result of the Contact Us Form will be sending email to you as a website owner, or you can save into database if you like to. I will show you code sample on sending email from your contact us form. For saving into database, you might need to check my other article on Basic ADO.NET.
Contact Us Form in ASP.NET 2 with Captcha
First, open Visual Studio 2005 and Add New Page called ContactUs.aspx
In the ASPX Page, please copy and paste the code below.
<FORM ID="form1" RUNAT="server">
<H2>Contact Us Form</H2>
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=80%>
<TR>
<TD>Full Name</TD>
<TD>:</TD>
<TD><ASP:TEXTBOX ID=txtName RUNAT=server></ASP:TEXTBOX></TD>
</TR>
<TR>
<TD>Email Address</TD>
<TD>:</TD>
<TD><ASP:TEXTBOX ID=txtEmail RUNAT=server></ASP:TEXTBOX></TD>
</TR>
<TR>
<TD>Subject </TD>
<TD>:</TD>
<TD><ASP:TEXTBOX ID=txtSubject RUNAT=server></ASP:TEXTBOX></TD>
</TR>
<TR>
<TD VALIGN=top>Body</TD>
<TD VALIGN=top>:</TD>
<TD><ASP:TEXTBOX ID=txtBody RUNAT=server TEXTMODE=multiLine ROWS=10 COLUMNS=50></ASP:TEXTBOX></TD>
</TR>
<TR>
<TD VALIGN=top>Verification Image</TD>
<TD VALIGN=top>:</TD>
<TD><IMG src="CaptchaImage.aspx" /></TD>
</TR>
<TR>
<TD COLSPAN=3><ASP:BUTTON ID=btnSubmit RUNAT=server TEXT="Submit" /></TD>
</TR>
</TABLE>
</FORM>
Add New Page Called CaptchaImage.aspx and paste the code below. If you don't understand what is CAPTCHA or don't understand on how the code below works. You probably need to refer to my
other Article in GDI + and Captcha. protected void Page_Load(object sender, EventArgs e)
{
Random Rand = new Random();int iNum = Rand.Next(10000, 99999);
Bitmap Bmp = new Bitmap(90, 50);
Graphics Gfx = Graphics.FromImage(Bmp);
Font Fnt = new Font("Verdana", 12, FontStyle.Bold);
Gfx.DrawString(iNum.ToString(), Fnt, Brushes.Yellow, 15, 15);// Create random numbers for the first line int RandY1 = Rand.Next(0, 50);int RandY2 = Rand.Next(0, 50);// Draw the first line Gfx.DrawLine(Pens.Yellow, 0, RandY1, 90, RandY2);// Create random numbers for the second lineRandY1 = Rand.Next(0, 50);
RandY2 = Rand.Next(0, 50);// Draw the second lineGfx.DrawLine(Pens.Yellow, 0, RandY1, 90, RandY2);
Bmp.Save(Response.OutputStream, ImageFormat.Gif);
Session["Number"] = iNum;
}
From the screenshot above, we can see that there is a CAPTCHA image shown, and we are storing the random generated Number into Session Variables. So that we can easily compare it from any other page in our web application. The Code Behind for the Contact Us Page will be like this.
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (Session["Number"].ToString().Trim() == txtNumber.Text)
{
MailMessage m = new MailMessage(txtEmail.Text, ConfigurationManager.AppSettings["SalesEmail"].Trim());
m.Subject = txtSubject.Text;
m.Body = txtBody.Text;
SmtpClient o = new SmtpClient("mail.domainname.com");
o.Send(m);
Response.Write("Email has been sent to our Sales Team");
}
else
{
Response.Write("Verification Email not match. Please re-enter");
}
}
That's all you need to build a simple Contact Us Form by using Captcha Image and SmtpMail to send email to you. You can see that if you fail to type the right verification image code, the image will be generated again and the email won't get sent.
If you need further info on how to send email in ASP.NET, please click
here.
Download Source Code