How to Create Mailto Forms

Mailto forms are used in websites to keep in touch with visitors so that they can offer suggestions, ask questions, or give feedback. These forms are easy to work with, and they commonly include fields for an email address, user name, and a text area for the message.

When a visitor submits a Mailto form, the Mailto link opens the visitor's email client filled with the form contents. Then, the visitor can click "Send" to produce an email for the Web admin.

For creating a simple Mailto form, you need to use the <form> element with its <span class="attribute">action</span> (specifies the address (URL) where to submit the form), <span class="attribute">method</span> (specifies the HTTP method to use when submitting the form) and <span class="attribute">enctype</span> (specifies the encoding of the submitted data) attributes, insert a mailto: link, a <textarea> element and an <input> element for submitting the form.

3 possible values for enctype encoding

application/x-www-form-urlencoded is the proper option for the majority of simple HTML forms. It is the default value if the <span class="attribute">enctype</span> attribute is not specified.
multipart/form-data is necessary when your users are required to upload a file through the form.
text/plain is a valid option, though it sends the data without any encoding at all. It is not recommended since its behavior is difficult to predict.

Example of creating a Mailto form:

Example of How to Create Mailto Forms

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contact Form</title>
</head>
<body>
  <form action="mailto:[email protected]" method="post" enctype="text/plain">
    Subject:<br />
    <input type="text" name="subject" placeholder="Subject" /><br />
    Email:<br />
    <input type="email" name="email" placeholder="Your Email" /><br />
    Message:<br />
    <textarea name="body" rows="5" cols="30" placeholder="Your Message"></textarea><br />
    <input type="submit" value="Send" />
  </form>
</body>
</html>

Try it Yourself »

If you click on the "Try it yourself" button you will see the form, but it can't really work here. In order to test the code, you should copy this into an HTML file on your computer and run it yourself. You will be redirected to your mail client when you press the submit button.

Advantages of Mailto forms

A Mailto form allows asking specific questions while a Mailto link doesn’t. Considering the answers, you can easily sort your Email messages and answer the ones, which are essential to respond.

Note: Mailto forms are considered obsolete and lack reliable support in modern browsers. They also pose security and reliability risks because the email address is exposed in the client, and submitted data can be lost or intercepted. For production websites, we strongly recommend using a server-side form handler or a dedicated contact form service instead.

Moreover, using a form lets you not always show the Email address on the web page, but it does not prevent spam, as the address is still visible in the email client.