mailto enables the delivery of content entered by a user on a Web page to a local mail client

background:

Want to have such a design in your own website:

When the user clicks the Submit button, the local mail client opens, and the content he enters in the input box is automatically the content of the message, like this:

Mailto can help with this functionality.

Introduction:

Mailto is an e-mail protocol that allows you to create a hyperlink to an e-mail address that enables you to send e-mail messages over the Internet. Just like entering a URL in the address bar will open a Web page, enter Mailto:[email protected], will open the local mail client, and send the message to [email protected].

using mailto in HTML1. How to use:

One way is to write the mailto link in the href attribute of the A tag:

<href= "Mailto:[email protected]">email</a >

The other is written in the Action property of the form

<formname= ' SendMail 'Action= ' mailto:[email protected] '>   <inputname= ' name 'type= ' text '>   <inputname= ' Subject 'type= ' text '>   <inputname= ' email 'type= ' text '>   <inputname= ' number 'type= ' text '>   <inputname= ' body 'type= ' text '></form>

2. Pass the parameters:

The mailto supports several parameters:

Both of these methods can pass parameters, but the effect is not the same.

If you use a tag, you can only add parameters to the mailto link:

< a href = "Mailto:to?subject=subject&cc=cc&body=body" >Send mail</a>

Add after the first parameter? , with & connections between the other parameters.

The effect is this:

If you use a form, the parameters and effects passed in the Mailto link are the same as using a, and what is special about him is that he will pass in the value of the name attribute in input and its input:

This way does not need to use JS to get the contents of the input box, the user input directly can be updated to the content area of the message, but there is a clear drawback, is that it passed in the format is very unattractive and inconvenient. Almost no one sends the message in this way, and the user needs to delete the equal sign himself and adjust the style.

So I chose to use a tag to open the Mailto link, through JS to format the content as parameters passed to the a tag.

  <Pclass= "title">Contact ME</P>        <ulclass= "Email">            <Li><inputtype= "text"name= "Name"placeholder= "Name"></Li>            <Li><inputtype= "text"name= "Email"placeholder= "Email Address"></Li>            <Li><inputtype= "text"name= "Number"placeholder= "Phone number"></Li>            <Liclass= "message"><textareaname= "message"placeholder= "Message"></textarea> </Li>            <Buttonclass= "Btn btn-define">Submit</Button>            <ahref= "mailto"ID= "Send"></a>        </ul>

Create an invisible A-tag, when the user enters the good content click button, JS will get the content in the input box, and after formatting passed to a, and then simulated click a tag.

jquery Code:

 function   SendEmail () { var  name=$ ("[name= ' name ']"  =$ (" [name= ' email '] "). val (), Number  =$ ("[name= ' number ']"  =$ (" [Name= ' m Essage '] " =" My Name is: "+name+"%0a%0d "+" My Email Addr ESS is: "+email+"%0a%0d "+" My Phone number is: "+number+"%0a%0d "+" Message: "+"%0a%0d "+message;    $ ( "#send"). attr ("href", "mailto:[email protected]?body=" +body); document.getElementById ( "send" ). Click (); $ (document). Load ($ ( ". btn"  

Where the%0d%0a is the carriage return conforms to the newline character, my mail client cannot parse characters in HTML format (delivery <br> cannot implement line wrapping), passing UTL encoding can be implemented.

Demo

Reference:

• Mailto
• mailto:html e-Mail link
• mailto usage

mailto enables the delivery of content entered by a user on a Web page to a local mail client