Yes, mailto: hyperlinks are a perfect example of what HTML 5 can do. What it is, is that it is a hyperlink in a web page. But, not just another hyperlink that points to another webpage. And, with the recent advent of HTML 5, these hyperlinks have gone a long way.
One of those is the ability to mail anyone from anywhere to anyone at the click of a button. This is what I’m going to talk about today. The mailto: hyperlinks.
Mailto hyperlinks are easy to setup and help a lot in UX, and are really nice. Even better is that you can set up the subject and body of the E-mail, so that the person can simply mail you with a single click of a button. That’s good !
Now, without further ado, let’s get into it.
Related reading: User interface problems to avoid while creating websites
SETTING UP THE HYPERLINK
Setting up the hyperlink is not a very difficult task. To do so, just setup the “a href=” attribute and you are done.
<a href="">Mail me right now </a>
As you are seeing, we’ve just set up a simple hyperlink. But, don’t be deceived. Better things are yet to come.
THE BASIC ATTRIBUTE
The most simplest thing you can do to setup the mailto: hyperlink, is to set up mailto: in the href attribute. just like this:
<a href="mailto:">mail me right now </a>
Yes, we’ve just setup a simple mailto: in the href attribute of the < a > tag. But, this the place where we’ll put all the better things we want like the receivers address, subject as well as the body text.
Related reading: Making the dotted line in a hyperlink disappear using CSS
PUTTING THE RECEIVERS ADDRESS
A better part of the mailto: hyperlink is to put the receivers address so that the customer or the visitor knows who is he/she sending out the mail to. This also helps credibility if you’ve already impressed them.
To set up the receivers address, just put the values as shown below:-
<a href="mailto:firstname.lastname@example.org"> Mail me right now </a>
So, it’s clear that you put the mail address you want the email to be sent to. It’s pretty simple and you just have to put the address after the mailto: part.
SETTING UP THE SUBJECT OF THE MAIL
You know that if you’ll put a subject in the email as well, it looks more polished and helps out in the visitor’s part.
For setting up the subject, all you have to do is put a question mark (?) at the end of the receivers address, and put what you want the subject to be. Now, you’re all set.
<a href="mailto:email@example.com?subject=subject-goes-here"> Mail me right now </a>
All we did was we put a question mark (?) in front of the receivers address, wrote subject= and then we wrote our subject. Make sure it’s relevant an short. No one like big subjects.
WRITING THE BODY OF THE MAIL
Now, our mail receiver’s address and subject are setup. But, what about the body ? Can’t we do that as well. Well, dear designer, to answer your question, yes, we can set up the body text of the mail as well.
This is the final step in making the perfect mailto: hyperlink. By setting up the body text as well, we help our viewers the most. At the click of a button, they can send us an email. And, that contains the subject and the body text as well.
To get the body text ready, here’s the code:-
<a href="mailto:firstname.lastname@example.org?subject=subject-goes-here&body=body-goes-here"> Mail me right now </a>
It’s pretty simple to make the body text. All you have to do, is you have to write the ampersand (&) sign after the subject, proceeded by equal to (=) and then you write the body text you want.
ONLY ONE WORD OF CAUTION
There is a problem I want to address, that I recommend you read before you apply this technique.
And, that one problem is that you should use %20 instead of spaces in the subject and the body text. Practically:-
<a href="mailto:email@example.com?subject=subject%20goes%20here&body=body%20goes%20here"> Mail me right now </a>
Instead of this:-
<a href="mailto:firstname.lastname@example.org?subject=subject goes here&body=body goes here"> Mail me right now </a>
for putting spaces in between the subject and/or the body text.
This is primarily because when you use spaces, some browsers might not render the message correctly, which may cause problems on the User’s part. And, we don’t want that to happen. At all costs.
So, that’s the word of caution guys. If you want to use spaces in your subject and/or body text – use %20 instead of just plain spaces so browsers render everything correctly.
So, in this post you read about how you, yourself can setup mailto: hyperlinks. And, not just set them up, but added the subject as well as the body text in them, which makes the work on your visitor’s part, a lot easier.
And, now I guess that you will be much excited to use this feature as well. So, go ahead and apply this folks !
Did you find it interesting ? Were there any problems you are facing ? Share your thoughts in the comments below.