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 and then enter mailto: followed by the email address (without any character spaces).
mailto:email@example.com
Adding a custom email subject header?
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. ;)
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
How do you add a pound symbol in the body?
Hi Puneeth. Try %A3
This article is so helpful! The perfect step by step explanation!
This is so incredibly helpful. Please never delete this resource!
You guys rock!
Is it possible for the subject text to get its value from somewhere else on the current web page. Same question for body text?
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.
i really valued your post, thank you!!! It works!!!
Thanks Carel. Your feedback is much appreciated. :)
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!!
Thanks Alek. Good luck with your new site! :)
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:
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?
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 & ?
Hi,
The single carriage return is not making my text in the body move to the next line, neither is a double carriage return?
Hi Ryan. Perhaps you’ve misspelt the necessary code? The middle character you need is a 0 (zero). Copy and paste if necessary.
Thank you, for all this.
Is there a way to make the “cursor” / point of insertion be after the last character in the “body”?
Unfortunately not. The code is fairly rudimentary and largely reliant on the email app used.
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
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.
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!
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.
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?
Thanks for your comment and research into mail clients. I’m not sure why Gmail won’t accept such code. :(
I use gmail and the syntax worked for me – a couple of times I had to search the internet for some extra codes.
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.
Unfortunately you won’t be able to style the text with this method. :(
(ie. embolden, italicise, underline, add colour etc.)
Thank you for the %20 tip. Now how can I bold and italize certain words in my body content?
Unfortunately that isn’t possible with this method, sorry. :(
Thanks for this information! Very helpful. Particularly the paragraph characters for adding carriage returns.
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?
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?
Hi Renata, thanks for commenting. Can you give us a sample of the code you’re using?
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?
No, unfortunately that’s not possible.
This is such a great resource. Is it possible to add an image to the body text? Or would this be considered an attachment?
Hi, yes you’re correct. This method can only create basic text emails. Glad you found it useful. ;)
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?
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.
Great refresher and reference/tutorial–Thank you!
Is there a way to create a hyperlink within the added body of the email?
Hi! You can write web addresses (URLs) that will automatically become hyperlinks (eg. http://www.zaposphere.com) but to make a regular word a link (eg. buy it here) then no, that’s not possible sorry.
This is extremely helpful – thank you so much! Anyone know how I can add bullet points to the message body?
Thanks. I don’t think you can create bullet points with the code though. Perhaps a creative alternative would be using the > symbol ( %3E )
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.
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
Hi, the %0D ( 0 zero D ) the “new line” code does not work. Is there another option ? Thanks, Frank
How can one add a table to the predefined email body.
Thanks
Thanks for your question, but unfortunately that’s not possible. :(
Hey! is there anyway to get the email to auto-send once the link is clicked without ever having to ever actually see the email as the user?
That’s not possible so you’d be best creating a contact form instead. “Contact Form 7′ is an excellent WordPress plugin for this.
Great article. How can this be modified for Gmail users? Is there an alternative for Gmail?
No, sorry. This simple code trick pre-dates Gmail.
Wow … thank you so much. This is by far the best explanation of how to do this that I have found. Now I understand what I’m doing rather than just copying and pasting !!
One question I have is that I am trying to overide my WP themes customised link colour in only one particular location.
So I want the actual link text to appear in white (rather than the standard site wide colour for links). I have tried many variations of the coding to incorporate the color styling but cannot seem to get it right. Have you got any suggestions?
Hey JABJOB, thanks for the lovely comment and feedback, much appreciated! To specify a hyperlink colour you need to add a style attribute. For example:
<a style=”color:white” href=”…”>Link</a>
Hey hi , can i add css class / style / html tag like hi in body param…like <a href="mailto:?subject=look at this website&body=I found this website
and thought you might like it”>tell a friend
Hi Suraj, no unfortunately HTML tags won’t work with this method. Thanks for your comment, much appreciated. :)
great explanation, thank you!
This is really great! I’ll be using this guide a lot in the future. Thanks for the detailed explanation!
great explanation, thank you for the detailed explanation
thank you for the step-by-step. Extremely helpful.
Hi everyone for the Single line and double line break here are the following codes.
Single break: %0D0A
Double break: %0D0A%0D0A
Hope this helps
Cheers! :)
Good Information..