How to use mailto in HTML ?
In this article, we will learn how to mailto links to send a mail in HTML. Mailto link is a default way to sending a mail when the consumer wants to communicate or wants to give feedback, then clicking the mailto link will open a default sending mail window. So we can use mailto which directs us to the mail once the form is submitted. Using mailto we can set the action field of the form and in this case, the web browser invokes the email client to send the form submission to the email address specified. Also, we can attach the Cc, Bcc, Subject, and body content also.
Syntax:
<form method="POST" action="mailto: name@gmail.com"
enctype="multipart/form-data">Parameters: This attribute accepts seven parameters as described below:
- mailto: This parameter holds the email recipient 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.
Approach: 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.
The below examples illustrate the use of mailto links in HTML.
Example 1: In this example, we have used the HTML form for taking the name, contact number & text area to submit the suggestions.
HTML
<!DOCTYPE html><html><head> <title>Using mailto link</title> <style> h1 { color: green; } .container { width: 400px; border: 2px solid black; padding: 15px; } </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:
HTML Form using mailto link
Example 2: This example illustrates the use of a mailto link to submit the feedback form through the mail in HTML.
HTML
<!DOCTYPE html><html><head> <title>Using mailto link</title> <style> h1 { color: green; } .container { width: 400px; border: 2px solid black; padding: 15px; } </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:
Redirecting the feedback form using the mailto link
Please Login to comment...