Ok, not really. This week I’ll be covering how to create a link that when clicked automatically opens a draft email in the user’s default email application and prepopulates a to: address.

Have you ever clicked on an email icon on a web page and have it auto-open your mail program and automatically create a new draft? No? Huh. Well for those that have, I’m going to be covering how this is created in React/JavaScript this week so that you can see what has been coded in for this to happen.

So first we’ll need to create a link; something that we can click on that will then take us to something else.

<a href=""> Text </a>

If you’d prefer an email icon instead of ‘Text’ you can place an <img /> tag between the <a> </a> tags to render a clickable image instead.

Now here comes the tricky *cough* simple *cough* part. For the href="" portion of our <a> tag, we can use something called mailto which when given an email address will create a link to that email address.

When a user clicks on the above link, it will open their default email program and auto-create a draft with the to: field already populated with our specified email address. Simple right?

When we use a mailto link, we can also specify other properties, like subject cc/bcc, and body, if we want those to also be pre-populated.

<a
  href="mailto:email@example.com?
  cc=secondemail@example.com, anotheremail@example.com, &
  bcc=lastemail@example.com&
  subject=Mail from our Website&
  body=Some body text here"
>
    Send Email
</a>

Hopefully, this helps in your quest for creating an email link! Good luck and happy coding!