How do you display phone number in html?
123-456-7890
Href=tel: creates the call link. This tells the browser how to use the number.
“Tel: 123-456-7890 “creates the HTML phone number. The number within the quotes is the number it will call.
The number within the >< tags is the visual portion and it can be anything you want it to be including the phone number, a line of
text such as “Click to Call” or “Call Now”, or any other call to action you want. It should be descriptive of what’s going to happen when they click.
Displaying a message instead of the number would look like this:
CLICK TO CALL
Your visitors will see the text but when they click on it they see the dialing screen of their phones with your number ready for them to click the call button.
Adding an Extension
Some phone numbers have an extension. You can add code that will create
a brief pause before dialing the extension number. Adding P in front of the extension will add a one-second pause. The code might look like this:
CLICK TO CALL
This dials the number, waits one second, and then dials extension.
You can have it to wait for a dial tone by using w instead of p.
Adding Country Codes
Country codes can be added by including
a + along with your country’s code before the phone number. An example might look like this:
123-456-7890
Adding Microdata for Local SEO
234567890
Other Calls to Action
With HTML5, you’re not limited to phone numbers. You can add other calls to action such as email, messaging, fax, etc. HTML5 protocols include:
- tel: – place a phone call
- mailto: – open an email app
- callto: open Skype
- sms: – send a text message
- fax: – send a fax
All of these protocols are used in the same way as we saw above. Let’s look at a
few examples.
Adding the Code to Your Contact Page
One of the best places to add a call link is within your contact info on your Contact Us page.
[email protected]
Just like the phone link, you can use the visual portion to add a message, such as:
Click here to send me an email
Just like the phone link, you can use the visual portion to add a message, such as:
< href="mailto: [email protected]"; Click here to send me an email
See the sample page>
I’ve
added another blurb with code to see the events page.
Disable on Desktop and Tablet
One problem with call links is they’re not useful for desktops or tablets. You can solve this with Divi by creating modules that are specific to each type of device, and then disabling them on the other devices.
Here,
I’ve created two modules with the phone number: one includes an HTML phone number and the other doesn’t. I’ve disabled the one with the clickable number on tablets and desktops, so they’ll never see the link. I’ve also disabled the module without the link for phones, so phone users will only see the module with the link.
Adding the Code to your Header or Footer
You can add the code to your header or footer using the theme editor. Always use a child theme or your PHP code will be overwritten when you update the theme. This will require some CSS styling to look good.
In your Dashboard, go to Appearance > Editor > Theme Header
[or Theme Footer]. Place the code within the portion of code. I looked for an ending tag , clicked enter to add a few extra lines, and pasted in my code. You can see the code here on lines 28 and 29.
123-456-7890 CLICK TO CALL
This example just shows the text.
In this one, I’ve added the phone number along with the text.
Testing
on Mobile
I recommend testing the links with mobile devices to make sure it works. If you don’t have access to a smartphone you can use Google Chrome’s Developer Tools.
Right click on your homepage and select Inspect. At the top left corner of your screen, you’ll see a list of devices. Select the one to see how your website looks on that screen. Clicking the HTML phone number link should open a dialog
box asking you to choose an app. If you see this, the link works. I still recommend trying it on an actual smartphone, but this is a good indication that the link it doing something.
Adding Call Links with Plugins
You can also add a call link to your header with a plugin. They typically include features for styling, adding multiple calls to action, and the ability to be turned on or off based on the device of the visitor. They’re also easy to set up and use. These are great choices
if you don’t want to handle code. Here are a few of the best options.
Call Now Button
Call Now Button adds a click-to-call button to the bottom of the screen for your mobile visitors. It doesn’t show on other devices. You can also add text if you want. The button is a phone icon so it’s easy to understand what it’s for. All you have to do is enable the button and enter your phone number. You can change the default behavior in the
advanced settings.
More Information
Sticky Side Buttons
This plugin lets you add buttons that stick to the side of your website and remain on screen when the user scrolls. You can add a clickable phone number, email address, social media icons, and store locations. Set them on the right or left, choose
animation and rollover styles, customize the colors, and choose where they show.
More Information
Speed Contact Bar
This one adds a contact bar that includes clickable links for a phone number, fax number, a headline, address, email, social networks, and custom URLs. Set the bar to the top or bottom and adjust the size, color, color of the text and links, and how
the bar reacts. You can also adjust the size. you can add more content using filter hooks.
More Information
Mobile Contact Bar
This plugin adds links to your website when viewed on mobile devices. You can choose which links are shown from 13 options including phone, email, Skype, custom URLs, and social networks. It has FontAwesome integration for the icons. You can style
the links and choose the size, border, opacity, etc. Set the menu at the top or bottom of the screen. The menu remains on the screen when the user scrolls. It also includes scroll to top and WooCommerce cart with item counter buttons.
More Information
Final Thoughts
The popularity of smartphones to access websites is increasing every day. This popularity takes call links
from being a simple convenience to a complete necessity. Adding clickable phone numbers can make the difference between users calling your business or your competitors. Fortunately, it isn’t that difficult to create clickable links to add HTML phone numbers to your headers, footers, widgets, pages, and posts of your WordPress website.
We want to hear from you. Have you added a call links to your website? Let us know about your experience in the comments below.
Featured
Image via Jane Kelly / shutterstock.com
To format phone numbers in the US, Canada, and other NANP [North American Numbering Plan] countries, enclose the area code in parentheses followed by a nonbreaking space, and then hyphenate the three-digit exchange code with the four-digit number.