Open In App

How to create mail and phone link in HTML ?

Last Updated : 05 Jan, 2024
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:



Similar Reads

How to connect Skype, Mail and Phone using HTML ?
Connecting to Mail: Mailto link is a default way to sending a mail when the consumer wants to communicate or wants to give feedback, then by clicking the mailto link will open a default sending mail window. So we can use mailto which direct to the mail once the form is submitted. Using mailto we can set the action field of the form and in this case
3 min read
How to Create HTML Link that does not Follow the Link ?
An HTML link, a hyperlink, connects one web page to another. Users who click an HTML link are taken to the corresponding web page. Web developers can link to text, images, and other media using HTML links. These are the following approaches: Table of Content Using the href Attribute with a Placeholder ValueUsing the href Attribute with an Empty Val
2 min read
How to create button to open SMS compose to a phone number using HTML ?
Sometimes, when you search for a number on the web, you might want to SMS to it directly from the web page instead of noting it down and then messaging to it. It becomes quite convenient for the user. Making an SMS link is very easy in HTML. Here, we will see how to make the SMS link on a webpage. Using &lt;a&gt; href attributeEnter the phone numbe
2 min read
React Suite Breadcrumb Used with Link in next/link
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Breadcrumb component is used for Navigation purposes. We can display the current page path and quickly return to the history page. Breadcrumbs can be used with Links also. This will help to add on all the fu
3 min read
React Suite Pagination Used with Link in next/link
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Pagination Used with Link in next/link. The pagination has a layout
3 min read
React Suite Nav Used with Link in next/link
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav Provides a list of various forms of navigation menus, which can be landscape and portrait layouts. Nav Items can be used with Links also. These can be used for any redirection. Syntax: &lt;Nav &gt; &lt;Nav.I
3 min read
How to hide admin login link to custom link of WordPress website ?
WordPress security is crucial for website owners. One effective way to enhance security is by customizing the login URL for your WordPress admin panel. In this article, we’ll explore how to hide the default login link and replace it with a custom one. In WordPress, the login URL is like this e.g. www.yourwebsite.com/wp-admin here this string /wp-ad
3 min read
How to Create Phone numbers and Contacts List in ReactJS ?
We can create a phone number list along with contact names in ReactJS using the following approach. Material UI for React has this component available for us and it is very easy to integrate. Contact List/ Numbers can be shown in List and tabs can be switched to change the state of data. Approach:Component and Import Setup:The code establishes a Re
3 min read
Create Timer Based Phone Silencer App using React-Native
In this project, we will create a mobile application using React Native that acts as a timer-based phone silencer. The app allows users to set a timer, and when the timer finishes, it automatically silences the phone. A notification will be displayed to inform the user that the phone is now silenced. Prerequisite:React NativeReact Native Components
3 min read
How to Create a Bookmark Link in HTML ?
Bookmark Link is used for the users to navigate directly to the specific sections within the web application. We can create this bookmark link functionality in HTML using the id attribute with JavaScript and the class attribute with jQuery. Below are the approaches to create a bookmark link in HTML: Table of Content Using HTML OnlyUsing id Attribut
5 min read