How to Make a Phone Number Clickable

In the era of smartphones, it is so helpful and time-saving, when the phone number and email address are clickable on the website. First of all, for business owners, secondly, for smartphone users. When you need to drop a quick email or make a call on the go, you just click on the link, and you are redirected to the email app or a call is being placed. The ability to get in touch with somebody in one click is a must-have nowadays.

In this article, I will show how to make phone and email links clickable on your website.

There are 3 ways to make a phone number clickable:

in pure HTML
in classic WordPress Gutenberg editor
in Elementor Page Builder

How to Create a Clickable Phone Number with HTML

If your site is built with pure HTML, the click to call link will look this way:

<a href="tel:123-456-7890">123-456-7890</a>

You can replace the phone number with a text label, such as “Click to call” or “Call now”:

<a href="tel:123-456-7890">CLICK TO CALL</a>

For international companies, place a country code with a + before the phone number:

<a href="tel:+1123-456-7890">CLICK TO CALL</a>

Click to call links in WordPress Gutenberg editor

Are you more comfortable with the visual tab/WYSIWYG/TinyMCE editor? Here’s how you add phone links in Gutenberg editor:

Edit your page or post in WordPress.
Highlight the phone number or text you want to be clickable for calls.
Click the “Hyperlink” button.
Enter tel: followed by your phone number with no dashes.
Apply the link.
Update/publish your page or post.

That’s it. You’re done.

How to Create a Clickable Phone Number in Elementor Widgets

Use Smart Links

With Elementor Pro’s Dynamic Contact URL feature, you can quickly create “smart” links, such as clickable phone or mailto links from any widget that has a Link field, for example, the Button widget. Many other smart links can be created with this feature as well, including SMS message links, Whatsapp conversation links, Skype call links, Viber call links, Waze navigation links, Facebook Messenger links, and calendar event links.

You just need to carry out these simple steps:

Drag and drop the Button widget on your page,
Click on the Dynamic Tags icon on the very right of the Link field,

Select the Contact URL option from the dropdown,
Click on the wrench icon next to the Contact URL label to open the settings panel,

Choose the needed link type, like tel,
Enter the phone number. Fill in the rest button options. Done.

Generate phone and mailto links in Elementor manually

To manually create clickable phone and mailto links instead of the Smart Links, follow the instructions below:

Clickable Phone Links

To Create a Clickable Phone Link That Opens a Dial Dialog on Smartphones and Mobile Devices:

Enter tel: followed by the complete phone number, without dashes, like this:

tel:9855551212

Mailto Links

Simply enter the appropriate mailto: code into the Link field of any linkable widget.

To Create a Basic Mailto Link, with the TO: field filled out:

Type mailto: followed by the email address to send the email to, as shown in the example below:

mailto:jane@crumina.net

To Create a Mailto Link, with the TO: field and the SUBJECT: field filled out:

Add subject= followed by the text of the email’s subject

mailto:jane@somewhere.com?subject=Thank You For Getting In Touch

mailto:jane@somewhere.com?subject=Thank%20You%20For%20Getting%20In%20Touch

Final Thoughts

Nowadays the world of mobile devices has grown so much, that click-to-call links turn from simple convenience to absolute necessity. Most businesses have moved to smartphones. And it matters a lot if clients can reach you out with one tap on the mobile screen or not. Luckily, making phone numbers clickable is child’s play! Make sure you are reachable for your clients anytime through your website and let your business grow.