Open In App

How to create mail and phone link in HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going through step by step process to create an HTML Mailto and call link. When a user clicks on the mailto link, it opens a default email client in the user’s system. You can make these types of clickable links easily with the anchor tag.

Mailto link: Users can easily contact website owners or anyone with the help of a mailto link. Mailto link redirects the user to the email client and creates the new mail, addressing the email in the mailto link. Furthermore, we can specify the subject and default body text inside the mailto link which saves the time of users. 

Syntax:

<a href = "mailto:name@gmail.com"> </a>

 The following queries and parameters into the mailto link:

Property Description
mailto Accepts the recipient’s email address.
cc Optional parameter. Accepts another email address that will receive the carbon copy.
bcc Optional parameter. Accepts one or more email addresses that will receive the blind carbon copy.
subject Allows you to assign a default subject to the mail.
body Allows you to set default body text. However, it is optional.
? First parameter delimiter.
& Allows you to separate more than one query.

Moreover, users can add default subjects to the mailto link. If users want to add a little bit more information like CC emails, BCC emails, and body text then we can do it easily. We have to add all queries after user email followed by a question mark. If users want to add multiple queries then they can use & operator to separate two queries.

<a href=”mailto:feedback@geeksforgeeks.org?cc=feedback@xyz.com&bcc=contact@xyz.org&subject=Mail to GeeksForGeeks&body=Demo email” target=”_blank”>Contact at GeeksForGeeks </a>

Example: In this example, we will see the implementation of mail to attribute with an example.

HTML




<!--html code to apply mailto link-->
<!DOCTYPE html>
<html>
 
<head>
    <title>Mailto link</title>
</head>
 
<body>
    <h1 style="color: Green;">
        Contact GeeksForGeeks!
    </h1>
 
    <!-- Only user email address added -->
    <label>Email: </label>
 
    <a href="mailto:feedback@geeksforgeeks.org">
        Contact at GeeksForGeeks
    </a><br />
 
    <!-- Subject also added user email address -->
    <label>Email: </label>
     
    <a href="mailto:feedback@geeksforgeeks.org?subject=Mail to GeeksForGeeks"
        target="_blank">
        Contact at GeeksForGeeks
    </a>
    <br />
 
    <!-- CC and BCC emails added with subject
        and body text field -->
    <label>Email: </label>
 
    <a href="mailto:feedback@geeksforgeeks.org?cc=feedback@xyz.com&bcc=contact@xyz.org&subject=Mail to GeeksForGeeks&body=Demo email"
        target="_blank">
        Contact at GeeksForGeeks
    </a>
</body>
 
</html>


Output:

Call link:

As we have added the mailto link, we can also add a call link using the HTML anchor tag. When a user clicks on the call link, it redirects the user to the default call app with the addressed phone number in the call link. So, users don’t need to dial the phone number and they can make calls directly by pressing the call button.

Syntax:

<a href="tel:Number"></a>

We can also add a country code before the phone number inside the link.

<a href="tel:+91123-456-7890"> call US </a>

Different call actions:

  • tel – To redirect to a call app.
  • callto – To open skype app.
  • SMS – To send a Text message.
  • fax – To send a fax.

<a href=”callto:+91123-456-7890″> call US </a> <a href=”SMS:+91123-456-7890″> call US </a> <a href=”fax:+91123-456-7890″> call US </a>

Example: In this example, we will see the implementation of call link with an example.

HTML




<!--html code to apply call link-->
<!DOCTYPE html>
<html>
 
<head>
    <title>Call link</title>
</head>
 
<body>
    <h1 style="color: Green;">
        Contact GeeksForGeeks!
    </h1>
 
    <a href="tel:+91123-456-7890">
        Contact on call
    </a> <br />
     
    <a href="callto:+91123-456-7890">
        Contact on Skype
    </a> <br />
     
    <a href="SMS:+91123-456-7890">
        Send SMS
    </a><br />
     
    <a href="fax:+91123-456-7890">
        Send Fax
    </a><br />
</body>
 
</html>


Output:



Last Updated : 05 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads