HTML Email Link (ahref mailto) Guide – Add Subject, Message, CC, BCC
Summary: From time to time, it might be wise to use the ahref tag to insert an HTML email link inside the web page for visitors to compose and send emails to the email addresses specified on the page instead of a dedicated contact form. Besides the mailto: action which specifies the recipient email address, you can add subject, body, cc, bcc recipients to the email for convenience of the visitors. Read below for a detailed guide.
Article Highlights
The Mailto HTML Email Link
- In the simplest form, the ahref (a) tag can be transformed into an email link by adding the mailto: action:
<a href="mailto:[email protected]">[email protected]</a>Additional action/info can be added to the ahref (a) tag to add fine grained control:
Multiple recipient email addresses
- Separate the addresses with comma
<a href="mailto:[email protected],[email protected]">Click to email both addresses</a>
Add CC or BCC email addresses
- Insert &cc= or &bcc= or both to the ahref HTML email link
<a href="mailto:[email protected]&cc=[email protected]">Click to email with cc</a>
<a href="mailto:[email protected]&cc=[email protected]&bcc=[email protected]">Click to email with cc and bcc</a>Add the email subject
- Insert &subject= to the ahref link
- (Optional) If a space is present in the subject, it is suggested to convert it into %20, but modern browser can handle the subject well without conversion
<a href="mailto:[email protected]&subject=Hello Admin">Say hello to Admin</a> OR
<a href="mailto:[email protected]&subject=Hello%20Admin">Say hello to Admin</a>Add the single line email body or multiple line email body
- Insert &body= to the ahref link
- If the body has several lines with line breaks, you can add %0D%0A as the tag for line break for cross-browser compatibility. Some developers might just use %0A which works in most cases for multiple line email body.
- The conversion of space into %20 is again optional.
<a href="mailto:[email protected]&subject=Hello Admin&body=Say hello to you%oD%oAThank you!">Say hello to Admin</a> OR
<a href="mailto:[email protected]&subject=Hello%20Admin&body=Say%20hello%20to%20you%oD%oAThank%20you!">Say hello to Admin</a>Special Characters – &, #, ‘, ” and foreign characters
| Special Character | Action |
|---|---|
| & | convert each occurrence of & into %26 |
| # | convert each occurrence of # into %23 |
| ‘ | convert each occurrence of ‘ into %27 |
| “ | convert each occurrence of ” into %22 |
| Foreign characters | URL encode the characters, may make use of free online URL encoding services |
| Chinese characters | URL encode the characters, may make use of free online URL encoding services |
Beware when using online URL encoding services that the “&” in front of “&body”, “&subject”, “&cc”, “&bcc” should not be encoded.
Conclusion
When users clicking on the mailto HTML email link with the details of &body, &subject, &cc, &bcc filled in, an email client on their computers will pop up immediately with the to, cc, bcc, subject, body fields of the email pre-filled. This will ease the process and encourage your visitors to really send you the emails.
&subject= is not working, I believe it needs to follow the URL / query string format of using “?” as initial separator, then “&” between elements, like so:
email me
Also, it looks like what’s supposed to be CR/LF in above examples, when converted to %0D0A actually shows %oDoA.
i.e. The zeros are lower-case letter “o”.
Cheers
Hey, re your page “HTML Email Link (ahref mailto) Guide – Add Subject, Message, CC, BCC” sometimes I receive a 500 message when browsing the page.
Thought you would like to know.
Cheers