How to Create Mailto Forms

Posted on by mtoplistChuyên mục:Top List

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:

 

<
html
>
  
<
head
>
    
<
title
>Title of the document
</
title
>
    
<
style
>

      
div
 {
        
margin-bottom
: 
10px
;
      }
    
</
style
>
  
</
head
>
  
<
body
>
    
<
h2
>Give Feedback to Our Website.
</
h2
>
    
form
 
action
=
"mailto: [email protected] 
method
=
"get"
 
enctype
=
"text/plain"
>
<
div
>
        
<
label
 
for
=
"name"
>Name:
          
<
input
 
type
=
"text"
 
name
=
"name"
 
id
=
"name"
 />
        
</
label
>
      
</
div
>
      
<
div
>
        
<
label
 
for
=
"email"
>Email:
          
<
input
 
type
=
"text"
 
name
=
"email"
 
id
=
"email"
 />
        
</
label
>
      
</
div
>
      
<
div
>
        
<
label
>Comments:
</
label
>
        
<
br
 />
        
<
textarea
 
name
=
"comments"
 
rows
=
"12"
 
cols
=
"35"
>Send your comments to us.
</
textarea
>
      
</
div
>
      
<
div
>
        
<
input
 
type
=
"submit"
 
name
=
"submit"
 
value
=
"Send"
 />
        
<
input
 
type
=
"reset"
 
name
=
"reset"
 
value
=
"Clear Form"
 />
      
</
div
>
    
</
form
>
  
</
body
>

</
html
>

Try it Yourself »

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 that spammers won’t flow.

mtoplist