In this article I will show you how to create an appropiate e-mail link with HTML.
Make an e-mail link with HTML
To define a link as an e-mail link you need to use the HTML attribute mailto: . You use it along with the <a> tag to define a link.
If the user of your website clicks on this link, the e-mail client of the user will open. This works on PC as well as on smartphone or tablet.
The lone requirement: The user needs to have installed an e-mail client on his device. If he has no program or app installed, nothing will happen if he clicks on that link.
E-mail link with predefined subject
You also can create an e-mail link with a predefined subject. With this you’re i.e. able to define certain subjects to different on request of support.
This example creates an e-mail link with the subject “Support request”. The subject is defined by the attribute ?subject. This works also on PC and mobile devices likewise.
E-mail link with predefined body
It is even possible, to also provide a predefined body in your link. For this you have to use the attribute ?body.
<a href="mailto:email@example.com?body=New%20message%0D%0A%0D%0Afrom%20your%20webseite%20">E-mail with predefined Body</a>
This example creates an e-mail link with a body text containing “New message from your website”.
Please be aware, that you need to mask special characters and word-wraps accordingly. Otherwise this e-mail link will just do nothing or it will create error messages.
Please refer to the following table to mask miscellaneous special characters:
|Function / character||Escape sequence|
E-mail link with copy recipients
Of course you can also define the recipients of the e-mails. You also can provide CC and BCC recipients. Please refer to the following examples if you want to know how to do this.
<a href="mailto:firstname.lastname@example.org;email@example.com">More than one recipient.</a>
<a href="mailto:firstname.lastname@example.orgemail@example.com">An e-mail with CC-recipient.</a>
<a href="mailto:firstname.lastname@example.orgemail@example.com">E-mail with BCC-recipient.</a>
Combining of options
Finally you also can combine every option at will. The example below shows you how to do that.
<a href="mailto:firstname.lastname@example.org?subject=Supportemail@example.com">E-mail with subject and CC-recipient.</a>
This example creates an e-mail link with a subject and a CC-recipient. Please be aware, that you need to use & to combine certain attributes into your link.
As mentioned earlier this only works if the user has installed an e-mail client on his device. If he uses just the web-interface of his e-mail provider these links will not work. Therefore you always should provide alternative means of contact.