Can you submit a form without PHP?

It's easy to create a web form using HTML. However, after the user submits the form, you need to process the data that is sent to your server. This requires the use of a server-side language like PHP.

This article will explain: what form processing involves, why using a simple PHP script is problematic, and an easier way to process you form.

Suppose you create a simple contact form like this:

When someone fills out this form, you'll want to email the message to your inbox. Processing the form must be done by your server and is actually a lot of work. You need to:

• Verify that all fields have been entered correctly
  • Is the email address a valid email address?
  • Are any required fields empty?
• Filter out SPAM messages
• Turn the field results into an email message
• Send the email message to your inbox

The Downsides of PHP Mail Scripts

As you can imagine, doing all of this requires quite a bit of PHP logic. Instead of writing this yourself, you might find a script online. But, by using someone else's PHP code that you do not understand, you'll be opening your site up to potential security vulnerabilities.

Moreover, standard shared hosting servers aren't intended to send email messages. While a PHP script on your server can technically email a message, there is no guarantee that the message will ever arrive at its intended destination. Since your server is small and shared with others, email providers like Gmail are very suspicious of it. To them, it looks very similar to small anonymous servers trying to send SPAM. Therefore, they may filter it out the message before it gets to your mailbox.

An Easy Way to Process Forms

As an alternative, you can use a form processing like FormDen. The idea is simple: instead of sending the form data to your own server, you send it to the FormDen server. You tell FormDen what fields to expect and where to send the data. FormDen validates the fields, filters out SPAM, and emails the messages for you.

How does it work?

1. Create a FormDen account and you'll be given a unique url that corresponds to your form
2. Add action="unique_url" to the form on your webpage
3. Add a JavaScript file (formden.js) to your webpage

To learn more, you can check out a detailed guide in our documentation, or sign up for a account to try it for yourself.

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:[email protected]">Send Message</a>
<a href="mailto:[email protected]?subject=Test Subject">Send Subject</a>
<a href="mailto:[email protected]?body=Message Body">Send Body</a>
<a href="mailto:[email protected][email protected]">Send CC</a>
<a href="mailto:[email protected][email protected]">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 = '[email protected]';
		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.