Can I set subject/content of email using mailto:?
Asked Answered
H

15

1083

Is it possible to set the subject/content of email when I use mailto:?

Howrah answered 24/1, 2011 at 12:41 Comment(2)
related css-tricks.com/snippets/html/mailto-linksBregma
You can set each and every part of an email. Here's a tool I built to make it dead simple: mailto.now.shMew
A
1723

Yes, look all tips and tricks with mailto: http://www.angelfire.com/dc/html-webmaster/mailto.htm

mailto subject example:

<a href="mailto:[email protected]?subject=free chocolate">example</a>

mailto with content:

<a href="mailto:[email protected]?subject=look at this website&body=Hi,I found this website and thought you might like it http://www.geocities.com/wowhtml/">tell a friend</a>

As alluded to in the comments, both subject and body must be escaped properly. Use encodeURIComponent(subject) on each, rather than hand-coding for specific cases.

As Hoody mentioned in the comments, you can add line breaks by adding the following encoded sequence in the string:

%0D%0A // one line break
Aldrin answered 24/1, 2011 at 12:42 Comment(14)
is it possible to use HTML for the body?Howrah
That is entirely client specific. In the general case, no.Hairless
You may be able to add HTML into the body if you URL encode the entire string. You'd need to test and make sure it works well in a majority of email clients.Jugum
Just as a reference: you don't have to htmlescape the subjectWestberg
Does anyone know a reference that outlines the mail client support for this?Mata
Note that W3C requires that you encode your string following those rules : Characters should be represented in NFC and spaces should be escaped as %20.Ulcer
That angelfire.com link is unavailable. Can you find a replacement for it? If not, it may be removed from the answer. What information were there?Paxton
i can acsess the link, what you seeAldrin
You know this angelfire link is probably 15 years old, right?Coincide
is there still a 256 char limit to the mailto string?Damara
+one for the retro Angelfire and Geocities links that gave me a huge rush of nostalgiaWillingham
@Hairless what about the RFC mentioned at: https://mcmap.net/q/53080/-can-i-set-subject-content-of-email-using-mailtoAec
@CiroSantilli Indeed, five years later, client support is considerably more widespread, but still not entirely reliable in my experience.Hairless
Here's a tool that does it all for you(Subject, Body, URL Encoding, Line Breaks) email-link-builder.netlify.comMislay
L
144
<a href="mailto:[email protected]?subject=Feedback for 
webdevelopersnotes.com&body=The Tips and Tricks section is great
&[email protected]
&[email protected]">Send me an email</a>

you can use this code to set subject, body, cc, bcc

Lebrun answered 24/1, 2011 at 12:44 Comment(0)
M
88

I created an open-source tool for making this easy. Enter the strings you want and you'll instantly get the mailto:

mailto.now.sh

💌⚡️ Template full emails in a mailto

enter image description here

Mew answered 21/4, 2019 at 6:53 Comment(3)
Neat, this is an awesome app!Botanical
Hey Dawson, this is a really helpful tool. Thank you for this.Pneumograph
amazing, thanks. saved me the hassle of explaining the technical specifics to a client.Undersea
S
48

The mailto: URL scheme is defined in RFC 2368. Also, the convention for encoding information into URLs and URIs is defined in RFC 1738 and then RFC 3986. These prescribe how to include the body and subject headers into a URL (URI):

mailto:[email protected]?subject=current-issue&body=send%20current-issue

Specifically, you must percent-encode the email address, subject, and body and put them into the format above. Percent-encoded text is legal for use in HTML, however this URL must be entity encoded for use in an href attribute, according to the HTML4 standard:

<a href="mailto:[email protected]?subject=current-issue&amp;body=send%20current-issue">Send email</a>

And most generally, here is a simple PHP script that encodes per the above.

<?php
$encodedTo = rawurlencode($message->to);
$encodedSubject = rawurlencode($message->subject);
$encodedBody = rawurlencode($message->body);
$uri = "mailto:$encodedTo?subject=$encodedSubject&body=$encodedBody";
$encodedUri = htmlspecialchars($uri);
echo "<a href=\"$encodedUri\">Send email</a>";
?>
Sanative answered 28/12, 2016 at 16:18 Comment(1)
Here is a much deeper example for if your email has a URL in it and that URL has stuff that needs to be encoded: #4745388Sanative
L
29

You can add subject added to the mailto command using either one of the following ways. Add ?subject out mailto to the mailto tag.

<a href="mailto:[email protected]?subject=testing out mailto">First Example</a>

We can also add text into the body of the message by adding &body to the end of the tag as shown in the below example.

 <a href="mailto:[email protected]?subject=testing out mailto&body=Just testing">Second Example</a>

In addition to body, a user may also type &cc or &bcc to fill out the CC and BCC fields.

<a href="mailto:[email protected]?subject=testing out mailto&body=Just testing&[email protected]&[email protected]">Third
    Example</a>

How to add subject to mailto tag

Latchkey answered 16/5, 2013 at 2:46 Comment(0)
S
13
mailto:[email protected]?subject=Your+subject
Sulphathiazole answered 24/1, 2011 at 12:43 Comment(2)
My subject is not text. It is a table. How to add that.Metacenter
@Metacenter You cannot put a table on a subject, do you know how email subjects work? Subjects are plain-text strings. The maximum out of the basic stuff you can put on a subject is emojisDistinguished
P
10

I split it into separate lines to make it a little more readable.

<a href="

    mailto:[email protected]

    ?subject=My+great+email+to+you

    &body=This+is+an+awesome+email

    &[email protected]

    &[email protected]

">Click here to send email!</a>
Paulpaula answered 27/1, 2016 at 14:11 Comment(2)
this question was answered 5 years agoFara
and it still is used today when you wanna mail somethingPaulpaula
R
7

Yes:

Use this to experiment with mailto form elements and link encoding.

You can enter subject, body (i.e. content), etc. into the form, hit the button and see the mailto html link that you can paste into your page.

You can even specify elements that are rarely known and used: cc, bcc, from emails.

Romanaromanas answered 19/6, 2015 at 0:28 Comment(3)
Also a very useful feature of this href field composer is the ability to encode all characters to hexadecimal (e.g.: [Test Zõne] becomes %5BTest%20Z%C3%B5ne%5D, this may avoid some spam bots).Bilinear
I mean, if you choose to encode all characters, they are all converted to HTML notation &#x (avoiding some spam bots).Bilinear
This link is dead.Blister
K
6

here is the trick http://neworganizing.com/content/blog/tip-prepopulate-mailto-links-with-subject-body-text

<a href="mailto:[email protected]?subject=Your+tip+on+mailto+links&body=Thanks+for+this+tip">tell a friend</a>
Kremenchug answered 27/10, 2014 at 7:12 Comment(2)
is the + needed instead of spaces? works fine without on gmailDiversity
Link is dead nowFournier
A
5

Yes, you can like this:

mailto: [email protected]?subject=something
Americium answered 24/1, 2011 at 12:43 Comment(2)
I don't think the space should be there?Freed
this should be without space.Servant
H
5

Note that it is not possible to use HTML in the message body, according to RFC 2368:

The special hname "body" indicates that the associated hvalue is the body of the message. The "body" hname should contain the content for the first text/plain body part of the message. The mailto URL is primarily intended for generation of short text messages that are actually the content of automatic processing (such as "subscribe" messages for mailing lists), not general MIME bodies.

Credit: https://mcmap.net/q/54185/-mailto-link-with-html-body

Heated answered 1/8, 2016 at 10:46 Comment(2)
The question is asking how to set the subject and content. It didn't mention formatting. While that is a useful thing to note on an answer, you left out the bit about what is possible and how to achieve it. Without that, this is a comment, not an answer.Connecticut
Jure I really appreciate you putting this as an answer to this question as that is EXACTLY what I needed to find out and was asking myself. So while Quentin thinks this doesn't answer the OP question, it answers mine that I was searching for that brought up this post. Thank you so much Jure!Cryo
A
5

Here's a runnable snippet to help you generate mailto: links with optional subject and body.

function generate() {
  var email = $('#email').val();
  var subject = $('#subject').val();
  var body = $('#body').val();

  var mailto = 'mailto:' + email;
  var params = {};
  if (subject) {
    params.subject = subject;
  }
  if (body) {
    params.body = body;
  }
  if (params) {
    mailto += '?' + $.param(params);
  }

  var $output = $('#output');
  $output.val(mailto);
  $output.focus();
  $output.select();
  document.execCommand('copy');
}

$(document).ready(function() {
  $('#generate').on('click', generate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="email" placeholder="email address" /><br/>
<input type="text" id="subject" placeholder="Subject" /><br/>
<textarea id="body" placeholder="Body"></textarea><br/>
<button type="button" id="generate">Generate & copy to clipboard</button><br/>
<textarea id="output">Output</textarea>
Anton answered 10/10, 2018 at 1:9 Comment(0)
F
2

You just simply need a plain HTML document.

<a href="mailto:[email protected]?subject=This is a subject&body=This is body">Send an email</a>
Floatstone answered 12/5, 2023 at 7:32 Comment(0)
T
1

If you want to add html content to your email, url encode your html code for the message body and include it in your mailto link code, but trouble is you can't set the type of the email from this link from plaintext to html, the client using the link needs their mail client to send html emails by default. In case you want to test here is the code for a simple mailto link, with an image wrapped in a link (angular style urls added for visibility):

<a href="mailto:?body=%3Ca%20href%3D%22{{ scope.url }}%22%3E%3Cimg%20src%3D%22{{ scope.url }}%22%20width%3D%22300%22%20%2F%3E%3C%2Fa%3E">

The html tags are url encoded.

Thorpe answered 29/1, 2016 at 11:54 Comment(3)
Can you also post an example where the body <a href> just has the href and a text between it and the end tag? ThanksCryo
<a href="<same as above>">This is the link text</a> @user1567291Thorpe
This doesn't work. The email client will just show all the html tags as text instead of processing it as a rich text document.Makkah
B
0

for use mailto link dynamically than see below code

        const formConsultation = document.querySelector('form#form-consultation');
        formConsultation.addEventListener("submit", function(evt) {
            evt.preventDefault();
            var targetobj = evt.target;
            var actionUrl = targetobj.action;
            var message = targetobj.message.value;
            if (actionUrl && actionUrl != "#" && message) {
                var newBodyMsg = subject = "";
                var username = targetobj.username.value;
                var useremail = targetobj.useremail.value;

                if (targetobj.subject.value && targetobj.subject.value.trim().length > 0) {
                    subject = targetobj.subject.value;
                }

                if (username.trim().length > 0) {
                    newBodyMsg += "Hi! my name is " + username + ".";
                }
                if (useremail.trim().length > 0) {
                    if (newBodyMsg.length > 0) {
                        newBodyMsg += " & ";
                    }
                    newBodyMsg += "my email address is " + useremail + ".";
                }

                if (newBodyMsg.length > 0) {
                    newBodyMsg += "\n\n ";
                }
                newBodyMsg += message;
                window.open(actionUrl + "?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(newBodyMsg));
            }
        });
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<body>
  <div class="container">
    <form action="mailto:[email protected]" method="get" enctype="text/plain" class="form-consultation" id="form-consultation">
      <div class="mb-3">
        <label class="form-label">Name</label>
        <input type="text" class="form-control" name="username" placeholder="Your Name" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" name="useremail" placeholder="Your Email address" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Subject</label>
        <input type="text" class="form-control" name="subject" placeholder="Subject" required>
      </div>
      <div class="mb-3">
        <label class="form-label">Message</label>
        <textarea cols="30" rows="3" class="form-control" name="message" placeholder="Message" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send A Message</button>
    </form>
  </div>
</body>

OR Using Jquery

$('#form-consultation').submit(function() {
    event.preventDefault(); // this will prevent the default submit

    var actionUrl = $(this).attr('action');
    var message = $(this).find("textarea[name=message]");
    if(actionUrl && actionUrl != "#" && message) {
        var newBodyMsg = subject = "";

        var username = $(this).find("input[name=username]").val();
        var useremail = $(this).find("input[name=useremail]").val();
        if(username.trim().length > 0) {
            newBodyMsg += "Hi! my name is " + username + ".";
        }
        if(useremail.trim().length > 0) {
            if(newBodyMsg.length > 0) {
                newBodyMsg += " & ";
            }
            newBodyMsg += "my email address is " + useremail + ".";
        }

        if (newBodyMsg.length > 0) {
            newBodyMsg += "\n\n ";
        }
        newBodyMsg += message.val();
        window.open(actionUrl + "?subject="+ encodeURIComponent(subject) +"&body=" + encodeURIComponent(newBodyMsg));
    }
    
    return false;
});

NOTE:- run above code in your system. if you are trying to run code here (stackoverflow snippet) than it doesn't work. stackoverflow block it. so please test this code in your local system.

Beyer answered 16/3, 2023 at 11:11 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.