A Tutorial on How to Use 'Mailto' Forms

Create a simple email form with HTML

A website feature that new web designers struggle with is a form, but web forms don't have to be complicated. Mailto forms are an easy way to make forms work. These forms rely on email clients to send the form data from the customer's computer to the form owner. Mailto forms are easier than learning to write PHP and cheaper than buying a pre-written script. Here's how to create an HTML mailto form.

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

Getting Started

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

If you don't have access to a script to make the 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. This solution is limited in what it can do. However, for small websites, it's a good place to start.

Tricks to Using Mailto Forms

Use the enctype="text/plain" attribute. This attribute tells the browser and 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 line, where spaces are replaced by the plus sign (+) and other characters are encoded. Using the enctype="text/plain" attribute makes the data easier to read.

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 simple markup. Ideally, these form fields are coded using semantic markup and elements. However, this example is sufficient for the scope of this tutorial.

Your customers see a message saying that the form is being submitted through email. The result looks like this:

first_name=Jennifer

last_name=Kyrnin

comments=Hi there!

Use the GET or POST Method

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

Special Note About Mailto Forms

This method, while easy, it also limited. It is important to note that mailto forms don't always work for all combinations of browsers and email clients. If you used a mailto form and weren't successful, there could be some combination of technology that caused the function to fail.

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, 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.