How to make an e-mail link with HTML

On most websites you will use a form as a mean of contact. But a form cannot be presented every time. Especially if you cannot use PHP on your web server it is very difficult. For that reason you can make an e-mail link just with HTML. This is very easy to do. You do not need JavaScript or CSS or something else. Just plain HTML.

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.

 

Example:

<a href="mailto:your@e-mail.com">your@e-mail.com</a>

 

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.

 

Example:

<a href="mailto:your@e-mail.com?subject=Support%20request">your@e-mail.com</a>

 

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.

 

Example:

<a href="mailto:your@e-mail.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
New line %0A
Carriage return %0D
Space %20
! %21
# %23
% %25
* %2A
/ %2F
< %3C
> %3E
? %3F

 

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.

 

Examples:

<a href="mailto:your@e-mail.com;another@e-mail.com">More than one recipient.</a>
<a href="mailto:your@e-mail.com?cc=copy@e-mail.com">An e-mail with CC-recipient.</a>
<a href="mailto:your@e-mail.com?bcc=blindcopy@e-mail.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.

 

Example:

<a href="mailto:your@e-mail.com?subject=Support%20request&amp;cc=copy@e-mail.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 &amp; to combine certain attributes into your link.

 

Conclusion

As you can see, it is very easy to create an e-mail link just with HTML. You do not need JavaScript, you do not need CSS you do not need anything – besides HTML of course.

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.

 


Dir gefällt dieser Artikel?

Leave a Reply

Your email address will not be published.