Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use mailto in HTML ?

  • Last Updated : 27 Sep, 2021

In this article, we will learn how to mailto link 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 link 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:

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!