Mailto links explained
Tags: html, webdev, learning, web
Published: 2023-11-02 16:40:24

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:

   ```html
   <a href="mailto:email@example.com">Send an Email</a>
   ```

   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."

2. Specifying Subject and Body:
   You can pre-fill the subject and body of the email by adding them to the "mailto" link:

   ```html
   <a href="mailto:email@example.com?subject=Feedback&body=I have some feedback for your website">Send Feedback</a>
   ```

   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."

3. Multiple Recipients:
   You can specify multiple email addresses as recipients by separating them with commas:

   ```html
   <a href="mailto:email1@example.com,email2@example.com">Email Multiple Recipients</a>
   ```

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

4. Adding CC and BCC Recipients:
   You can also include CC (Carbon Copy) and BCC (Blind Carbon Copy) recipients in the "mailto" link:

   ```html
   <a href="mailto:email@example.com?cc=cc@example.com&bcc=bcc@example.com">Send Email</a>
   ```

   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.

5. Adding Attachments:
   You can specify attachments using the "attach" parameter. Note that not all email clients support this feature:

   ```html
   <a href="mailto:email@example.com?attach=http://example.com/file.pdf">Send Attachment</a>
   ```

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

6. 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:

   ```html
   <a href="mailto:email@example.com?subject=Hello%20World&body=Line%201%0ALine%202">Special Characters</a>
   ```

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

7. Customizing Link Text:
   You can customize the link text to make it more descriptive:

   ```html
   <a href="mailto:email@example.com" target="_blank">Click here to email us</a>
   ```

   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.

8. Adding a Default Message:
   You can prefill a default message for the recipient to edit or send as is:

   ```html
   <a href="mailto:email@example.com?body=Hello,%20I%20hope%20you%20are%20well.%0A%0ASincerely,%20[Your%20Name]">Contact Us</a>
   ```

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

9. HTML in the Body:
   You can include HTML tags in the body of the email to format the message:

   ```html
   <a href="mailto:email@example.com?body=<strong>Hello</strong>,%20I%20hope%20you%20are%20well.">Formatted Email</a>
   ```

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

10. 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:

    ```html
    <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](veilmail.io) 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.