How to make clickable contact links in HTML (email, phone, etc)

Published: · Reading time: 2 min

To make your page more accessible and user-friendly you can create clickable links for specific texts. It can be phone number, email, sms, and more.

In this article, I’d like to show you how you can improve the usability of a page by implementing simple HTML changes.

To create links with specific actions you should use an anchor tag with a href attribute that contains certain parameters (following the URI syntax).

<a href="mailto:email@example.com">email@example.com</a>

Clicking on this link will open an email client on a user’s device with a specified email address to send it to.

You can specify more than one email, just separate them with a comma:

<a href="mailto:email@example.com, secondemail@example.com">Send us an email</a>

You can use other parameters for sending emails like cc and bcc.

  • mailto: recipient’s email address
  • cc: the email address that will receive the carbon copy of the mail (optional)
  • bcc: the email address that will receive the blind carbon copy of the mail (optional)
  • subject: the subject of the email (optional)
  • body: the content of the email (optional)
  • ?: the first parameter delimiter (optional).
  • &: the other parameter delimiter (optional).

The full set of these parameters might look like this:

<a href="mailto:email@example.com?cc=secondemail@example.com, thirdemail@example.com, &bcc=lastemail@example.com&subject=Mail from my site&body=Hello!">Send us an email</a>

Having a click action on a phone number is as important as the previous one. Clicking on a phone number will instantly make a phone call.

A click on such a link will trigger a phone call.

<a href="tel:+012345678910">0-123-45678910</a>

To send an SMS message use the following syntax.

<a href="sms:+012345678910">Send us a message</a>

You can add a body parameter to set the initial text of the message:

<a href="sms:+012345678910?body=Hello!%20How%20are%20you%3F">Send us a message</a>

The body attribute should contain a URL-encoded value.

For Android OS devices you can specify geolocation via the geo URI Scheme "geo:latitude,longitude" specified by RFC 5870.

Clicking on such a link will open a map application with given coordinates.

<a href='geo:47.26769008051434, 11.407943002524679'>Our location</a>
Like this article? Share it on:
Tags: