Customizing mailto: Links

If you’ve ever wondered how to customize a mailto: link, getting it to include your own subject line, list of recipients, cc or bcc someone, and pre-populate a message in the email body… look no further.

First, let’s look at a standard mailto: link.

Advertisement

<a href="mailto:onecooldude@gmail.com">onecooldude@gmail.com</a>

Example

Nothing special there. When you click that link, it opens up the user’s default mail program, and will populate onecooldude@gmail.com in the TO field.

mailto: link with subject line

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.">onecooldude@gmail.com</a>

Example

This would send an email to onecooldude@gmail.com with the subject line of “Hey Dude. You’re Cool.”

mailto: link CC & BCC fields

NOTE: As soon as you add a 2nd parameter (“subject” was our first parameter, now we’re adding “cc” and “bcc”), you need to separate all your parameters with an ampersand (&). You begin your parameters, after the mailto:onecooldude@gmail.com, with a question mark (?), but use ampersands (&) to separate parameters after that.

Adding CC & BCC fields is as simple as adding a subject. For multiple emails, separate each email with a comma.

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com&bcc=invisibledude@gmail.com">onecooldude@gmail.com</a>

Example

Adding multiple emails for these fields would look like this:

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com,thirddude@gmail.com,fourthdude@gmail.com&bcc=invisibledude@gmail.com,ghost@gmail.com">onecooldude@gmail.com</a>

Example

mailto: link body content

Now for the really cool part: Adding a message in the email body. Again, it’s just as easy as before, but be careful of your character encodings. We are using the body parameter. Here’s an example of a mailto: link with subject, body, cc & bcc fields.

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com&bcc=invisibledude@gmail.com&body=Your+awesome+message+goes+here.%0D%0A%0D%0AThis+is+on+a+new+line.+Go+to+http%3A%2F%2Fwww.google.com%2F.">onecooldude@gmail.com</a>

Example

Blank TO field. Let the user enter the email address.

If you want to let the user type in the TO, CC or BCC fields, you can leave the mailto: blank, like this:

<a href="mailto:?subject=whatever&body=whatever">Email Someone</a>

Example

Character Encoding

Make sure you encode all special characters. Common character encodings are below, or you can use Eric Meyer’s URL encoder tool. If you would rather learn what all the character encodings are, you can use this resource.

Common character encodings

  • space = %20 or + (either one works)
  • line break / carriage return = %0D%0A
  • question mark = %3F
  • / (forward slash) = %2F
  • : (colon) = %3A

You do not need to encode commas (,) or periods (.).

Dave Warfel

Bio coming soon...

57 thoughts on “Customizing mailto: Links

  1. Michael,

    If the image is hosted on a website somewhere, you could include the URL in the body of the email. Most email clients will automatically link it up to the image. But doing it this way WILL NOT include the image as an attachment. Your code would look like this:

    href="mailto:?subject=whatever&body=Some+text+here.+Now+a+link+to+the+image%3A+http%3A%2F%2Fwww.url.com%2Flink%2Fto%2Fimage.jpg"

    There is/was an “attachment” parameter at one time, but it was never secure, and therefore is not reliable. I’ve never heard of someone using it successfully. You can get out this post for ideas, though.

  2. This is great! Do you know if it’s possible to include hypertext within the body of the email? I wrestled with it for a little bit but then decided the quickest fix would be to just use the URL rather than hypertext.

  3. Bryan, yes, you can include a hyperlink. You just need to encode the <a> tags. Your code would look like this:

    href="mailto:?subject=whatever&body=Here%20is%20a%20%3Ca%20href%3D%22http%3A%2F%2Fwww.google.com%22%3Elink%20to%20Google%3C%2Fa%3E."

    You can enter your HTML code into this tool, and it will spit out the encoding for your links.

  4. I tried entering a hyperlink with encoded tags and url but the html was still read by the email client (google) as actual text instead of making it a clickable link. Is there a way to make it clickable?

  5. I created a mailto link, with TO, CC, Subject and Body. The link works great when I click on it from Firefox. However, when I click from IE, I just get a blank page, it does not bring up my mail client and open the message in a compose window. Any idea what I’m doing wrong?

  6. Gemma — Unfortunately not. Because the body of a mailto: link is rendered in text/plain format, there’s no way for you to tell the email client to render it as HTML.

    Chirag — You can enter any HTML character into this tool and click “Encode.” That will give you the code to use for that character.

    Lisa — I’m guessing it has something to do with the default email clients you have setup for each browser. Here’s a great article that explains how to change the default email client for both Firefox and IE.

  7. thanks for the article Dave.

    I’m having a problem with the mailto: links that get forwarded or reply FROM the gmail ios App. The links get broken and some sort of weird javascript is added (something like ‘javascript: _e(..cvml…’

    Have you come across this issue?

    P

  8. Just wish to say your article is as astounding. The clearness
    in your post is just spectacular and i could assume you’re
    an expert on this subject. Fine with your permission allow me to grab your RSS feed to
    keep up to date with forthcoming post. Thanks a million and please continue the
    enjoyable work.

  9. Hi Dave!
    Great stuff – appreciate the section on how to add a body to your email.
    Taking it one step further, I wanted to embed a quick table for an inventory request… is there a way of creating a grid as part of the email body?

    Thanks!!

  10. Ernesto,

    Unfortunately, you cannot use html code in mailto: links. However, you could make it look like a table in plain text. Something like this:

    <a href="mailto:?subject=whatever&body=column1%20%20%20%20%20%20%20column2%20%20%20%20%20%20%20column3%0D-----------------------------------------%0Drow1%20%20%20%20%20%20%20%20%20%20%20%20row2%20%20%20%20%20%20%20%20%20%20%20%20%20row3">link</a>
  11. Thanks for this post. I just set up a link on a blog post to help people share my blog via email. I’m blogging in such a small niche, I need all the help I can get spreading the word about it!! Thanks for your help!

  12. Dave,

    Thanks. The “+” signs show up in the subject & body for MAC OS X’s mail client “Mail”. Should I replace them with spaces or %20? Is this the expected behavior? Or were you expecting normal spaces? Do you know how %20 or spaces versus “+” signs might effect other clients?

    Best,
    Mike

  13. Hi Mike,

    You should use %20, not a space.

    I did not realize that Apple Mail would not render the + sign as a space. And unfortunately, I’m not sure about other email clients. I’d have to run tests to figure that out, and don’t quite have the time right now to do so.

    Thanks for bringing this up, as it could be helpful to other readers.

  14. Impressive stuff, Dave! I knew about the subject but did not know you could CC and BBC and also Body text. 😮

    Is it possible to put up to 6 lines of text in the body? Like a sort of unordered list or just plain 6 different lines of text?

    Thank you so much for this post, if you find time to answer that would be super awesome too. 🙂

    PeTe

  15. Hi Pete,

    Because of how different email clients render (or don’t render) HTML code, I’d recommend you play it safe and use line breaks, along with dashes, to create your list of 6 things. It would look something like this:

    href="mailto:?body=Here%20is%20a%20list%20of%203%20items%2C%20all%20on%20their%20own%20line%3A%0A%0A-%20item%201%0A-%20item%202%0A-%20item%203
  16. John,

    There is no simple way to get the URL of the current page using HTML. However, you could use javascript, or depending on what language your site is written in, a server-side language like PHP.

    Tutorial for using javascript: https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

    Tutorial for using PHP: http://stackoverflow.com/questions/6768793/get-the-full-url-in-php

    *NOTE: Both methods could have security implications, so be careful.

  17. Cheers Dave,

    That worked a treat. Although they have now decided that they are happy with a contact form after all! Grrr. …lol

  18. Is there a way to embed the result of a form field in the body of a message using mailto?

  19. Hi Paul,

    Not with straight HTML, no. You’ll have to use a server-side language or javascript to achieve this.

    If your site is in PHP, you could use the $_GET or $_POST superglobals. A quick tutorial can be found here:

    http://stackoverflow.com/questions/13447554/how-to-get-input-field-value-using-php

    Then you’d use the same syntax as described above to insert something into the body of an email, and wherever you want the value from the form to appear, you’d use this instead: <?php echo $_POST['nameofinput']; ?>

    I think the mailto link would need to appear on a page AFTER the form has just been submitted. Not sure if it’ll work pre-submission.

  20. Hi Dave,

    Do you know what the character limitations are in the body copy when sending an email from a website when you are using IE8?

    Your help is greatly appreciated!

  21. Nice post. What I’m really interested to know is, anyone figure how to get the body content to prepend to the email signatures?

  22. Dear Dave!

    I know that I found very-very useful informations in your post, but to tell the truth I don’t know where to embedd your codes to fit for my needs.

    I have WP platform with Avada theme and I’m using it’s built-in sharing box with social sharing and email-sharing also.

    1. I would like to set your codes into this built-in email-sharing option. How can I do that?
    2. Maybe I would try for a mail-to-me icon also, where can I set that?

    Thank you for your reply!

    A.

  23. Hi Dave ,
    Is there any parameter in mailto to set email client(gmail,outlook etc .) to open after clicking mailto???
    thanks

  24. @Angela — I have not worked with the Avada theme, so I can’t be certain about my answer here, but… from the themes I have worked with, if there’s a built-in email sharing option, you likely CANNOT apply any of this code to it. Typically, theme’s like Avada are designed to do the email sharing code for you, and not give you an easy way to edit it (aside from creating a child theme and editing the theme code).

    The most common place to implement custom mailto: links is in the main content area of a page or post.

  25. @Rahul — No, and I don’t think we (as site designers/owners) will ever have the ability to pre-determine an email client. That is a preference that should belong with the end user, and thus, only the end user can determine which email client they want to use.

  26. Thanks Dave for info.
    I have an Outlook HTML email template that i send out with variables(i.e. fields below) that get populated from my system (database) when Outlook email is created.
    – {contact_firstname} = first name of person email is being sent to
    – {contact_surname} = last name of person email is being sent to
    – {user_email} = my email address
    I then have a button in this email which when clicked on (using mailto) opens a new (reply) email which should populate the To and Subject of the reply email.
    I know how to do the subject field but the To field just populates with my field {user_email} instead of my email address.
    HOW or what variable can i use as i just want my email address to be populated

  27. Hmm, according to the code you mentioned at the top, using {user_email} seems like it should insert your actual email address for the “to” part of the mailto: link.

    If you can post the code you’re using for your HTML email template (or at least the parts of it that contain the variables & mailto: link) I’d be happy to take a look.

  28. My WordPress site contains many vintage items, which the visitors can enquiry about. Is it possible to automatically include the reference number for each item in the subject line?

    When I create a new item in WordPress the reference number for each item is entered into a text box and it has it own heading…

  29. Henrik — It depends where/how the reference number is stored. If it’s stored in a custom field, then you can add some code to the template file that displays each product, and use PHP to retrieve the custom field value (which would be the reference number).

    Let’s say your reference number was stored in a custom field named “reference_number”. You could do something like this:

    <a href="mailto:youremail@gmail.com?subject=Reference+Number+<?php echo get_post_meta( $post->ID, 'reference_number', true ); ?>">Enquire About This Item</a>

    You’d have to use this code within the loop in your template file. You can’t run PHP code in your actual post content area (that you edit within WordPress).

  30. Thanks for this awesome post! I was finally able to create a mailto link with multiple emails, a bcc, a subject, and a body that works in gmail and outlook! Thank you!

  31. @Rajeesh — Unfortunately, no. The “FROM” field will always be the default email address that is setup in whatever email program you have set to open mailto: links.

    For example: I have mailto links set to open in gmail by default. I’m logged into my dave@escapecreative.com account. Any mailto: link I click will always default to being FROM dave@escapecreative.com.

  32. Hi Ashleigh – You just need to encode the html for your table, and include it after the &body= portion of your link. Take the HTML code for your table, enter it into this tool, and click “encode.” Then use that code in the &body= portion of your link.

    I did it with a super-simple table and got this:

    %3Ctable%3E%3Ctr%3E%3Ctd%3Ecol1%2Crow1%3C%2Ftd%3E%3Ctd%3Ecol2%2Crow1%3C%2Ftd%3E%3C%2Ftr%3E%3Ctr%3E%3Ctd%3Ecol1%2Crow2%3C%2Ftd%3E%3Ctd%3Ecol2%2Crow2%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E

    So your link would look like this:

    someone@gmail.com

  33. I take that back, Ashleigh. Sorry, I was mistaken. HTML code will not render in mailto: links. You could do something like this as a workaround:

    link

    <a href="mailto:?subject=whatever&body=column1%20%20%20%20%20%20%20column2%20%20%20%20%20%20%20column3%0D-----------------------------------------%0Drow1%20%20%20%20%20%20%20%20%20%20%20%20row2%20%20%20%20%20%20%20%20%20%20%20%20%20row3" rel="nofollow">link</a>
  34. Hi – I’m not sure if it’s possible but I am trying to prompt (in ios) to attach a file from the user’s photo gallery. So far I’ve been unsuccessful in finding any info about it so I assume it’s not possible.
    in theory: it would open a new email – then (or at same time) open their gallery app for them to select a photo – where after selection it would go back to the email with the image in the body.

    Thanks

  35. Hi is it possible to do something like this

    mailto:”Name Here”?subject=subject&body=body

  36. Hi Dave,

    Love the help and the solutions you share! I’m wondering if there is a way to get an unordered list to display in the “body” when using a mailto tag?

  37. I just got a response; but, I must be missing something. I was looking for help on “how to” add a bulleted list into the body when using a “mailto” tag. Can you tell me if it is possible and if so can you send me a sample of how to do it?

    THANKS!

  38. Sheri — I don’t think you can do that. The best that you could do is use the asterisk (*) symbol as your bullet point, and then use the line break code. So you’d have something like this:

    <a href="mailto:sheri@gmail.com?subject=Unordered+List&body=*Item 1%0D%0A*Item 2%0D%0A*Item 3%0D%0A" rel="nofollow">sheri@gmail.com</a>

  39. This is great Dave. Thanks for your effort to help us newbies with this stuff. Now the other shoe.

    Is it possible to place the cursor at the end of the body text when you’re prefilling body? I’m sending an email to users who click on a link to make changes to their directory listing and would like to make it as easy as possible by putting the cursor at end of prefilled body text so they can type their comments about their listing.

    right now it stays at the beginning of the body. Thanks.

  40. I am trying to embed a link into a powerpoint presentation that I’m using as a module. The link is to a survey for users to complete. When I put the code for the prepopulated email into the hyperlink for the button I created on the slide, it works. However, when I save the presentation as a powerpoint show so it opens full screen for the user, the coding for the body gets stripped out and the body of the email appears as one paragraph. Do you know why this would be happening?

Leave a Reply

Your email address will not be published. Required fields are marked *