Website Contact Form without PHP

A few days ago I ran across an interesting question about a person who didn’t want to use PHP or didn’t have access to PHP and still wanted a contact form on their website. First off, if you have PHP and don’t mind using it, I suggest just using PHP for your contact forms.

But the method I came up with uses the mailto: URI scheme that almost every computer and phone knows. Sometimes users have it set to Microsoft Outlook or other software that they did not configure so their e-mails will not be sent. Also sometimes users don’t have the mailto: URI scheme specified so nothing will happen when they click on the link. But with those issues out of the way, lets get coding.

Understanding the mailto Scheme

We need to first understand how the mailto: scheme works and the parameters that are available for us to use with it. With an e-mail you have three parts. The subject, message and who you wish to send the message to. All of these are specified in the mailto scheme. Note that the URI scheme doesn’t have a parameter for “from” since it’s going to be sent from their own e-mail account and the “from” data will be set by their Mail software, such as Gmail, Outlook or any other client.

<a href="mailto:someone@example.com">Send Message</a>
<a href="mailto:someone@example.com?subject=Test Subject">Send Subject</a>
<a href="mailto:someone@example.com?body=Message Body">Send Body</a>
<a href="mailto:someone@example.com?cc=cc@example.com">Send CC</a>
<a href="mailto:someone@example.com?bcc=bcc@example.com">Send Bcc</a>

Using the combination of all of the following and appending the values with the normal URI delimiters we can create a contact form using only HTML and Javascript. For more information on the mailto: URI scheme you can look at RFC 6068.

Basic Contact Form

We now can code our basic contact form to use in HTML. You can add as many random fields that you want to be sent, but I’m going to make a fairly straight forward form.

<style>
form > input, form > textarea, form > label {
	display: block;
	margin-bottom: 5px;
}
</style>

<form name="contact" method="post">
	<label>Name</label>
	<input type="text" name="name" />
	<label>Subject</label>
	<input type="text" name="subject" />
	<label>Phone Number</label>
	<input type="text" name="phone" />
	<label>Message</label>
	<textarea name="message"></textarea>

	<input type="submit" name="send" value="Send Message" />
</form>

JavaScript Contact Form Parser

We now need to have our JavaScript parse the form and build the proper URI for the user to be navigated to. There are so many ways you can go about this, but for me I’m going to do it in one of the simpler ways.

<!-- Contact Form Here -->
<script>
	var form = document.forms["contact"];
	form.addEventListener('submit',contact_submit,false);

	function contact_submit(e) {
		// Stop Form From Submitting
		e.preventDefault();

		// Set Initial Variables
		var target = e.target || e.srcElement;
		var to = 'someone@example.com';
		var uri = 'mailto:' + to;
		var body = '';

		// Set Form Values to Variables
		var name = target.elements['name'].value;
		var subject = target.elements['subject'].value;
		var phone = target.elements['phone'].value;
		var message = target.elements['message'].value;

		// Build Body / Message with all Input Fields
		body += message + "\r\n\r\n";
		body += "Name: " + name + "\r\n";
		body += "Phone Number: " + phone + "\r\n";

		// Build final Mailto URI
		uri += '?subject=' + encodeURIComponent(subject);
		uri += '&body=' + encodeURIComponent(body);

		// Open Mailto in New Window / Tab
		window.open(uri,'_blank');
	}
</script>

Sealing the Envelope

To conclude this little tutorial / idea of code, I’m going to just note that this isn’t the best way to send mail from your website. The user needs to have a mail client setup, and I doubt a lot of users actually have a mail client working. I would also suggest that you hide the e-mail address that you are sending e-mails to in your JavaScript. You can do this by having the JavaScript in it’s own file or using Base64 or another basic encoding for the e-mail address and then decoding it at the end. This will prevent basic bots from getting your e-mail address and spamming you.

Hopefully this helps somebody out. I found this to be a very interesting way to use the mailto URI scheme along with javascript and HTML.