In this article I am explaining how to create a Contact Us Form with HTML Rich Text Editor to send HTML emails in ASP.Net. I’ll also explain also provide FileUpload Control in order that the users can attach the related documents along with emails.
To start with I have created a simple form with some fields that the user has to input.
<table border = "0" style="width: 409px">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Name*"></asp:Label><br />
</td>
<td>
<asp:TextBox ID="txtName" runat="server" ValidationGroup = "contact"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
ControlToValidate = "txtName"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Subject*"></asp:Label><br />
</td>
<td>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
ControlToValidate = "txtSubject"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label3" runat="server" Text="Email*"></asp:Label><br />
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:RegularExpressionValidator id="valRegEx" runat="server"
ControlToValidate="txtEmail"
ValidationExpression=".*@.*\..*"
ErrorMessage="*Invalid Email address."
display="dynamic">
</asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="*"
ControlToValidate = "txtEmail"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td valign = "top" >
<asp:Label ID="Label4" runat="server" Text="Body*"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtBody" runat="server" TextMode = "MultiLine" ></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="*"
ControlToValidate = "txtBody"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:FileUpload ID="FileUpload1" runat="server" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSend_Click" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Label ID="lblMessage" runat="server" Text="" ForeColor = "Green"></asp:Label>
</td>
</tr>
</table>
As you can notice it has Name, Email, Subject, Body and Attachment fields. I have added the necessary validators. Also there’s a send button which when clicked the Email is sent to the recipient.
The form that we created just now will look as below
As you can see there’s a Tiny MCE Rich TextBox besides the Body Label. If you need to know more about adding the Tiny MCE Rich TextBox in ASP.Net Web Page read my article Using Tiny MCE Rich TextBox in ASP.Net
You will need to import the following namespaces..
C#
using System.Net;
using System.Net.Mail;
VB.Net
Imports System.Net
Imports System.Net.Mail
On the click event on the Send button I have placed the following code.
C#
protected void btnSend_Click(object sender, EventArgs e)
{
MailMessage mm = new MailMessage("sender@gmail.com", "receiver@gmail.com");
mm.Subject = txtSubject.Text;
mm.Body = "Name: " + txtName.Text + "<br /><br />Email: " + txtEmail.Text + "<br />" + txtBody.Text;
if (FileUpload1.HasFile)
{
string FileName = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName) ;
mm.Attachments.Add(new Attachment(FileUpload1.PostedFile.InputStream, FileName));
}
mm.IsBodyHtml = true;
SmtpClient smtp = new SmtpClient();
smtp.Host = "smtp.gmail.com";
smtp.EnableSsl = true;
System.Net.NetworkCredential NetworkCred = new System.Net.NetworkCredential();
NetworkCred.UserName = "sender@gmail.com";
NetworkCred.Password = "xxxxx";
smtp.UseDefaultCredentials = true;
smtp.Credentials = NetworkCred;
smtp.Port = 587;
smtp.Send(mm);
lblMessage.Text = "Email Sent SucessFully.";
}
VB.Net
Protected Sub btnSend_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim mm As New MailMessage("sender@gmail.com", "receiver@gmail.com")
mm.Subject = txtSubject.Text
mm.Body = "Name: " & txtName.Text & "<br /><br />Email: " & txtEmail.Text & "<br />" & txtBody.Text
If FileUpload1.HasFile Then
Dim FileName As String = System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName)
mm.Attachments.Add(New Attachment(FileUpload1.PostedFile.InputStream, FileName))
End If
mm.IsBodyHtml = True
Dim smtp As New SmtpClient()
smtp.Host = "smtp.gmail.com"
smtp.EnableSsl = True
Dim NetworkCred As New System.Net.NetworkCredential()
NetworkCred.UserName = "sender@gmail.com"
NetworkCred.Password = "xxxxx"
smtp.UseDefaultCredentials = True
smtp.Credentials = NetworkCred
smtp.Port = 587
smtp.Send(mm)
lblMessage.Text = "Email Sent SucessFully."
End Sub
As you will notice above I am setting the respective fields of the mailmessage object and then if file is uploaded through ASP.Net FileUpload control I am adding the uploaded file as attacgment to the mailmessage object. Also make sure you give name to attachments else the default name will be applied to the attachment.
Note: I am using GMAIL SMTP Server to demonstrate the above example to send emails. GMAIL host server is smtp.gmail.com, its port no is 587 and it uses SSL hence SSL needs to be set to true. These settings are specifically for GMAIL Server and will not work with other SMTP Servers
In order to use the contact form you will need to have two email accounts
1. That will be used to send the emails on behalf of the users that use the contact us page. (Sender’s email address)
2. That will receive the emails that are send through the contact us form. (Recipient’s email address)
The figure below displays the Rich Text Email with attachment send from our Contact Us form.
You might get the following error when you use this sample.
A potentially dangerous Request.Form value was detected from the client
For solution refer the following article
A potentially dangerous Request.Form value was detected from the client
With this the article comes to an end. Hope you liked it. Download the related source code in C# and VB.Net using the link below.
Make sure you replace the sender’s email address with a valid Gmail email address along with password and recipient’s email address with any valid email address before using it.
ContactUsForm.zip (619.94 kb)