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 action (specifies the address (URL) where to submit the form), method (specifies the HTTP method to use when submitting the form) and enctype (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 enctype 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:

<!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="get" enctype="text/plain">
    Subject:<br>
    <input type="text" name="subject" placeholder="Your Name"><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>

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.

Moreover, using a form lets you not always show the Email address on the web page so some spam emails will be prevented (only works if the spammer doesn't know HTML).