Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create mail and phone link in HTML ?

  • Last Updated : 10 Oct, 2021

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. 

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

 The following queries and parameters into the mailto link:

  • mailto: It accepts the recipient’s email address.
  • cc: It is an optional parameter. It accepts another email address that will receive the carbon copy.
  • bcc: It is also an optional parameter. It accepts one or more email addresses that will receive the blind carbon copy.
  • subject: In this parameter, you can assign a default subject of the mail.
  • body: It allows you to set default body text. However, it is optional.
  • ?: It is a first parameter delimiter.
  • &: It allows you to separate more than one query.

Syntax:



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

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.

Example:

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

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.

Example:

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

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!