In this article I will explain with an example, how to create a
Contact Us Form with
HTML RichTextEditor in
ASP.Net using C# and VB.Net.
Mail Server Settings in Web.Config file
The following
Mail Server settings need to be saved in the
Web.Config file.
Note: It is necessary to use the sender’s email address credentials while defining the
Gmail SMTP Server Credentials as
Gmail the sender’s email address must be same as the
Gmail Username specified in credentials.
<system.net>
<mailSettings>
<smtp deliveryMethod="Network" from="sender@gmail.com">
<network
host="smtp.gmail.com"
port="587"
enableSsl="true"
userName="sender@gmail.com"
password="SenderGmailPassword"
defaultCredentials="true"/>
</smtp>
</mailSettings>
</system.net>
HTML Markup
The following
HTML Markup consists of:
TextBox – For capturing the values of Name, Subject, Email address and Body.
CustomValidator – For validating if Body
Multiline TextBox has content or not.
Events
ClientValidationFunction – For calling
ValidateTinyMCE JavaScript function.
FileUpload – For attaching file as attachment to the email.
Button – For sending email.
The Button has been assigned with an OnClick event handler.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Name:</td>
<td>
<asp:TextBox ID="txtName" runat="server" /></td>
<td>
<asp:RequiredFieldValidator ID="rfvName" runat="server" ErrorMessage="required" ControlToValidate="txtName" />
</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<asp:TextBox ID="txtSubject" runat="server"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="rfvSubject" runat="server" ErrorMessage="required"
ControlToValidate="txtSubject" />
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
<td>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ControlToValidate="txtEmail"
ValidationExpression= ".*@.*\..*" ErrorMessage="*Invalid Email address." Display="dynamic" />
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ErrorMessage="required"
ControlToValidate="txtEmail" />
</td>
</tr>
<tr>
<td valign="top">Body:</td>
<td>
<asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" /></td>
<td valign="top">
<asp:CustomValidator ID="cvBody" ClientValidationFunction="ValidateTinyMCE"
runat="server" ErrorMessage="required"></asp:CustomValidator>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:FileUpload ID="fuAttachment" runat="server" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSend" runat="server" Text="Send" OnClick="Send" /></td>
<td></td>
</tr>
</table>
Applying the TinyMCE Plugin to the Multiline TextBox
TinyMCE plugin implementation
Inside the
HTML, the following
TinyMCE JS file is inherited.
1. tinymce.min.js
Inside the
Init event handler of the
TinyMCE plugin, the plugin is applied to the
TextArea element i.e.
Multiline TextBox.
Note: The
ASP.Net Multiline TextBox is rendered as
TextArea element in
HTML, hence the
TinyMCE plugin has been applied to
TextArea element.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.0.20/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({ selector:'textarea', width: 300 });
</script>
Validating the TinyMCE TextBox
When
Send button is clicked, the
ValidateTinyMCE JavaScript function of the CustomValidator is called.
<script type="text/javascript">
function ValidateTinyMCE(sender, args) {
var isValid = true;
var txtBody = tinyMCE.get('<%= txtBody.ClientID%>');
if (txtBody.getContent() == "") {
isValid = false;
}
else {
//Check for space tag.
if (txtBody.getContent() == "<p> </p>") {
//Clear TinyMCE.
txtBody.execCommand('mceSetContent', false, "");
isValid = false;
}
}
args.IsValid = isValid;
}
</script>
Namespaces
You will need to import the following namespaces.
C#
using System.Net;
using System.Net.Mail;
using System.IO;
using System.Configuration;
using System.Net.Configuration;
VB.Net
Imports System.Net
Imports System.Net.Mail
Imports System.IO
Imports System.Configuration
Imports System.Net.Configuration
Sending Email using Gmail SMTP
MailMessage class properties
Following are the required properties of the MailMessage class.
From – Sender’s email address.
To – Recipient(s) Email Address.
CC – Carbon Copies. (If any)
BCC – Blind Carbon Copies. (If any)
Subject – Subject of the Email.
Body – Body of the Email.
IsBodyHtml – Specify whether body contains text or
HTML mark up.
Attachments – Attachments. (If any)
ReplyTo – ReplyTo Email address.
SMTP class properties
Following are the properties of the SMTP class.
Host – SMTP Server URL. (Gmail: smtp.gmail.com)
EnableSsl – Specify whether your host accepts SSL Connections. (Gmail: True)
UseDefaultCredentials – Set to True in order to allow authentication based on the Credentials of the Account used to send emails.
Credentials – Valid login credentials for the SMTP server. (Gmail: email address and password)
Port – Port Number of the SMTP server. (Gmail: 587)
Sending Contact Us Form details in Mail
When the
Send Button is clicked, the Sender’s email address (from) is fetched from the SMTP section of the
Web.Config file, the values of Name, Subject,
Email and Body are fetched from their respective
TextBoxes and all these values are set into an object of the
MailMessage class.
Attaching File
The
FileUpload is checked for Attachment and if it has File then the posted File is added as Attachment to the
MailMessage object.
Sending Email
Then, an object of the
SmtpClient class is created and the values of
Host,
Port,
DefaultCredentials,
EnableSsl,
Username and
Password are fetched from the
SMTP section of the
Web.Config file and are set in respective properties of the
SmtpClient class object.
Finally, the email is being sent using the
Send function of the
SmtpClient class object and a success message is displayed in
JavaScript Alert Message Box using
RegisterStartupScript method.
C#
protected void Send(object sender, EventArgs e)
{
SmtpSection smtpSection = (SmtpSection)ConfigurationManager.GetSection("system.net/mailSettings/smtp");
using (MailMessage mm = new MailMessage(smtpSection.From, "recipient@aspsnippets.com"))
{
mm.Subject = txtSubject.Text.Trim();
mm.Body = "Name: " + txtName.Text + "Email: " + txtEmail.Text + "<br />" + txtBody.Text;
mm.IsBodyHtml = true;
if (fuAttachment.HasFile)
{
string fileName = Path.GetFileName(fuAttachment.PostedFile.FileName);
mm.Attachments.Add(new Attachment(fuAttachment.PostedFile.InputStream, fileName));
}
using (SmtpClient smtp = new SmtpClient())
{
smtp.Host = smtpSection.Network.Host;
smtp.EnableSsl = smtpSection.Network.EnableSsl;
NetworkCredential networkCred = new NetworkCredential(smtpSection.Network.UserName, smtpSection.Network.Password);
smtp.UseDefaultCredentials = smtpSection.Network.DefaultCredentials;
smtp.Credentials = networkCred;
smtp.Port = smtpSection.Network.Port;
smtp.Send(mm);
}
}
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Email sent.');", true);
}
VB.Net
Protected Sub Send(ByVal sender As Object, ByVal e As EventArgs)
Dim smtpSection As SmtpSection = CType(ConfigurationManager.GetSection("system.net/mailSettings/smtp"), SmtpSection)
Dim mm As MailMessage = New MailMessage(smtpSection.From,"recipient@aspsnippets.com")
mm.Subject = txtSubject.Text.Trim
mm.Body = "Name: " & txtName.Text & "<br /><br />Email: " & txtEmail.Text & "<br />" & txtBody.Text
mm.IsBodyHtml = True
If fuAttachment.HasFile Then
Dim fileName As String = Path.GetFileName(fuAttachment.PostedFile.FileName)
mm.Attachments.Add(New Attachment(fuAttachment.PostedFile.InputStream, fileName))
End If
Using smtp As SmtpClient = New SmtpClient
smtp.Host = smtpSection.Network.Host
smtp.EnableSsl = smtpSection.Network.EnableSsl
Dim networkCred As NetworkCredential = New NetworkCredential(smtpSection.Network.UserName, smtpSection.Network.Password)
smtp.UseDefaultCredentials = smtpSection.Network.DefaultCredentials
smtp.Credentials = networkCred
smtp.Port = smtpSection.Network.Port
smtp.Send(mm)
End Using
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Email sent.');", True)
End Sub
Possible Errors
1. Errors when submitting TinyMCE editor Rich Text HTML content
The following error occurs when you try to submit
HTML content to server.
Server Error in 'ASP.Net' Application
A potentially dangerous Request.Form value was detected from the client (TextBox1"=<p>Hello</p>").
Description: Request Validation has detected a potentially dangerous client input value, and processing of the request has been aborted. This value may indicate an attempt to compromise the security of your application, such as a cross-site scripting attack. You can disable request validation by setting validateRequest=false in the Page directive or in the configuration section. However, it is strongly recommended that your application explicitly check all inputs in this case.
Exception Details: System.Web.HttpRequestValidationException: A potentially dangerous Request.Form value was detected from the client (TextBox1="=<p>Hello</p>").
Solution
2. Errors while sending Email using Gmail
The following error occurs when you try to send email using
Gmail credentials in your application.
The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required. Learn more at
Description:An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details:System.Net.Mail.SmtpException: The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required. Learn more at
Solution
Screenshots
The Contact Us Form
![Contact Us Form with Rich TextBox in ASP.Net]()
The received email
![Contact Us Form with Rich TextBox in ASP.Net]()
Downloads
