A Tutorial on How to Use 'Mailto' Forms

Create a smile email form with HTML

A common feature of websites that many new web designer struggle with is a form, but web forms do not have to be difficult to work with, even for new webbies. Mailto forms are an easy way to make forms work. They rely on email clients to send the form data from the customer's computer to the form owner. Mailto forms are a lot easier than learning to write PHP. It's also cheaper than buying a pre-written script to do it for you.

With this quick tutorial, learn how to use mailto forms. Even if you've never done so previously, mastering the technique is easy and certainly in the realm of "beginning web design."

A keyboard with a "Contact Us" button
 Courtney Keating / E+ / Getty Images

Getting Started

HTML forms can be challenging for new web developers because they require more than just learning HTML markup. In addition to the HTML elements needed to create the forms and its fields, you must also have some way to get the form to "work." This usually requires PHP, access to a CGI script, or another program to create in the "action" attribute of the form. That action is how the form processes the data and what it does with it afterward (write to a database, send an email, etc.)

If you don't have access to a script that will make your form work, there is one form action that most modern browsers support.

action="mailto:youremailaddress"

This is a simple way to get the form data from your website to your email. Admittedly, this solution is very limited in what it can do, but for very small websites, it is a good place to start.

Tricks to Using Mailto Forms

Use the enctype="text/plain" attribute.
This tells the browser as well as the email client that the form is sending plain text rather than anything more complicated. Some browsers and email clients send form data encoded for web pages. This means that the data is sent as one long line, spaces are replaced by plus (+) and other characters are encoded. Using the enctype="text/plain" attribute helps make the data easier to read.

Use the GET or POST Method

While the POST method sometimes works, it often just causes the browser to open a blank email window. If this happens to you with the GET method, then try switching to POST.

Sample Mailto Form

Here is a sample form using the mailto action.

<form enctype="text/plain" method="GET" action="mailto:webdesign@aboutguide.com">

<label for="firstName">Your First Name:</label>
<input type="text" id="firstName" name="first_name">
<label for="lastName">
Your Last Name:</label>
<input type="text" id="lastName" name="last_name">
<label for="messageBody">
Comments:</label>
<textarea id="messageBody" rows="5" cols="30" name="comments"></textarea>
<input type="submit" value="Send">
</form>

This is a very simple markup. Ideally, you would code these form fields using more semantic markup and elements, but this example is sufficient for the scope of this tutorial.

Your customers will see a message saying that the form is being submitted via email. This is what the results look like:

first_name=Jennifer

last_name=Kyrnin

comments=Hi there!

Special Note About Mailto Forms

Once again, this method, while easy, it also very limited. Obviously, it is important to note that mailto forms don't always work for all combinations of browsers and email clients. If you've tried to use a mailto form and were not successful, this might be why — there could be some combination of technology that causes the function to fail.

While this method is a good first attempt at creating web forms that generate an email and send form data, as you get more advanced in your web skills, you will certainly want to explore more robust options. From CGI scripts to PHP forms to CMS platforms that have built-in form widgets, you have plenty of advanced options to consider for your future website form needs.