How to Create Mailto Links in HTML
With HTML mailto
links, you can prepare custom email messages ahead of time by adding email recipients, carbon copy and blind carbon copy recipient lists, and editing the subject line and message body.
This tutorial will teach you how to create links using all these different options.
A Basic Message
At a minimum, you must supply at least one valid email address in your anchor tag. All anchor links must start with the prefix mailto:
to work correctly.
To launch the user's default email application with a recipient's email address pre-filled, use the following example:
<a href="mailto:someone@domain.com">Email Us</a>
You can also supply multiple email recipients at once in a comma-delimited format:
<a href="mailto:someone1@domain.com,someone2@domain.com">Email Us</a>
Add CC and BCC
To carbon copy or blind carbon copy an email address, you can use the cc
and bcc
attributes in href:
<a href="mailto:someone1@domain.com?cc=someone2@domain.com&bcc=someone3@domain.com">Email Us</a>
Add A Subject Line
If you'd like to pre-populate the subject line of the email, you add the subject
attribute to href:
<a href="mailto:someone@domain.com?subject=Hello There">Email Us</a>
Add Body Text
To pre-populate the body of the email with some text, you can add the body
attribute to href:
<a href="mailto:someone@domain.com?subject=Hello There&body=Don't be afraid.">Email Us</a>
A Few Useful Tidbits
Here are a few things to mention about mailto
links:
- Using spaces in your subject line and body text should work without issue. If you're still hesitant, you can always replace each space with "+" to make it URL friendly, but it's not required.
mailto
links will work on any modern desktop computer or mobile device, assuming the user has a default email program set up on their machine. If they don't, the link will appear like it doesn't work because nothing will happen when they click on it.- Another thing to highly consider is using these links anywhere on your site. Exposing your email address either in plain view or in your HTML code could open your inbox to potential unwanted spam. In this case, I recommend setting up a contact form on your site instead.
Conclusion
This article explained the usage of mailto
links in HTML with a few attributes like carbon copy lists, subject lines, and message body text. Give them a shot on your site!
Created: August 13, 2022
Comments
There are no comments yet. Start the conversation!