HTML email links code – How to add a subject, body text and other cool stuff

html email links code - step-by-step guide to href email links

This post will explain how to create elaborate HTML email links for your website or blog, including adding an email subject and body text. Upon doing some research for this post I found there were very few resources online that cover in detail the advanced coding tricks you can use to customise email links using HTML. So here’s to putting the record straight…

What is an email link?

When I refer to HTML email links I mean web links, that upon clicking, automatically open up a person’s email application of choice on their computer, tablet or smart phone. In its basic form it will just do that and pre-fill the recipient’s email field only. However, with a bit of coding knowledge you can customise these hyperlinks to also pre-fill other information including:

  • the subject
  • the body text
  • the CC (carbon copy) field
  • the BCC (blind carbon copy) field

The basic code

The basic code to create an email link in HTML looks like this:

<a href="mailto:[email protected]">Your visible link text</a>

The visible link text is sandwiched between two pieces of code that first open then close an anchor (link) element. The hypertext reference (href) always starts with mailto: 

Let break this down…

1. Start with your link text ie. Email me
2. Sandwich it with an opening and closing anchor element.

<a>Email me</a>

3. Add a hyperlink reference command and within quotation marks add an email address.

<a href="mailto:[email protected]">Email me</a>

Hope that wasn’t too painful. Read on to take it to the next level.

How do I create an email link in WordPress?

In order to create this basic code within your WordPress website you follow the same procedure for creating a regular web link. Highlight your text, click the link tool button Screen shot 2013-04-01 at 11.03.00 and then enter mailto: followed by the email address (without any character spaces).

mailto:[email protected]

Adding a custom email subject header?

HTML email links with a subject

To pre-fill a subject header you add ?subject= followed immediately by your subject.

<a href="mailto:[email protected]?subject=Hello%20Zaposphere">Your visible link text</a>

Hang on a sec… what’s that other bit of code %20?

Character spaces are not allowed within the href attribute so we replace each space with %20 

Here’s another example:

<a href="mailto:[email protected]?subject=Yo%20Zaposphere%20I%20love%20your%20work">Your visible link text</a>

OK, I’ve got it. How do I add body text to my HTML email links?

To pre-fill the email with body text you add ?body= for example:

<a href="mailto:[email protected]?body=Yo%20Zaposphere%20I%20love%20your%20work">Your visible link text</a>

How do I combine both subject and body text?

Combining multiple commands beyond the email address requires just one question mark ? at the start, which commences the query. You then add an ampersand & between each command. For example:

<a href="mailto:[email protected]?subject=Hello%20Zaposphere&body=Yo%20Zaposphere%20I%20love%20your%20work">Your visible link text</a>

So the first command starts with a ? and subsequent commands start with a &

What other email fields can I pre-fill?

As mentioned earlier you can prefill:

  • the subject ( subject= )
  • the body text ( body= )
  • the CC (carbon copy) field ( cc= )
  • the BCC (blind carbon copy) field ( bcc= )

The commands can be in any order. The majority of email client applications support all these commands however not all will. If a command can’t be used, your HTML email links will still work, it’ll just bypass the command.

Let break things down into bite sized chunks

1. Start with your visible text

Email me

2. Open an anchor point before the visible text

<a href="">Email me

3. Close an anchor point after the visible text

<a href="">Email me</a>

4. Add an email address command to your hyperlink reference attribute

<a href="mailto:">Email me</a>

5. Add an email address

<a href="mailto:[email protected]">Email me</a>

6. Add a subject command

<a href="mailto:[email protected]?subject=">Email me</a>

7. Add your subject

<a href="mailto:[email protected]?subject=Hello%20you">Email me</a>

8. Add a body text command

<a href="mailto:[email protected]?subject=Hello%20you&body=">Email me</a>

9. Add your body text

<a href="mailto:[email protected]?subject=Hello%20you&body=This%20blog%20post%20has%20really%20helped%20me">Email me</a>

10. Keep adding other commands if you like

<a href="mailto:[email protected]?subject=Hello%20you&body=This%20blog%20post%20has%20really%20helped%20me&[email protected]">Email me</a>

Here is the code in action → email link

If you’re using WordPress…
Highlight your visible link text. Click the link button. Then just add the hyperlink reference code between the quotation marks. ( starting with mailto: )

Tip
Make sure there are no character spaces within the href quotation marks.

 

Other cool customisations that most other websites don’t mention!!

As well as special codes to replace character spaces there are a whole host of codes that can be used to add other characters to spice up your body text.

Common paragraph characters

Character Code
Adding a single carriage return (line break) %0D
Adding a double carriage return %0D%0D
Full stop  . %2E
Comma  , %2C
Exclamation mark  ! %21
Question mark  ? %3F
Speech marks  “ %22
Single inverted comma  ‘ %27
Ampersand  & %26

Less common characters

Character Code
@ %40
Opening parenthesis / bracket  ( %28
Closing parenthesis / bracket  ) %29
Colon  : %3A
Semi colon  ; %3B
Hyphen / Dash  – %2D
Forward slash  / %2F
Star  * %2A
Plus sign  + %2B
Equals sign  = %3D
Underscore  _ %5F
Hash symbol  # %23
Tilde  ~ %7E

With a bit of practice and a lot of patience you’ll soon become an ascii ninja. ;)

ascii-southpark

Snoopy image using keyboard text type (ASCII characters)

Google search ASCII art for more like this.

I hope you found this article useful. If you did please consider sharing it or adding a comment below.

Best,
The Zaposphere team

Have our latest posts delivered straight to your inbox.

Comments 39

    1. Post
      Author
  1. Is it possible for the subject text to get its value from somewhere else on the current web page. Same question for body text?

    1. Post
      Author

      This isn’t possible using with limits of basic HTML. I’m not saying impossible, but definitely not easy. You’d probably need to hire a scripting ninja.

    1. Post
      Author
  2. Thanks so much for your help!
    The tip with “Subject line” definitely was a new thing for me :)
    (I’m prepared to launch my very first website. Very excited!!
    Thanks again for the great post!!

    1. Post
      Author
      1. By the way,
        one error I keep getting…
        is in the body of the email – I keep getting this:

        “msg=Hello,
        this is a test!”

        Do you know, why do I keep getting this “msg=” indicator?..
        (obviously, I would love just to have a message, without the “msg=”) :)

        Thank you!

        P.S. This is the code that I have for the message itself:

        Message:

  3. This was amazingly helpful – but I was unable to add tthe bcc field. Everytime I tried it stopped working . I put cc=email.com&bcc=email2.com But it still didn’t work any ideas?

    1. Post
      Author

      Hi Robyn. I’ve done a quick test and it is possible to include both cc and bcc commands. Although I can’t be sure what you are doing wrong :(

      Email link with cc and bcc

      Here’s the code:

      <a href=”mailto:[email protected]?subject=Hello%20you&body=This%20blog%20post%20has%20really%20helped%20me&[email protected]&[email protected]”>Email with cc and bcc</a>

      Perhaps your & characters are incorrectly changing to this &amp; ?

  4. Hi,
    The single carriage return is not making my text in the body move to the next line, neither is a double carriage return?

    1. Post
      Author
  5. Thank you, for all this.

    Is there a way to make the “cursor” / point of insertion be after the last character in the “body”?

    1. Post
      Author
  6. Do you guys know the way on how to insert HTML tags in email body…I tried but when mail opens it shows like a string and not a hyperlink

    1. Post
      Author

      Hi Nitin. In order to create an HTML email you need either specialist software or to use an online service like MailChimp. If you are just wanting basic hyperlinks however, these should be easily achievable by pasting in the complete URL (including the “http://” bit) directly into the email body. You shouldn’t require additional HTML code for it to work.

  7. Hello Zaposphere,

    For the body of the email, I like to add in large body contents (about 10 paragraphs / section) and attachments.
    Is this possible to do via the body?
    What would be the attachment querystring parameter?

    Thanks,

    Newbie!

    1. Post
      Author

      Thanks for your comment Newbie!
      Multiple paragraphs are certainly possible, however attachments are not. :(
      I’d recommend using the code purely for short and simple emails.

  8. This syntax works for me perfectly on major mail clients, but not in case of gmail… Any way to get it gmail friendly or its just because GMAIL uses HTML for mail body?

    1. Post
      Author
  9. Fantastic article! Has worked perfectly for me for a while now. Just one quick question though.

    How do I go about underlining specific lines of the body text in the email? My template has 3 lines of body text but on the second two need to be underlined.

    1. Post
      Author
    1. Post
      Author
  10. Thanks for this information! Very helpful. Particularly the paragraph characters for adding carriage returns.

  11. Extremely helpful! Saved me lots and lots of time. Is it possible to have my existing outlook signature populate in the email when I click the HTML link and open a new message window?

  12. This is awesome! When I do this and add the %0D to add a line break, it keeps removing the %0D so the text runs together in one line. Anyone know how to fix this?

    1. Post
      Author
  13. Hi Zaposphere. Is it possible we can insert date (current date) or time in the subject or body that automatically reset with the time calendar?

    1. Post
      Author
  14. This is such a great resource. Is it possible to add an image to the body text? Or would this be considered an attachment?

    1. Post
      Author
  15. Very useful and easy to follow. Many thanks!

    With e-mail phishing and farming, I wonder if there is a straightforward way to avoid those problems by reforming the e-mail addresses?

    1. Post
      Author

      Hmm… good question. Unfortunately there isn’t a way to hide or obfuscate the email address using this method. Using a regular contact form gets around this problem but you’ll still need some bot protection to avoid spam submissions.

Ask a question or write a comment here…