A Tutorial on How to Use Mailto Forms

HTML Forms Tutorial

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

A common feature of websites that many new web designer struggle with are forms. You may want to add a form to your website as a simple way for people to get in touch with you to ask questions or express interest in the products or services that you offer. Unfortunately, online tutorials about how to add complex site forms can be confusing and turn new web professionals away. 

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. The form data that is completed by the website user is email to a specific address as specified in the coding for the form.

If you are new to web design and you don't know how to program more complex interactions, or you're running a small website and just want a simple way to add a form, 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 scrip 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."

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 access to a CGI script or other 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 afterwards (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 (note - this is 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):


<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

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. For more detailed information about what's possibly interfering with your attempt to use such a form, consult "When Mailto Forms Don't Work."

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!

Original article by Jennifer Krynin. Edited by Jeremy Girard on 9/12/17