mailto link with HTML body

522,232

Solution 1

As you can see in RFC 6068, this is not possible at all:

The special <hfname> "body" indicates that the associated <hfvalue> is the body of the message. The "body" field value is intended to contain the content for the first text/plain body part of the message. The "body" pseudo header field is primarily intended for the generation of short text messages for automatic processing (such as "subscribe" messages for mailing lists), not for general MIME bodies.

Solution 2

Whilst it is NOT possible to use HTML to format your email body you can add line breaks as has been previously suggested.

If you are able to use javascript then "encodeURIComponent()" might be of use like below...

var formattedBody = "FirstLine \n Second Line \n Third Line";
var mailToLink = "mailto:[email protected]?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;

Solution 3

No. This is not possible at all.

Solution 4

It's not quite what you want, but it's possible using modern javascript to create an EML file on the client and stream that to the user's file system, which should open a rich email containing HTML in their mail program, such as Outlook:

https://stackoverflow.com/a/27971771/8595398

Here's a jsfiddle of an email containing images and tables: https://jsfiddle.net/seanodotcom/yd1n8Lfh/

HTML

<!-- https://jsfiddle.net/seanodotcom/yd1n8Lfh -->
<textarea id="textbox" style="width: 300px; height: 600px;">
To: User <[email protected]>
Subject: Subject
X-Unsent: 1
Content-Type: text/html

<html>
<head>
<style>
    body, html, table {
        font-family: Calibri, Arial, sans-serif;
    }
    .pastdue { color: crimson; }
    table {
        border: 1px solid silver;
        padding: 6px;
    }
    thead {
        text-align: center;
        font-size: 1.2em;
        color: navy;
        background-color: silver;
        font-weight: bold;
    }
    tbody td {
        text-align: center;
    }
</style>
</head>
<body>
<table width=100%>
    <tr>
        <td><img src="http://www.laurell.com/images/logo/laurell_logo_storefront.jpg" width="200" height="57" alt=""></td>
        <td align="right"><h1><span class="pastdue">PAST DUE</span> INVOICE</h1></td>
    </tr>
</table>
<table width=100%>
    <thead>
        <th>Invoice #</th>
        <th>Days Overdue</th>
        <th>Amount Owed</th>
    </thead>
    <tbody>
    <tr>
        <td>OU812</td>
        <td>9</td>
        <td>$4395.00</td>
    </tr>
    <tr>
        <td>OU812</td>
        <td>9</td>
        <td>$4395.00</td>
    </tr>
    <tr>
        <td>OU812</td>
        <td>9</td>
        <td>$4395.00</td>
    </tr>
    </tbody>
</table>
</body>
</html>
</textarea> <br>
<button id="create">Create file</button><br><br>
<a download="message.eml" id="downloadlink" style="display: none">Download</a>

Javascript

(function () {
var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }
    textFile = window.URL.createObjectURL(data);
    return textFile;
  };

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');
  create.addEventListener('click', function () {
    var link = document.getElementById('downloadlink');
    link.href = makeTextFile(textbox.value);
    link.style.display = 'block';
  }, false);
})();

Solution 5

I have used this and it seems to work with outlook, not using html but you can format the text with line breaks at least when the body is added as output.

<a href="mailto:[email protected]?subject=Hello world&body=Line one%0DLine two">Email me</a>
Share:
522,232
GxG
Author by

GxG

Updated on February 01, 2020

Comments

  • GxG
    GxG almost 4 years

    I have a couple of mailto links in a HTML document.

    <a href="mailto:etc...">
    

    Can I insert HTML formatted body in the mailto: part of the href?

    <a href="mailto:[email protected]?subject=Me&body=<b>ME</b>">Mail me</a>
    

    Note that (2016) in iOS, it is perfectly fine to add <i> and <b> tags for simple italic, bold formatting.

  • wide_eyed_pupil
    wide_eyed_pupil about 11 years
    Can email clients run embedded Javascript? The OP says this is an email not a webpage on which the mailto: link will be.
  • wide_eyed_pupil
    wide_eyed_pupil about 11 years
    So "%0D" is newline. What is an encoded tab's code equivalent?
  • Jim Bergman
    Jim Bergman almost 11 years
    %0D is a newline which is ctrl-m, a tab is ctrl-i which is %09. Take a look at an ASCII chart like this [asciitable.com/index/asciifull.gif]. The control characters are from 1 through 31. @wide_eyed_pupil
  • Valentin Despa
    Valentin Despa over 10 years
    Any signature seems to be removed when doing this.
  • FireDragon
    FireDragon about 10 years
    thanks, in Rails you can use the raw("text \n more text \n\n\t") function to encapsulate text and have this converted to line breaks and tabs for the email body
  • Luke
    Luke almost 9 years
    This worked for me, sending from a Chrome "mailto" to Outlook. Note that you must only encode the body text, not the entire mailto string; and you don't need spaces before/after the \n.
  • Brad
    Brad almost 9 years
    That isn't HTML... still text.
  • Stephen Kaufman
    Stephen Kaufman almost 9 years
    not if you format your email using $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
  • Narxx
    Narxx almost 9 years
    @StephenKaufman - you are not the one sending the email, but the clients who click the link. Meaning you don't know how the email client is set. You don't know how its headers are set. This will work on some email clients, and won't on others.
  • Prabakaran Raja
    Prabakaran Raja about 8 years
    I tried \b for bolding a text. It was not working. What are the other escape sequences supported?
  • Oliver Gray
    Oliver Gray almost 8 years
    I liked this approach, here's a jsfiddle to see it in action: jsfiddle.net/oligray/5uosngy4
  • Dirk Boer
    Dirk Boer over 7 years
    You can also just use %0A for a linebreak, so you don't need to do it from JavaScript.
  • Fattie
    Fattie over 7 years
    Yes, it does work perfectly to add simple bold, italic tags - in iOS anyway.
  • Klemen Tusar
    Klemen Tusar about 7 years
    %0A would be \n
  • Simon East
    Simon East about 6 years
    Not strictly true. While support is very scarce, other answers have shown that some limited HTML is possible in iOS and a combination of IE+ActiveX+Outlook (urgh, yuck).
  • Chloe
    Chloe about 6 years
    That's not an HTML body!
  • Greg
    Greg almost 6 years
    Now that is a fancy idea
  • pmarreck
    pmarreck almost 6 years
    Neat idea, but just for the record, on the latest Apple Mail, this file will open but won't be editable/sendable, it acts like a sent email record
  • Ben Amos
    Ben Amos almost 6 years
    In Rails 5, the u or url_encode methods will convert newlines and make your string generally URL-safe. stackoverflow.com/a/2353752/4686951
  • Collierton
    Collierton over 5 years
    With Apple Mail (11.2), once you have opened the .eml file, you can select Message / Send Again from the menu (shift-cmd-D) to put the email in edit mode.
  • Joe
    Joe over 5 years
    If you're disappointed by this answer, please keep reading: stackoverflow.com/a/46699855/256272 (tl;dr .eml files)
  • Vitaly Zdanevich
    Vitaly Zdanevich almost 5 years
    On iOS I cannot send correct email with <img src='mybase64'/> - in Gmail I see base64 inside my message.
  • hamish
    hamish about 4 years
    thanks, this was the second best option for me, if I can't do html, then at least I can do carriage returns. fine by me.
  • quirimmo
    quirimmo over 3 years
    Hex ASCII code for carriage return char, that's what %0D is. This is not HTML, but ASCII codes
  • Akin Hwan
    Akin Hwan over 3 years
    what about on android and iOS? i don't believe .eml files open unless you have a reader app
  • yougotiger
    yougotiger about 3 years
    This solution is explored on another similar question. However it turns out as @JamesBell mentions:Unpleasant update: Chrome (since about v.46) has begun flagging .EML files as possibly malicious. No idea what horrors a text file could cause but I assume they had their reasons. – James Bell Jun 29 '16 at 20:03
  • Vinay
    Vinay about 3 years
    Beautiful, also works inside confluence Insert Link on a page.
  • Andreas Covidiot
    Andreas Covidiot over 2 years
    does not work with Outlook 16 and FF 78 nor IE 11, but with Edge 90.
  • AnitaS
    AnitaS over 2 years
    I have a similar requirement and have followed this approach,however I have base64 encoded images in the email content.When the eml is generated the size of the image reduces. Below is the link created for same stackoverflow.com/questions/67523117/…
  • nmu
    nmu about 2 years
    Very cool - thanks for taking the time to write this answer
  • Alex K
    Alex K almost 2 years
    This will definitely work for our requirement. On Chrome 91 there was no info about eml files being malicious but on Edge 96 it shows a warning. The eml file works with Outlook version 2111.