Aquileo | How to use Mailto in HTML?

The mailto link in HTML allows users to easily send emails by opening their default email application when clicked. It can include important details like the recipient’s email address, subject line, body, and optional fields such as CC and BCC, making it convenient for direct communication or feedback forms on websites.

What is a Mailto Link in HTML?

A mailto link is an HTML feature that enables direct email composition through an anchor tag or form. It pre-populates fields like To, CC, BCC, subject, and body, simplifying the process of sending emails directly from a webpage.

Mailto Link Syntax

<a href="mailto:name@email.com">Send an Email</a>

For Forms:

<form method="POST" action="mailto:name@email.com" enctype="multipart/form-data">
    <!-- Form content goes here -->
</form>

How to Create Mailto Links in HTML?

Below are the approaches to create or use Mailto links in HTML:

Table of Content

Mailto link Parameters
Examples to Use Mailto in HTML

Mailto Link Parameters

Here's a brief description of the parameters used in a mailto link and their functions:

Parameter	Description
mailto	Specifies the email recipient's address. This is the main parameter.
cc	Optional: Adds additional email addresses to receive a carbon copy (CC) of the mail.
bcc	Optional: Adds email addresses to receive a blind carbon copy (BCC) of the mail.
subject	Optional: Pre-defines the subject of the email.
body	Optional: Pre-fills the body content of the email.
?	Acts as the first parameter delimiter to separate the `mailto:` and other parameters.
&	Acts as the delimiter to separate multiple parameters (like `cc`, `bcc`, etc.).
@	This holds the other parameters

Examples of Using Mailto in HTML

Here are two basic examples of how to use mailto in HTML:

Example 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.

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.

Example: The below examples illustrate the use of mailto links in HTML Form.

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>
        <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: Using 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.

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.

Example: This example illustrates the use of a mailto link to submit the feedback form through the mail in HTML.