DEV Community

irishgeoff22
irishgeoff22

Posted on

Mailto links explained

#html #webdev #learning #web

A "mailto" link is a type of hyperlink in HTML that allows users to send an email to a specified email address when they click on the link. These links are typically used on websites to facilitate communication between the website's visitors and the site's owner or administrators. When a user clicks on a "mailto" link, their default email client (such as Outlook, Gmail, or Apple Mail) will open with a new email draft pre-filled with the recipient's email address, subject, and sometimes even the body of the email.

Here's a comprehensive explanation of "mailto" links and the various ways and features they can be used on a website:

  1. Basic "mailto" Link: The most common use of a "mailto" link is to provide a simple way for users to send an email. Here's the basic HTML structure of a "mailto" link: 
   <a href="mailto:email@example.com">Send an Email</a>
Enter fullscreen mode Exit fullscreen mode

In this example, when a user clicks on the "Send an Email" link, it will open their default email client with a new message addressed to "email@example.com."

  1. Specifying Subject and Body: You can pre-fill the subject and body of the email by adding them to the "mailto" link: 
   <a href="mailto:email@example.com?subject=Feedback&body=I have some feedback for your website">Send Feedback</a>
Enter fullscreen mode Exit fullscreen mode

In this example, clicking the link will open an email with the subject "Feedback" and the body text "I have some feedback for your website."

  1. Multiple Recipients: You can specify multiple email addresses as recipients by separating them with commas: 
   <a href="mailto:email1@example.com,email2@example.com">Email Multiple Recipients</a>
Enter fullscreen mode Exit fullscreen mode

Clicking this link will open the email client with both "email1@example.com" and "email2@example.com" as recipients.

  1. Adding CC and BCC Recipients: You can also include CC (Carbon Copy) and BCC (Blind Carbon Copy) recipients in the "mailto" link: 
   <a href="mailto:email@example.com?cc=cc@example.com&bcc=bcc@example.com">Send Email</a>
Enter fullscreen mode Exit fullscreen mode

This link will open an email with "email@example.com" as the main recipient, "cc@example.com" as a CC recipient, and "bcc@example.com" as a BCC recipient.

  1. Adding Attachments: You can specify attachments using the "attach" parameter. Note that not all email clients support this feature: 
   <a href="mailto:email@example.com?attach=http://example.com/file.pdf">Send Attachment</a>
Enter fullscreen mode Exit fullscreen mode

This link will open an email with an attachment, which is a PDF file located at "http://example.com/file.pdf."

  1. Encoding Special Characters: To include special characters in the subject or body, you should URL-encode them. For example, use %20 for spaces and %0A for line breaks: 
   <a href="mailto:email@example.com?subject=Hello%20World&body=Line%201%0ALine%202">Special Characters</a>
Enter fullscreen mode Exit fullscreen mode

This link will open an email with the subject "Hello World" and a body that contains two lines of text.

  1. Customizing Link Text: You can customize the link text to make it more descriptive: 
   <a href="mailto:email@example.com" target="_blank">Click here to email us</a>
Enter fullscreen mode Exit fullscreen mode

In this case, "Click here to email us" is the link text, and the "target" attribute is used to open the email client in a new browser tab or window.

  1. Adding a Default Message: You can prefill a default message for the recipient to edit or send as is: 
   <a href="mailto:email@example.com?body=Hello,%20I%20hope%20you%20are%20well.%0A%0ASincerely,%20[Your%20Name]">Contact Us</a>
Enter fullscreen mode Exit fullscreen mode

This link will open an email with a pre-filled message that the user can modify before sending.

  1. HTML in the Body: You can include HTML tags in the body of the email to format the message: 
   <a href="mailto:email@example.com?body=<strong>Hello</strong>,%20I%20hope%20you%20are%20well.">Formatted Email</a>
Enter fullscreen mode Exit fullscreen mode

In this example, the email body contains HTML tags to make "Hello" bold.

  1. Hiding the Email Address:
    If you want to hide the email address from spam bots, you can use JavaScript to generate the "mailto" link dynamically. For example:

    <script type="text/javascript">
  document.write('<a href="mailto:' + ['e', 'x', 'a', 'm', 'p', 'l', 'e'].join('') + '@example.com">Email Us</a>');
</script>

    This method obfuscates the email address, making it less susceptible to email harvesting by spammers.

Remember that not all users may have an email client set up, so it's a good practice to provide an alternative contact method (e.g., a contact form) alongside "mailto" links on your website. Additionally, be mindful of privacy concerns when using "mailto" links and respect users' preferences for communication.

If you wish to hide email on website and protect your email address from getting scraped and spammed.
You can use this very cool free tool free called https://VeilMail.io that protects your email address behind a captcha.

Top comments (0)

Read next

abel5173 profile image

Seeking Advice: Navigating Entry-Level Remote Job Opportunities and Skill-Building

Abel -

danieljcafonso profile image

This Month in Solid #9: SolidHack started, new fellow and API change 😎

Daniel Afonso -

sowparna_shome_d7d8838255 profile image

# Todo App with JWT-Based Authentication 🚀

Sowparna Shome -

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -