Easy Steps To Add A Call-able HTML Telephone Link To Your Website

What if almost every person who searched for your business on their phone was ready to call you today? According to research, that’s not far from reality. 88% of local smartphone searchers contact or visit a business within 24 hours of their search.

Yet most websites still display phone numbers as plain, unclickable text, forcing mobile users to manually copy, switch apps, and dial. That extra friction is costing you calls and potentially customers.

Making your phone number clickable in HTML is one of the simplest, highest-impact changes you can make to your website. It removes the barrier between a visitor’s intent and their action, letting them call you with a single tap. No copy-pasting. No app-switching. Just one click and they’re on the line.

In this guide, you’ll learn exactly how to create clickable phone links in HTML, whether your number has an extension, a country code, or both, so you never lose another potential customer to a frustrating user experience.

Table of Content

• How to Add HTML Telephone Link to Your Website
• How to Link a Telephone Number With an Extension in HTML
• How to Link a Telephone Number With a Country Code in HTML
• Steps to Add an HTML Telephone Link to Your Website
• Take It Further with FormyChat
• Conclusion

How to Add HTML Telephone Link to Your Website

Here are the easy steps to add a HTML phone link on your website,

1. You can create an anchor element.

To start of, create an anchor element with an empty href attribute. It will look like this:

<a href=""></a>

2. Then enter your phone number in the href attribute.

Now you have to place the phone number inside the href attribute inside the opening a tag. This href (hypertext reference) attribute ensures that hyperlink is functional. It will look something like this:

<a href="60344557665"></a>

3. You need to add tel: before the number inside the quotation marks.

Now you have to add tel: inside the href attribute, before the phone number. Also, both the tel: and phone number should be inside the quotation marks with no spaces or dashes. Your HTML telephone link will look like this:

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

4. Lastly, include text in the anchor element.

You can include text in the anchor element. Although it’s not required, it can make the call-to-action more obvious to users. Here’s the code side by side with how it would appear to users on the front end of a website.

If you want to include the telephone number and have it be the only text that’s linked, then wrap the phone number in the anchor element and place it inside a paragraph tag. It will look like this,

How to link a telephone number with an extension in HTML

If the telephone number you’d like to make clickable has an extension, you’ll need one additional step when creating your HTML telephone link.

• You create an anchor element.
• Enter tel: and the phone number in the href attribute.
• Now, after the phone number, add the letter “p” and the extension number. It will look like this:

<a href="tel:60334342298p000"></a>

When clicking this “click to call” link, the user will hear the number dialed, then a one-second pause, then the extension dialed.

How to link a telephone number with a country code in HTML

If the telephone number you’d like to make clickable has a country code, then you’ll need to take a different additional step.

• You create an anchor element.
• Enter tel: and the phone number in the href attribute.
• Now, before the phone number, add the plus icon (+) and the country code. It will look like this:

<a href="tel:+1603232322298p000"></a>

Steps to add an HTML telephone link to your website

An HTML telephone link, or “click to call” link, can be included in various parts of your website. Your contact page and header or footer are among the most common. Let’s look at examples of including these clickable links on a WordPress website.

Use contact page

The exact steps to add a HTML telephone link to a contact page will vary depending on what platform and template you use. Below is the general process.

• To start, select a predesigned contact page template.
• Next click into the block with the example phone number.
• Now click the three dots icon.
• Click Edit as HTML.

• Now replace the existing phone number with the anchor element:

<a href="tel:6031112298">(603)111-2298</a>

• Lastly, click Save Draft and Preview.

Take It Further with FormyChat

While adding a clickable phone number with HTML is a great start, it only gets visitors to pick up the phone. What if you could also capture their details, route their inquiry directly to WhatsApp, and manage every lead from your WordPress dashboard?

That’s exactly what FormyChat does. Instead of relying solely on a tap-to-call link, FormyChat lets you add a floating WhatsApp contact widget to your website that collects visitor information through a customizable form and sends it instantly to your WhatsApp or WhatsApp Business account. No missed calls. No lost leads.

It integrates seamlessly with popular form plugins including Contact Form 7, WPForms, Gravity Forms, Ninja Forms, and Fluent Forms, so you can start collecting leads without rebuilding anything from scratch. Every submission is also saved directly in your WordPress dashboard for easy tracking and follow-up.

Whether you’re running a local business, an eCommerce store, or a service-based website, FormyChat turns passive phone number displays into active, real-time conversations with your customers.

👉Install FormyChat Today!

Conclusion

If you are looking to display a phone number on your website which can help attract and delight prospective and existing customers, then making them clickable is even better. Creating telephone links is easy. You just need to know some HTML and CSS to create and style these links and embed them in different areas on your site.

Frequently Asked Questions

Do clickable phone links work on desktop computers?

Clickable phone links in HTML behave differently on desktop and mobile. On mobile devices, tapping the link opens the phone dialer instantly. On desktop, however, it may open applications like Skype or FaceTime instead. If you want to avoid confusion for desktop users, you can use CSS media queries to make the HTML phone link clickable only on mobile while displaying it as plain styled text on desktop.

Do I need a plugin to add a clickable phone number to my WordPress website?

No, you don’t need a plugin for a basic clickable phone link. You can add it manually using the simple HTML anchor tag with the tel: attribute directly in your page or post editor. However, if you want advanced features like a floating contact button, WhatsApp integration, lead capture, and submission tracking, a plugin like FormyChat makes the process much easier and more powerful without touching any code.

Will a clickable phone number help my SEO?

A clickable phone link in HTML won’t directly boost your search rankings, but it contributes to better user experience signals that search engines do consider. Lower bounce rates, longer session durations, and higher engagement, all of which a frictionless click-to-call experience encourages, can indirectly support your SEO efforts. Additionally, having a consistent phone number displayed across your website supports local SEO and helps with Google Business Profile verification.

How do I format the phone number correctly inside the HTML tel: link?

The phone number inside the tel: attribute should be written without any spaces, dashes, brackets, or formatting. For a standard number it should look like tel:6031112298, for a number with a country code it should be tel:+16031112298, and for a number with an extension it should be tel:6031112298p000 where “p” represents a one-second pause before the extension dials. The visible text between your anchor tags can be formatted however you like for readability, such as (603) 111-2298.