If you are reading this post, I hope this will help you to add HTML element in your code which will open your default mail program.

Basic option

A very minimal mailto html element will look the below.

<a href="mailto:nobody@somedomain.com">Email Us</a>  

When the user clicks the above element in the browser, it will open the default mail client by prefilling the mentioned email id.

Advanced option

The ultimate aim of the mailto links option is to open the default mail program with prefilled To address in it.

However, it got more advanced options to make the mailto even powerful like filling the bcc, cc, subject and body of mail and all.

Lets look into it.

mailto Paramaters

ParameterPurpose
mailto:nobody@somedomain.comIt fills the email TO mail address
cc=somebody@somedomain.comIt fills carbon copy (cc) mail address
bcc=hello@somedomain.comIt fills blind carbon copy (bcc) mail address
subject=GreetingsIt fills the subject of the mail
body=body contentIt fills body/content of the mail

mailto Delimiters

DelimiterPurpose
?To add the first paramter
&To add additional parameter

That’s it.

Lets hit the option one by one with example.

Add subject

Space should work fine, if you want to be more accurate you can add %20 instead of space and similar encoding to various symbols in the places of text

<a href="mailto:nobody@somedomain.com?subject=Hello everyone">Email Us</a>  
mail subject

Add CC

<a href="mailto:nobody@somedomain.com?cc=info@somedomain.com">Email Us</a>  
mail cc

Add BCC

<a href="mailto:nobody@somedomain.com?bcc=hidden@somedomain.com">Email Us</a>  
mail bcc

Add Body

<a href="mailto:nobody@somedomain.com?body=long-present-here">Email Us</a>  

Combining parameters

Using the & symbol, we can combine the various parameters

<a href="mailto:nobody@somedomain.com?cc=info@somedomain.com&bcc=hidden@somedomain.com&subject=Hello world">Email Us</a>  

Credits

Photo by Austin Distel on Unsplash

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: