Master Mailto HTML With Subject: A Simple How-to Guide

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!

What is a Mailto Link in HTML?

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.

How to Create a Mailto Link with Subject and Body

To add a subject and body to the mailto link, parameters are appended with ?, and additional parameters are separated using &.

Example of a Mailto Link with Subject and Body

1<a href="mailto:someone@example.com?subject=Hello&body=This is a test email.">Send Email</a>

​

Breakdown of the Parameters:

• 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.

Adding Multiple Recipients in a Mailto Link

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.

Example with CC and BCC:

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>

​

Structuring a Mailto Link with Multiple Parameters

When multiple parameters are included, they must be properly formatted using the & parameter delimiter.

Example of a Complex Mailto Link

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.

Common Issues with Mailto Links

1. Mailto Link Not Working

If a mailto link does not work, the default email client might not be set up correctly in the browser.

2. Special Characters in Subject or Body

If special characters like spaces or symbols are included, they should be encoded using URL encoding.

Example with 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 (&)

Using Mailto Links in Contact Forms

A mailto link can be integrated into a form to send an e-mail when the user submits the form.

Example Form with Mailto Link

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.

When to Use Mailto Links vs. Web Forms

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.

Final Thoughts on Mailto HTML with Subject

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.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.