Hello Sunil
customize-mailto-link

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.

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.

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.

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

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.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.