Build 10x products in minutes by chatting with AI - beyond just a prototype.
Topics
How do you link mailto with subject in HTML?
What are the subject parameters of mailto?
How do I hyperlink an email in HTML?
What is the %20 in mailto?
Want to make it easy for users to send emails from your website? 📧
A mailto link in HTML can do just that! With a simple line of code, you can open an email window with a pre-filled subject and message.
This blog shows how to create a mailto HTML with subject and customize it with multiple parameters. You’ll also learn how to structure the code correctly to ensure it works as expected.
Let’s get started!
A mailto link is a type of HTML link that enables a user to send an e-mail directly from a browser without copying and pasting an email address. It uses the href attribute in the following format:
1<a href="mailto:someone@example.com">Send Email</a>
When a user clicks this email link, the default email client opens a new mail window with the specified recipient address.
To add a subject and body to the mailto link, parameters are appended with ?, and additional parameters are separated using &.
1<a href="mailto:someone@example.com?subject=Hello&body=This is a test email.">Send Email</a>
• mailto: Triggers the default email client.
• someone@example.com : The recipient's email address.
• subject=Hello: Pre-fills the subject line of the e-mail.
• body=This is a test email.: Adds body text to the new mail window.
To add multiple recipients, separate each email address with a comma.
1<a href="mailto:user1@example.com,user2@example.com?subject=Meeting&body=Let's discuss the project.">Email Team</a>
For blind carbon copy (BCC) or carbon copy (CC), use cc= and bcc= parameters.
1<a href="mailto:person@example.com?cc=ccperson@example.com&bcc=bccperson@example.com&subject=Important Update&body=Please review the document.">Send Email</a>
When multiple parameters are included, they must be properly formatted using the & parameter delimiter.
1<a href="mailto:admin@example.com?cc=support@example.com&bcc=manager@example.com&subject=Service Inquiry&body=Hello,%0D%0A%0D%0AI would like more information about your services.">Contact Support</a>
Key Points:
• %0D%0A represents a line break in the body of the e-mail.
• The mail window automatically opens with all fields pre-filled.
If a mailto link does not work, the default email client might not be set up correctly in the browser.
If special characters like spaces or symbols are included, they should be encoded using URL encoding.
1<a href="mailto:support@example.com?subject=Help%20Needed&body=Can%20you%20assist%20me%3F">Request Help</a>
Replacements:
• %20 → Space
• %3F → Question mark (?)
• %26 → Ampersand (&)
A mailto link can be integrated into a form to send an e-mail when the user submits the form.
1<form action="mailto:info@example.com?subject=Feedback" method="post" enctype="text/plain"> 2 <label for="name">Name:</label> 3 <input type="text" id="name" name="name"> 4 5 <label for="message">Message:</label> 6 <textarea id="message" name="message"></textarea> 7 8 <input type="submit" value="Send"> 9</form>
Important Considerations:
• This method relies on the user’s default email client.
• It is not suitable for collecting data securely.
| Feature | Mailto Link | Web Form |
|---|---|---|
| Requires Default Email Client | ✅ | ❌ |
| Supports Pre-Filled Subject & Body | ✅ | ✅ |
| Customizable for Multiple Recipients | ✅ | ✅ |
| Best for Secure Data Collection | ❌ | ✅ |
| Works Without an Email Client | ❌ | ✅ |
| Exposes Email Address | ✅ | ❌ |
If a website requires structured data collection, a server-side form is more effective.
Using a mailto link in HTML is an efficient way to allow a user to send an e-mail directly from a website. By structuring the HTML code correctly and using parameters like subject, body, and multiple recipients, a fully functional new mail window can be created.
