I recently ran into an issue where I wanted to have an HTML
form send an email from a website. I was
building a website using entirely HTML, JavaScript, and CSS. However, it is not possible to send an email
from the client side; it must be handled on the server side. In order to do this, your two best options
are ASP.NET or PHP. While searching for
a solution I found that most people simply suggest building the entire thing in
ASP.NET or PHP. However, I was determined
not to do this. My goal was to write
only what I needed in ASP.NET and leave the rest. I chose to use C# because that was what I was
the most experienced with.
After quite a bit of searching, I found the basis of what I
needed to get started. The jQuery JavaScript
libraries have an Ajax function that can call an ASP.NET method on the server. The jQuery.ajax() function has many possible
uses but we will just use it to call an ASP.NET function to send an email here.
Let’s start by building our HTML form for the user to fill
out and submit. In this example we have
a name, email, and message input along with a submit button. We leave the action blank and use a class
called “validate-form” to type it to the CSS.
We will not discuss validation here.
<form action="#" class="validate-form">
<fieldset>
<input type="text" id="Name" value="Name"/>
<input type="text" id="Email" value="Email"/>
<textarea cols="10" rows="5"
id="Comments">Comments</textarea>
<input type="submit"
id="Submit-footer"
value="Send the
Message"/>
</fieldset>
</form>
Now let’s create the ASP.NET portion of the project. Create a new ASPX file and name it “SendEmail.aspx”. First add a reference to the System.Net.Mail
libraries at the top:
using System.Net.Mail;
Now create a new procedure called “SendMessage”. The new procedure will take parameters for the
name, email, and message. The code below
is a pretty basic method of sending an email so I will not go into detail. Key points are the server name and the email
address to send the email to.
[System.Web.Services.WebMethod]
public static void SendMessage(string
name, string fromEmail, string comments)
{
const string
SERVER = "relay-hosting.secureserver.net";
const string TOEMAIL
= "info@sample.com";
MailAddress from = new
MailAddress(fromEmail);
MailAddress to = new
MailAddress(TOEMAIL);
MailMessage message = new
MailMessage(from, to);
message.Subject
= "Web Site Contact Inquiry from "
+ name;
message.Body
= "Message from: " + name + " at " +
fromEmail + "\n\n" + comments;
message.IsBodyHtml
= false;
SmtpClient client = new
SmtpClient(SERVER);
client.Send(message);
}
Next create a JavaScript file called “functions.js”. We will create a function that will kick off
when the user clicks the submit button.
There are several ways to do this, so feel free to use whichever works
best for you. First we get the three inputs
from the user. Next we call the
jQuery.ajax() function. The url
parameter is the path to the .aspx file and it’s method. The data parameter is used to feed the input
to the ASP.NET method we just created.
The format is {‘parameter1’: ‘userinput’, …}, where “parameter1” is the
name of the parameter in the ASP.NET procedure.
In this example, we built the data string first. The other parameters for the jQuery.ajax()
function along with more parameters can be found in the documentation for the
function.
$(function () {
$('.validate-form').submit(function
() {
var name =
document.getElementById("Name").value;
var fromEmail = document.getElementById("Email").value;
var comments = document.getElementById("Comments").value;
var data = "{'name':
'" + name + "', 'fromEmail':
'" +
fromEmail + "', 'comments': '" + comments + "'}";
$.ajax({
type: "POST",
url: "SendEmail.aspx/SendMessage";
data: data,
contentType: "application/json;
charset=utf-8",
dataType: "json"
});
});
});
Finally we need to
add some items to the header of the HTML document. We need to add a reference to the stylesheet,
which we will not discuss here. Next we
need to add reference to two JavaScript files.
First download the jQuery file from here.
<link rel="stylesheet" href="css/style.css" type="text/css"
media="all" />
<script src="js/jquery-1.4.2.js" type="text/javascript"
charset="utf-8"></script>
<script src="js/functions.js" type="text/javascript"
charset="utf-8"></script>
That’s it. Now when
the user clicks the submit button, and email will be generated on the server
and sent to the specified email address.
As with all code, there are many ways to do different parts of this
example. Use whichever works best for you.
