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.
3. Add a hyperlink reference command and within quotation marks add an email address.
<a href="mailto:firstname.lastname@example.org">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).
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:firstname.lastname@example.org?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:firstname.lastname@example.org?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
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:firstname.lastname@example.org?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:firstname.lastname@example.org?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:firstname.lastname@example.org?subject=Hello%20you&body=Thisemail@example.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: )
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
|Adding a single carriage return (line break)||%0D|
|Adding a double carriage return||%0D%0D|
|Full stop .||%2E|
|Exclamation mark !||%21|
|Question mark ?||%3F|
|Speech marks “||%22|
|Single inverted comma ‘||%27|
Less common characters
|Opening parenthesis / bracket (||%28|
|Closing parenthesis / bracket )||%29|
|Semi colon ;||%3B|
|Hyphen / Dash –||%2D|
|Forward slash /||%2F|
|Plus sign +||%2B|
|Equals sign =||%3D|
|Hash symbol #||%23|
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.
The Zaposphere team