Make Email Address Clickable in WordPress

This section will teach you how to make a clickable link to an email address with or without the WordPress text editor or Gutenberg

Make Email Address Clickable in WordPress

This section will teach you how to make a clickable link to an email address with or without the WordPress text editor or Gutenberg. It’s a simple process that you will master in seconds.

Make Email Address Clickable in WordPress

You’ve probably seen clickable email addresses like this, fake@email.com.

The process of adding your email and making it clickable using the new WordPress block editor (Gutenberg) is almost the same, as the image below will illustrate.

The new Gutenberg editing experience How to Add a Link to an Email Address in WordPress

If you click that email address, it will open your computer’s default email client. So how do you add links like this to your WordPress site?

Here’s the easy way to add email links to posts and pages, plus the HTML you can use for menus and widgets.

HTML5 introduced some new link types, including the particular email link or Mailto link. WordPress helps you automatically link email addresses without touching the HTML.

First, type a plain email address into a post or page. Then highlight the email address text and click the link icon in the editor.

Make Email Address Clickable in WordPress
Make Email Address Clickable in WordPress

Alternatively, press cmd+k (ctrl+k) to use the link shortcut.

WordPress will recognize the email address and automatically insert the correct Mailto link for you.

WordPress will recognize the email address and automatically insert the correct Mailto link for you.
Make Email Address Clickable in WordPress

You’re done by press the enter/return key to add the link.

When linking to a website, you include “HTTP://” at the beginning. All links require a protocol, and “HTTP://” is the hypertext protocol we use for linking to web pages. Mailto is a different protocol. It’s used when connecting to an email address. In practice, you just need to remember to use “mailto:” instead of “HTTP://” when linking to an email address.

If you’re adding the link to a widget or menu, you won’t have the automatic Mailto link creation in the post editor.

This is how the URL should look when adding an email address link to a menu.

mailto:fake@email.com

And here is the complete HTML for a Mailto link.

<a href="mailto:fake@email.com">fake@email.com</a>

 

In this post, you learned how to add email links to any part of your site with WordPress by utilizing the HTML5 “Mailto” link.

Making email addresses clickable can make it easier for visitors to get in touch with you. You can even update the links to have a pre-written subject line.

If you have any questions about adding clickable email addresses to your site, please post a comment below.

Problems caused by email links

Before you add email links to your posts and pages, you need to consider some of the issues you will encounter. While the link looks simple, it may cause some trouble shortly.

Open your spam

Users often use scraping bots to search the web for email addresses. Essentially, these bots collect email accounts from the links above and add them to a spam database.

While the practice of selling email lists isn’t as powerful as it was in the early 2000s, it’s still common enough to fill your inbox with unwanted mail.

You should also be careful because hackers spam a lot by scraping website addresses. These messages range from phishing emails designed to steal your information to spreading malware.

Good spam protection should already be used with a hosting web service. However, it may be easier to avoid links in posts and pages.

Complications when sending emails

Using an email link in WordPress forces a visitor’s device to open their primary email platform. For example, a new message window will open if the visitor has Outlook installed. Unfortunately, this often causes problems when someone has multiple email addresses stored on their device.

People often complain that the “mailto:” command sends messages from the wrong reply-to address for some users. What if you had one lesson for contact and another for private messages to friends and family? When you clicked the email link, it might have been sent from the wrong address on your device.

Does it Work for Phone Numbers?

Yes, the same process, but we created some video tutorials to make it easier.

In addition, there are some awesome click-to-call plugins like the one in use in this tutorial.