412

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.

3
  • 1
    Had exactly the same thing in mind and studied it for a while. I was trying to have an embedded remote <img> into the message body. The mailto instruction needs to be URL-encoded in order for it to work. Result with thunderbird was that the HTML body appeared literally, with all its <img> instructions and all. I guess this is a safety issue in thunderbird and most mail clients - they parse incoming mailto-content so that it does not do anything suspicious.
    – Hannes R.
    Commented Oct 2, 2012 at 5:34
  • 5
    The best I could find came from this page, zaposphere.com/html-email-links-code .. Down the bottom gives a list: "Other cool customisations that most other websites don’t mention!!" Helped me out a lot. Commented May 5, 2014 at 4:22
  • You can set each and every part of an email with basic text. With regards to the limitations that html formatting is not possible, here's a tool I built to make customizing the various fields in a mailto dead simple: mailto.now.sh
    – Dawson B
    Commented Nov 8, 2017 at 23:07

9 Answers 9

480

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.

1
123

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;
7
  • 1
    Can email clients run embedded Javascript? The OP says this is an email not a webpage on which the mailto: link will be. Commented Sep 19, 2012 at 7:27
  • 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
    – FireDragon
    Commented Sep 5, 2013 at 20:38
  • 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.
    – Luke
    Commented Nov 12, 2014 at 21:42
  • 2
    I liked this approach, here's a jsfiddle to see it in action: jsfiddle.net/oligray/5uosngy4 Commented Nov 20, 2015 at 10:32
  • 5
    You can also just use %0A for a linebreak, so you don't need to do it from JavaScript.
    – Dirk Boer
    Commented Apr 5, 2016 at 9:09
88

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

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

const create = document.getElementById("create");
const textbox = document.getElementById("textbox");
create.addEventListener(
  "click",
  function () {
    const link = document.getElementById("downloadlink");
    link.href = makeTextFile(textbox.value);
    link.style.display = "block";
  },
  false,
);
9
  • 15
    Now that is a fancy idea
    – Greg
    Commented Dec 4, 2017 at 21:31
  • 2
    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
    – pmarreck
    Commented Dec 6, 2017 at 20:58
  • 2
    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.
    – Collierton
    Commented Mar 12, 2018 at 22:25
  • 12
    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
    – yougotiger
    Commented Sep 2, 2020 at 19:12
  • 1
    does not work with Outlook 16 and FF 78 nor IE 11, but with Edge 90. Commented May 11, 2021 at 15:11
74

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>
8
  • 2
    So "%0D" is newline. What is an encoded tab's code equivalent? Commented Sep 19, 2012 at 7:29
  • 4
    %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 Commented Dec 7, 2012 at 6:16
  • 3
    Any signature seems to be removed when doing this. Commented Jul 10, 2013 at 7:56
  • 9
    That's not an HTML body!
    – Chloe
    Commented Oct 9, 2017 at 18:04
  • 1
    Beautiful, also works inside confluence Insert Link on a page.
    – Vinay
    Commented Oct 26, 2020 at 19:52
39

Some things are possible, but not all, say for example you want line breaks, instead of using <br />use %0D%0A

Example:

<a href="mailto:?subject=&body=Hello,%0D%0A%0D%0AHere is the link to the PDF Brochure.%0D%0A%0D%0ATo view the brochure please click the following link: http://www.uyslist.com/yachts/brochure.pdf"><img src="images/email.png" alt="EMail PDF Brochure" /></a>                        
4
  • 11
    That isn't HTML... still text.
    – Brad
    Commented Dec 2, 2014 at 4:22
  • not if you format your email using $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; Commented Dec 9, 2014 at 16:30
  • 14
    @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.
    – Narxx
    Commented Dec 17, 2014 at 12:08
  • 1
    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.
    – hamish
    Commented Nov 6, 2019 at 17:48
17

It is worth pointing out that on Safari on the iPhone, at least, inserting basic HTML tags such as <b>, <i>, and <img> (which ideally you shouldn't use in other circumstances anymore anyway, preferring CSS) into the body parameter in the mailto: does appear to work - they are honored within the email client. I haven't done exhaustive testing to see if this is supported by other mobile or desktop browser/email client combos. It's also dubious whether this is really standards-compliant. Might be useful if you are building for that platform, though.

As other responses have noted, you should also use encodeURIComponent on the entire body before embedding it in the mailto: link.

2
  • Yes, it does work perfectly to add simple bold, italic tags - in iOS anyway.
    – Fattie
    Commented Aug 3, 2016 at 16:40
  • On iOS I cannot send correct email with <img src='mybase64'/> - in Gmail I see base64 inside my message. Commented Feb 6, 2019 at 9:21
14

Thunderbird supports html-body: mailto:[email protected]?subject=Me&html-body=<b>ME</b>

1
  • 3
    FWIW As of 2024, neither Apple Mail, Airmail, nor Gmail web client support this. Commented Mar 28 at 17:47
1

Whilst it may not be possible within the parameter of the URL, there is a cheeky solution which allows full HTML. The concept is that you have a hidden element on the page (I am using Bootstrap and Jquery in the example below) which is temporarily revealed and the HTML copied (as per here: How to copy text from a div to clipboard). Following that, you redirect the user to the Mail link so in effect all they then have to do is hit Paste within their designated mail program. I've only tested this on Linux/Thunderbird but the paste also works into Gmail web.

<div id="copyEmailText" class="d-none"><p><strong>This is some HTML</strong>. Please hit paste when your email program opens.</p>

function copyDivToClipboard(element) {
    var range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges(); // clear current selection
    window.getSelection().addRange(range); // to select text
    document.execCommand('copy');
    window.getSelection().removeAllRanges();// to deselect
}

$('#copyEmail').on('click',function(){
    $('#copyEmailText').toggleClass('d-none');
    copyDivToClipboard($('#copyEmailText')[0]);
    window.location.href = 'mailto:?subject=Email subject text';
    $('#copyEmailText').toggleClass('d-none');
})
1
  • 1
    Hitting paste defeats the purpose of the mail link's body param. Commented Jun 22, 2023 at 15:12
0

Anybody can try the following (mailto function only accepts plaintext but here i show how to use HTML innertext properties and how to add an anchor as mailto body params):

//Create as many html elements you need.

const titleElement = document.createElement("DIV");
titleElement.innerHTML = this.shareInformation.title; // Just some string

//Here I create an <a> so I can use href property
const titleLinkElement = document.createElement("a");
titleLinkElement.href = this.shareInformation.link; // This is a url

...

let mail = document.createElement("a");

// Using es6 template literals add the html innerText property and anchor element created to mailto body parameter
mail.href = 
  `mailto:?subject=${titleElement.innerText}&body=${titleLinkElement}%0D%0A${abstractElement.innerText}`;
mail.click();

// Notice how I use ${titleLinkElement} that is an anchor element, so mailto uses its href and renders the url I needed

Not the answer you're looking for? Browse other questions tagged or ask your own question.