The mailto link in HTML is a convenient method for users to send emails. It triggers the default email client with pre-filled recipient, subject, body, CC, and BCC fields, often used for feedback forms or direct communication.
Syntax:
<form method="POST" action="mailto: name@email.com"
enctype="multipart/form-data">
Table of Content
Mailto link Parameters:
|
Parameters |
Description |
|---|---|
|
mailto |
This parameter holds the email recipient’s address mail. |
|
cc |
This parameter holds another mail that will receive the carbon copy of the mail, it is optional. |
|
bcc |
This parameter holds another mail that will receive the blind carbon copy of the mail, it is optional. |
|
subject |
This parameter holds the subject of the mail, it is optional. |
|
body |
This parameter holds the content of the mail, it is optional. |
|
? |
This parameter is the first parameter delimiter, it is optional. |
|
@ |
This holds the other parameter delimiter, it is optional. |
Examples to Use Mailto in HTML
1. Using Mailto in Form Submission:
Form Submission with Mailto Link allows users to send email directly from a web page. Parameters like recipient, subject, and body can be predefined in the link, facilitating quick email submission without server-side processing.
Example : The below examples illustrate the use of mailto links in HTML Form.
<!DOCTYPE html><html>
<head>
<title>Using mailto link</title>
<style>
.container {
width: 400px;
border: 2px solid black;
padding: 15px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Using mailto link</b>
<form method="POST" action="mailto: geeksforgeeks@gmail.com"
enctype="multipart/form-data">
<div class="control">
Name:
<input aria-required="" id="name" type="text" />
</div>
<br>
<div class="control">
Ph no:
<input aria-required="" id="mobile_number" type="tel" />
</div>
<br>
<div class="control">
Suggestion:
<textarea rows="7" cols="30" name="comment">
</textarea>
</div>
<br>
<div class="control">
<input type="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
|
Output:
Form Submission with Mailto Link
Explanation:
- First create a HTML structure with basic input field like name,email, textarea etc. and use CSS for proper alignment.
- In order to send the mail to the specified mail address, we will use the mailto & set the action field of the form for which the web browser will invoke the email client to send the form submission to the specified email address.
- On clicking to the mailto link, it will open a default sending mail window without having to copy it and entering it into an email client.
2. Uisng Direct Mailto with Parameters:
Direct Mailto Link with Parameters allows defining recipient, subject, and body of an email directly in an HTML link. This enables users to compose and send emails by clicking the link without requiring a mail client.
Example : This example illustrates the use of a mailto link to submit the feedback form through the mail in HTML.
<!DOCTYPE html><html>
<head>
<title>Using mailto link</title>
<style>
.container {
width: 400px;
border: 2px solid black;
padding: 15px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Using mailto link</b><br>
<a href="mailto:geeksforgeeks@gmail.com?
cc=gfg@gmail.com&
bcc=geeks@gmail.com
&subject=Feedback from the geeks
&body=Add what you want to suggest">
Suggest your thought
about us through mail
</a>
</div>
</body>
</html>
|
Output:
Explanation:
- In the above example HTML link (<a>) used to initiate email composition.
- mailto: protocol specifies recipient email.
- Parameters like cc, bcc, subject, and body configured for pre-filled email content.
- User clicks link to open default email client with pre-filled fields.