How to Customize mailto Link

Email is a great way for a website to establish contact with its visitors and acquire new subscribers. Among the different existing tools, the mailto link is efficient and easy to implement.

This clickable text to send a message directly to a defined email address offers some interesting customization options. But if you are looking for email share button rather than customization of mailto link then you should read the following article:

Also Read: How to Create Email Social Share Button

In this article I am going to show you two different ways to customize mailto link. Before customization let me explain you first what is mailto link.

What is a mailto link?

mailto link is a hyperlink that allows user to send an email to a specific address directly from an HTML document, without having to copy and enter it into an email client like Gmail or Outlook.

For many users with Windows, these links will pop open Outlook and have an email all ready to go based on the criteria you have added to the mailto link.

It can be an effective way to cut down the number of steps required for a recipient to reach out to the email sender and acts as an effective call-to-action.

These email links are a great way to provide a contact option on your website, but they do come with some challenges.

How to customize the mailto link?

To customize your mailto link, follow these steps:

Step 1: To create your mailto link, start by writing the word or group of words that will serve you as a link, that is, what the user will see.

Example:

<a href="#">Contact us</a>

Step 2: Select the word or group of words, then insert the mailto link with in the address on which it must return to the user.

<a href="mailto:example@example.com">Contact us</a>

Step 3: The mailto link can also be customized by filling the subject and body of the email.

Follow the example:

‹a href="mailto:example@example?subject=Hello&body=Message">Contact us‹/a>

There are also online tools available which helps you to generate desired customize link. I have listed down few for you.

Tools to generate mailto link

There are some websites available to generate a code for your mailto link, which are as follows.

jQuery can help customize the mailto link too!!

The following snippet is highly customizable jQuery mailto link.

See the Pen Send Email on Button Click – Method #2 by jQuery by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

<div class="center">
      <button onclick="sendEmailDefault()" class="share-btn email">
        Send Email
      </button>
</div>

function sendEmailDefault() {
        var email = 'example@example.com';
        var subject = 'Enter the subject line';
        var msgBody =
          'Thank you for contacting us, we will get back to you in 24 hours!';
        window.open(`mailto:${email}?subject=${subject}&body=${msgBody}`);
}

I have shown two methods to customize the mailto link. It’s up to you to try both and see which one best matches your needs.