A Tutorial on How to Use Mailto Forms

HTML Forms Tutorial

Close up of a contact us key
Courtney Keating/E+/Getty Images

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. The form data is emailed to the owner. If you are new to Web design, you don't know how to program or you're running a small website, having a mailto form as a contact form is a lot easier than learning to write PHP. It's also cheaper than buying a pre-written script.

With this quick tutorial, learn how to use mailto forms. Even if you've never done so previously, mastering the technique is not difficult.

Getting Started

HTML forms can be challenging for new Web developers because they require more than just learning code. You must have some way to get the form to "work"and that usually requires access to a CGI script or other program to put in the action attribute.

If you don't have access to a script, 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 you.

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 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">
Your First Name: <input type="text" name="first_name"><br>
Your Last Name: <input type="text" name="last_name"><br>
Comments: <textarea rows="5" cols="30" name="comments"></textarea>
<input type="submit" value="Send">
</form>

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

Please note that mailto forms don't always work for all combinations of browsers and email clients. Sometimes they don't work for another reason that will require you to investigate. If you've tried to use a mailto form and were not successful, this might be why. For more detailed information about what's possibly interfering with your attempt to use such a form, consult "When Mailto Forms Don't Work."

You may also be wondering whether mailto forms only work if the customer has a POP mail client. With further reading and investigation, you'll likely be able to figure out the challenges in your unique case.