HTML Phone Number

How To Make a Clickable HTML Phone Number In WordPress

HTML Phone Number

Users love convenience. They want to be able to do things with a single click of a button. Their ability to contact you also follows this rule. (e.g. html phone number)

If you want to make yourself as accessible as possible, making a clickable phone link will surely bring you closer to that goal. It makes it easier for your viewers to reach you and improves the overall user experience. In addition, it makes your web pages more dynamic, and therefore more professional.

The process of making phone numbers clickable is rather simple, and we’ll get to that in a minute, but first let’s explain a few things.

A Quick Guide To HTML Phone Number Links

Before we start making a call link, let’s get some things straight.

Links of phone numbers behave differently on different devices.

What this means is that what the browser is going to do after you click the link, depends only on the device you are using. For example, if you were to use an android phone, the link would launch your phone app. Some mobile browsers will automatically initiate the phone call when clicking on it. Using Chrome on the computer will trigger a dialog asking you to use another app or sync with your phone. In addition, you can install the addons for specific programs like Skype, which can then be used as your calling platform.

The mistakes you can make while creating HTML phone number links are minimal.

For example, people sometimes forget a colon or quotes when they write link code. The fix is simple, and since the code is rather short, you won’t have any trouble finding the problem. There is also a slight possibility that the phone numbers with dashes will not get recognized by certain mobile devices. To prevent errors, you should include the “+” alongside your country’s code for calls outside of your country.

Just keep to the instructions and you’ll be fine.

How To Manually Make A HTML Phone Number Link

To make clickable links the only thing you need to do is to write a simple HTML (hypertext markup language) code. No further action is required.

To do this you need to:

  1. If you are using a classic editor, go to text mode.
  2. Add an <a> tag (basically a link tag) with the following format:
    <a href=""></a>
  3. Insert the phone number you want your users to contact you with after “tel:”:
    <a href="tel:123456789"><a/>
  4. Add a custom text that you want to be displayed after “>”:
    <a href="tel:123456789">Click Here To Contact Me<a/>
    or use the phone number itself
    <a href="tel:1234567890">123-456-7890<a/>

An alternative way is to use the visual mode:

  1. Highlight the text you want to display as your HTML phone number link.
  2. Press the “Insert/Edit Link” button. (Or use Ctrl+K)
  3. Write or paste “tel:123456789” inside the text box.

Your link will now look something like this:

Click Here To Contact Me

or

123-456-7890

Making HTML Phone Number Links – The Plugin Way

The advantage of using a plugin for HTML phone links is that it is a super fast and easy way of doing so. Most of the time the process is as simple as typing your phone number and text you want to display. (no HTML input or web fundamentals knowledge required)

They often also include the style options and a button image, so there is that, too.

Therefore, if you don’t want to write a single line of HTML code, the following list is just for you.

Call Now Button

html phone number plugin

One of the simple plugins for WordPress, Call Now Button, does exactly what the name suggests – creates a click to call button for your mobile users. The interface is pretty self-explanatory, you can enable the button, enter the phone number and type in the button text. If you click on “Advanced Settings”, there are also color, position, click tracking and limit appearance options.

You can easily change everything to your liking, and for those wanting to track clicks (e.g. google developers) available options are:

Quick Call Button

clickable phone number html plugin

What is different with this plugin is the ability to precisely place the button wherever you want. The location is presented in percentage of the screen it will be displayed on. You can also change the size of the button, disable text on tablet or desktop, and change the colors of the bar, button, and text.

Sticky Side Buttons

sticky side

Aside from giving you the ability to create a clickable phone number button, this plugin also allows you to make buttons for different contact choices. (email, social media profiles, etc.) There is an option to change the colors of both the button and font, and pick an icon for it. You can also enable a slide animation to make it more interesting to the viewers.

In addition, you can disable a link on smartphones, if by any chance you need that option.

WP Call Button

wp call

We are mentioning WP Call Button because, apart from having a similar function to previous ones, it offers both sticky and static call buttons. The “static” option generates a shortcode that you can then copy and paste wherever you need it. It also has “Smart Phone Field” so you don’t make a mistake while writing your number. (there is an option for country codes here too) The only downside is that this plugin lacks the customization settings others on this list have.

Smart Floating Action Buttons

buttonizer plugin

And one of the best plugins for WordPress, for this purpose, is saved for last. This plugin is all in one solution for your contact needs. The thing you may notice is that there are some options only available in the full premium version. Though, you can still do so much more with the free one, that you could with any of the previous items on the list.

From its interface, you can:

  • add as many buttons as you want
  • position those buttons and style them
  • pick animation and icon (and style that icon)
  • write a text you want to display and choose the device it can be displayed on

From button action options you can choose:

  • Website URL address
  • Call action (phone number)
  • Mail action (email)
  • What’s up chat
  • “Back to top” function
  • “Go back one page” function
  • SMS, Facebook, Twitter, Skype, etc.
  • And if all that wasn’t enough, with the premium version you can put a custom javascript code to initiate after the click.

With Smart Floating Action Buttons Pro you can also add groups (to categorize buttons), make the buttons hide on scroll, change their id and class, change the time when the buttons will appear and more.

The <a> Tag Tips And Tricks – HTML Phone Number

Apart from being able to initiate a call, the <a> tag is used for all kinds of hyperlink possibilities.

For example, you can use:

  • mailto:” to send an email when someone clicks the link. The whole code would look something like this:
    <a href="mailto:johndoe@example.com">Email Us</a>
    or if you want to add a subject and a text to send, you can do so by:
    <a href="mailto:johndoe@example.com?subject=Hey%20There&body=Body-goes-here">Email Us</a>
    The “%20” presents an empty space while using URL encoding. You can use the generator on this page to change your text into URL friendly code automatically. If you combine it with <input> tag (there are many input types to choose from) and a little programming you could let people write a message to use as “body” of the email too.
  • callto:” to basically do the same thing as “tel:” but do it in an app like Skype. Since the process is the same as the “tel:” function, you can figure it out on your own.
  • sms:” – it results in exactly what you would expect, opens an SMS app on your phone. It can also be customized with:<a href="sms://1234567890?body=Hi%2C%20I%20am%20interested%20in%20contacting%20you!">Send me an sms!</a> So, it’s very similar to “mailto:”. The sad thing about “sms:” is that it doesn’t work on all devices, and on some, it only works partially.

Lastly, if you simply want to send your users to an ordinary link writing the following will do just that:

<a href="https://www.yourofficialwebsite.com">Go To My Official Website</a>

Additional HTML Codes

If you don’t want iOS devices to automatically detect the phone numbers, and thereby mess with your CSS styling, copy the following to your <head> section:

<meta name="format-detection" content="telephone=no">

Another good practice is using the rel=”nofollow” inside click to call links. When the google bots (aka the crawlers) enter your site, they follow each and every one of the links coming from your site. Now, since the phone links go nowhere in website crawling terms, you want those links not to affect your site’s score. That is why it is recommended for you to copy the following:

<a href="tel:+1234567890" rel="nofollow">123-456-7890</a>

The last quick tip is the most exciting one, we promise. Surely you’ve seen those instant “CALL” buttons while googling your favorite restaurant or any other business. (the ones next to “DIRECTIONS” and “WEBSITE”) Well, you too can easily create those for your site, using a certain structured code called schema markup. To show your phone number in search engines as Google, Bing or DuckDuckGo, copy and paste the following:

<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1 itemprop="name">Your Company's Name</h1> Phone: <span itemprop="telephone"><a href="tel:+18506484200"> 123-456-7890 </a> </span> </div>

Google Analytics Event Tracking

If you want to track those calls (or at very least potential calls) with Google Analytics, you can do so by copying the following code:

<a href="tel:1234567890" onclick="gtag('event', 'Click', { 'event_category': 'Call' });">Click to contact me!</a>

It is partly the same code as before, you need to put your phone number inside quotes, and write the desired message after “>”. The only thing changed is that your browser now knows it needs to log the moment you click the link and categorize it as “Call”.

Styling Your Phone Link With CSS

If you went the manual creation way, there is more you can do to make your HTML Phone Number link more inviting. Yes, we said that the before mentioned HTML code is enough to make the phone link, and it is, but a little style never hurt anybody.

Since what we are talking about here is the <a> tag, you can target it with CSS as a whole, and surely change the style of your link. This, of course, is not a good idea since it will also affect all of the other links on the page.

That is why we must be more specific. To do that, we will focus the styling to only change “tel:” links. This will give us the result we want.

a[href^="tel:"]:before {
content: "\260E";
display: block;
margin-right: 0.5em;
text-decoration: none;}

You’ve maybe noticed the part saying “content:”\260E”;”. This means that an icon with the CSS entity value of “260E”, which is basically a telephone icon, will be added to our link’s text. The “: before” part makes the icon appear just before the rest of the text. Here you can also change the color of the icon, the text, and the background. Furthermore, you could choose another font and its size. You can even change how the link will behave when a user hovers over it.

Helpful Styling Hints

If you want to change the color of your text or background you can do so by using:

  • color:” – for changing the color of the text
  • background-color:” – if you want to alter the background color of the element.
  • and finally, you can use “outline-color:” for setting the outline color of your link object.

In the case that you are not sure what you should put as HTML colors, you can use the color picker like this one and paste it back in your code.

In addition, if you are looking for an informative list containing all of the CSS codes you would ever need you can check out this page. There you will find codes for alignment, style, and even some animations.

Conclusion 

So, as you saw, the current state of telephone links is not perfect, but it gets the job done. You can easily learn to create, and do some pretty cool things with them.

If you need any additional help you can write a comment below. Lastly, for those interested in WordPress and WordPress tutorials, check our blog here.