Directly adding the subject to the email
In this approach, we will use the mailto link with the subject parameter directly embedded in the HTML. The provided email link, when clicked, opens the userâs default email client with the specified subject line.
Syntax:
<a href="mailto:emailAddress?subject=subjectContent">
Send Email with Subject
</a>
Example: The below example uses the subject parameter directly inside the mailto link to add a Subject to it.
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.email-link {
color: #3498db;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
border: 2px solid #3498db;
border-radius: 5px;
display: inline-block;
margin-top: 20px;
transition: background-color 0.3s;
}
.email-link:hover {
background-color: #5bdb34;
color: #fff;
}
</style>
</head>
<body>
<h1 style="color: green;">
w3wiki
</h1>
<h3>
Using subject Header Only
</h3>
<a class="email-link" href=
"mailto:review-team@w3wiki.org?subject=Hello w3wiki">
Send Email with Subject
</a>
</body>
</html>Output:
How to Add a Subject to a Mailto link in HTML ?
In HTML, to add a subject to a Mailto link, we can use the Subject as a query parameter just after the specified email address and pass the subject of the email as its value. Along with this, we can use JavaScript to add custom subjects according to the user input.
Table of Content
- Directly adding the subject to the email
- Adding subject using JavaScript
Contact Us