HTML Hot Tip: Using The Mailto URL With Forms

One of the more difficult aspects of forms is creating the server-side scripts that process the form data. This can be a daunting task for non-programmers and impossible for those webmasters who cannot create server-side scripts at all.

Fortunately, all is not lost. It is possible to create forms and retrieve user-supplied data without writing or installing server-side processing scripts. The trick is to use the mailto URL to retrieve the form data.

Normally, the mailto URL is used in a conventional link. When clicked by the user, the browser opens some sort of mail composition window, collects a message, and sends it to the address specified in the URL.

When used as the action attribute of a form, the mailto URL instead mails the form data to the address in the URL. By setting this address to yourself, you can receive form data as conventional email messages.

Before showing how all this works, keep in mind several caveats:

Given these warnings, let's go ahead and use this idea anyway!

A Simple Example

Here is a simple form, with a mailto URL as the form action: 
    <form method=POST action="mailto:you@your-server.com" enctype="text/plain">
    <pre>
    <b>       Name:</b> <input type=text name="Name" size=40>
    <b>      Phone:</b> <input type=text name="Phone" size=10 maxlength=10>
    <b>   Category:</b><input type=radio name="Category" value="Boats"> Boats
    <b>            </b><input type=radio name="Category" value="Cars"> Cars
    <b>            </b><input type=radio name="Category" value="Trucks"> Trucks
    <b>            </b><input type=radio name="Category" value="Planes"> Planes
    <b>Description:</b> <textarea name="Description" rows=6 cols=40></textarea>
    <b>            </b><input type=submit>
    </pre>
    </form>
In case you are wondering, the resulting form looks like this: 

       Name: 
      Phone: 
   Category: Boats
             Cars
             Trucks
             Planes
Description:

Notice that this is a normal form, except that I used method=POST, enctype="text/plain", and set the action attribute to a mailto URL.

Don't actually submit this form; you'll just send an empty message to my server.

What You Get

When a user submits the form, the form data is presented in a fairly readable format. For example, if I typed in my name and phone number, selected "Cars", and type a few lines of text into the text area in the form, the data that gets mailed to me looks like this: 
    Name=Pat Zubriski
    Phone=123-4567
    Category=Art
    Description=This is a 
    multiline
    input field
As far as I can tell, if a browser doesn't support text/plain as the encoding, it will use the default encoding instead. This looks something like this:
    Name=Pat+Zubriski&Phone=123-4567&Category=art&Description=This+is+a%0D%0Amulti-line%0D%0Ainput+field
Bleah. At first, this seems totally useless. But a few simple substitutions and things will be looking much better. Just replace all the plus characters ("+") with spaces, and the ampersands ("&") with carriage returns: 
    Name=Pat Zubriski
    Phone=123-4567
    Category=Art
    Description=This is a%0D%0Amulti-line%0D%0Ainput field
The final conversion is to replace any %0D%0A sequences in your multiline input fields with line breaks.

The bottom line: use enctype="text/plain" to make some, if not all, of your form results easier to read.

Final Thoughts

One drawback to the whole mailto form idea is that there is no way to give a user feedback that the form was correctly sent. Only use this trick when there is no other alternative. If you can make things work with a regular form CGI script, by all means, do it.

Finally, remember that this only works with most browsers. Some older browsers may refuse to honor the mailto URL and not handle your form correctly