mailto link with HTML body

Question

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:me@me.com?subject=Me&body=<b>ME</b>">Mail me</a>

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

Had exactly the same thing in mind and studied it for a while. I was trying to have an embedded remote 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 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., Oct 02 '12 at 05:34
The best I could find came from this page, http://www.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. — Stu Andrews, May 05 '14 at 04: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, Nov 08 '17 at 23:07

score 471 · Accepted Answer · edited Oct 07 '21 at 07:34

471

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.

edited Oct 07 '21 at 07:34

Community

1
1

answered Nov 16 '12 at 11:47

Alfonso Marin

4,957
2
14
7

9

If you're disappointed by this answer, please keep reading: https://stackoverflow.com/a/46699855/256272 (tl;dr .eml files) – Joe May 24 '18 at 05:20

score 119 · Answer 2 · answered May 09 '12 at 16:38

119

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:x@y.com?body=" + encodeURIComponent(formattedBody);
window.location.href = mailToLink;

answered May 09 '12 at 16:38

Oliver Pearmain

19,885
13
86
90

1

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 Sep 19 '12 at 07: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 Sep 05 '13 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 Nov 12 '14 at 21:42
I tried \b for bolding a text. It was not working. What are the other escape sequences supported? – Prabakaran Raja Nov 05 '15 at 14:31
2

I liked this approach, here's a jsfiddle to see it in action: https://jsfiddle.net/oligray/5uosngy4/ – Oliver Gray Nov 20 '15 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 Apr 05 '16 at 09:09
In Rails 5, the `u` or `url_encode` methods will convert newlines and make your string generally URL-safe. https://stackoverflow.com/a/2353752/4686951 – Ben Amos Dec 27 '17 at 21:53

score 81 · Answer 3 · answered Oct 12 '17 at 01:11

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 <user@domain.demo>
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);
})();

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, Dec 06 '17 at 20:58
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, Mar 12 '18 at 22:25
what about on android and iOS? i don't believe .eml files open unless you have a reader app — Akin Hwan, Jul 28 '20 at 17:29
This solution is explored on another similar [question](https://stackoverflow.com/questions/27951843/use-javascript-to-create-an-html-email-in-microsoft-outlook/27971771#27971771). 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, Sep 02 '20 at 19:12
does not work with Outlook 16 and FF 78 nor IE 11, but with Edge 90. — Andreas Covidiot, May 11 '21 at 15:11
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 https://stackoverflow.com/questions/67523117/image-size-reduced-when-base64encoded-image-is-embedded-in-rich-email-containing — AnitaS, May 17 '21 at 10:49
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. — Alex K, Dec 13 '21 at 13:01

score 71 · Answer 4 · answered Feb 23 '12 at 11:04

71

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@address.com?subject=Hello world&body=Line one%0DLine two">Email me</a>

answered Feb 23 '12 at 11:04

Andy

2,141
1
17
9

2

So "%0D" is newline. What is an encoded tab's code equivalent? – wide_eyed_pupil Sep 19 '12 at 07: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 [http://www.asciitable.com/index/asciifull.gif]. The control characters are from 1 through 31. @wide_eyed_pupil – Jim Bergman Dec 07 '12 at 06:16
3

Any signature seems to be removed when doing this. – Valentin Despa Jul 10 '13 at 07:56
%0A would be \n – Klemen Tusar Oct 14 '16 at 13:09
8

That's not an HTML body! – Chloe Oct 09 '17 at 18:04
Hex ASCII code for carriage return char, that's what %0D is. This is not HTML, but ASCII codes – quirimmo Feb 29 '20 at 19:16
1

Beautiful, also works inside confluence Insert Link on a page. – Vinay Oct 26 '20 at 19:52

score 38 · Answer 5 · edited Dec 18 '14 at 14:07

38

Some things are possible, but not all, say for example you want line breaks, instead of using  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>

edited Dec 18 '14 at 14:07

Volker E.

5,911
11
47
64

answered Jan 28 '14 at 20:40

Stephen Kaufman

474
5
11

11

That isn't HTML... still text. – Brad Dec 02 '14 at 04:22
not if you format your email using $mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n"; – Stephen Kaufman Dec 09 '14 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 Dec 17 '14 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 Nov 06 '19 at 17:48

score 16 · Answer 6 · answered May 17 '12 at 14:38

It is worth pointing out that on Safari on the iPhone, at least, inserting basic HTML tags such as , , 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.

Yes, it does work perfectly to add simple bold, italic tags - in iOS anyway. — Fattie, Aug 03 '16 at 16:40
On iOS I cannot send correct email with - in Gmail I see base64 inside my message. — Vitaly Zdanevich, Feb 06 '19 at 09:21

Peter · Answer 7 · 2022-10-18T13:00:52.483

12

Thunderbird supports html-body: mailto:me@me.com?subject=Me&html-body=ME

edited Oct 18 '22 at 13:00

answered Sep 05 '19 at 21:57

Peter

3,322
3
27
41

score 1 · Answer 8 · answered Jul 29 '22 at 13:19

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');
})

Hitting paste defeats the purpose of the mail link's body param. — Mark Richman, Jun 22 '23 at 15:12

Miguel Ballén · Answer 9 · 2019-06-21T13:44:46.330

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

mailto link with HTML body

9 Answers9

Linked

Related