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

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

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@example.com">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@example.com">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@example.com

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@example.com?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@example.com?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@example.com?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@example.com?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@example.com">Email me</a>

6. Add a subject command

<a href="mailto:email@example.com?subject=">Email me</a>

7. Add your subject

<a href="mailto:email@example.com?subject=Hello%20you">Email me</a>

8. Add a body text command

<a href="mailto:email@example.com?subject=Hello%20you&body=">Email me</a>

9. Add your body text

<a href="mailto:email@example.com?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@example.com?subject=Hello%20you&body=This%20blog%20post%20has%20really%20helped%20me&cc=email@thisotherperson.com">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

Posted in The Library, WordPressTagged , , ,

Free WordPress tips for your inbox

Have our latest blog posts delivered straight to your inbox.

Comments 46

  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. 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.

  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. 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. 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@example.com?subject=Hello%20you&body=This%20blog%20post%20has%20really%20helped%20me&cc=email@thisotherperson.com&bcc=email@another.com”>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?

  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”?

  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. 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. 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?

  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.

  10. 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?

  11. 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?

  12. 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?

  13. 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. 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.

  14. This is extremely helpful – thank you so much! Anyone know how I can add bullet points to the message body?

  15. Hi, So I have used your code for adding a button to an email which actions a ‘mailto’. Is it possible to also add a URL to the email body? I have created a form that requires approval from the email recipient. If they click the ‘Approve’ button it generates a new mail message to the client telling them that they have been approved. I would like to be able to add a URL to the next stage form that they can click on from the email they receive.

    1. Hi. If you write out the full URL it should automatically become a hyperlink in the recipient’s mail client. I believe that’s your only option. For example: mailto:email@example.com?subject=Hello&body=http%3A%2F%2Fwww%2Ezaposphere%2Ecom

Ask a question or write a comment here…