How to use mailto in HTML ? - GeeksforGeeks

21 Feb, 2022
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@gmial.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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
HTML-Misc
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a web page using HTML and CSS
Angular File Upload
Form validation using jQuery
DOM (Document Object Model)
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript