Not only you can use a link to open a webpage, view an image, or to download a file, you can also use a link to open an empty email in the visitor’s browser to send a message someone. It is a very useful method to send an instant email anyone.
Creating a simple HTML email link
To create a simple email link, set mailto: then the email address you want the email to be sent to as the value of the href attribute inside the a (anchor) element, like following-
<a href=”mailto:contact@sitename.com”>Email us</a>
Output:
Email us
When you click the above link two things will happen-
- Your browser will open the default email program set in your system.
- The email address set in the href attribute will be displayed in the “to field” of the email program.
All browsers may not support the HTML email link. In that case, at least you can display email address as the link text, like following-
<a href=”mailto:contact@sitename.com”>Email us to contact@sitename.com</a>
Creating an HTML email link with subject
To add subject as default to the email, mention the required parameter after the email address proceeding with a question mark (?). The parameter consisted with name value pair separated by equal to (=) sign. Here, subject is used as the keyword and the value is the email subject. See the following email-
<a href=”mailto:contact@sitename.com?subject=Contact%20email”>Email us</a>
Output:
Email us
If you click the above link, the email program will be opened filling the subject field as “Contact email” by default. Please note that a space in URL is mentioned as %20 that we used in the subject.
Creating a HTML email link with multiple recipients
To add another email address beside the primary email address mentioned in the href attribute, mention another parameter where cc is the keyword and the email address is its value.
If you want to add one more email, use bcc as the keyword in the next parameter and the email address as its value. See the following example-
<a href=”mailto:contact@sitename.com?cc=admin@sitename.com&bcc=social@sitename.com”>Email us</a>
Output:
Email us
Creating an HTML email link with ScreenTip
When a visitor brings the mouse over the email link there is an option if activated can display a message to the visitor. This is ScreenTip and it lets visitors inform about the purpose of the link.
To activate the ScreenTip, add the title attribute inside the opening anchor element and write the message you want to display visitors as its value, like following-
<a href="mailto:contact@sitename.com" title="Click to email us">Email us</a>
Output:
Drawback of HTML email link
There are few disadvantages of using email link-
- Spammers use programs to search email address from websites. mailto: link is the prime source for email address.
- If no preconfigured email program is set in the visitor’s browser, no email program will be opened.
- Browser that the visitor is using may not support this feature.
Alternative solutions to HTML email link
The solution to the above problems could be as follows-
- To solve the first issue, you can one of the two things-
- Use a form to send message to the recipient.
- Instead of writing the email address directly in the anchor element, mention it separately using Javascript. Spamming programs can’t read email addresses written in this way.
- You can mention the email address as the link text so that visitor can send email in case the email not doesn’t work like following-
<a href=”mailto:contact@sitename.com”>Email us to contact@sitename.com</a>
- Most browsers support the email link option. So, we hope visitors use this kind of browsers.