Is Your Website in Top Shape?

Ensure your website is running at peak performance. Our comprehensive FREE Website Health Check will identify improvements that could boost your sales and increase conversions.

How to add a clickable Telephone number or Email Address to your website

How to add a clickable Telephone number or Email Address to your website

In today’s digital age, making it easy for your website visitors to contact you is crucial. One simple way to achieve this is by adding clickable links for email addresses and telephone numbers using HTML. This is especially important when visitors are using a mobile device. Some phones will detect a phone number but on other occassions the user may have to copy paste the phone number and that is an unneccassary hassle. In this post, we’ll guide you through two ways to achieve the same goal. Using either process to add links to your phone numbers and Email addresses can enhance your website and email footers.

The Easy Way to add Links

You may be unfamiliar with HTML and any kind of code for that matter, but fear not, this is a very quick way of doing it. I hope you already know how to link content in your website to internal and external pages or products, because this is an important part of SEO. If you don’t it is quite simple and this works for most CMS platforms.

Highlight the text you want to link to and a pop up box will appear. If you are using WordPress, Shopify or any other CMS for that matter, the linking box will look like a paperclip. Click this and then add the required link into the box. When it comes to phone numbers and Email addresses you just have to add a little bit of HTML to make the link work properly.

Clickable Phone Numbers:

To make the phone number clickable just add “Tel:” in front of the phone number. Then put the phone number with no spaces and it will become a clickable link that goes straight to your phone app. So the end result will look like this: Tel:01722580521 – or behave like this: Tel: 01722 580 521.

Clickable Email Addresses:

In the same way we can make the link an email link by adding in “Mailto:”. This tells the website to open up the users Email provider and create a new email ready to send. The final link will look like this: “Mailto:jim@wearechain.co.uk” put this in the box and replace my email address with your own. It will work like this: jim@wearechain.co.uk. Sometimes the CMs will automatically add the mailto for you because it has detected that it is an email address.

Using HTML

Using HTML makes it a little harder in the first instance but once you are happy you will be able to link to anything. THis way you don;t use the link button on your CMS. You will need to add this link in the html version of your webpage by clicking this symbol <> at the top right of your text editor. You also use the same linking method as above with either “Tel:” or “Mailto:”

Start with the code for a link which is <a> this shows that a link will be contained within the a’s. HTML requires that you opena nd close the code with a back slash version at the end of the code.

Start with <a> and end with </a> that tells the website the link is in between the two parts.

Now include href= followed by the link then close the brackets. You can then put in the actual text you want to use that will become the link and close the code by ending with </a>.

Here is an example of a Tel link in HTML:

<a href=”Tel:01722580522″> Telephone us</a>

Here is an example of an email link:

<a href=”Mailto:jim@wearechain.co.uk”> Email me </a>

These will now both become clickable but you will only see the text Email Me and Telephone me.

This is a really useful skill and can be implemented on anything digital. Especially useful if you are creating a signature in your email footer or anywhere on your website. If you have any questions about how to do this, then please watch the video.

email me

Scroll to Top
Skip to content