HTML Mailto Links Explained

HTML Mailto is uncomplicated to use. This link opens the default email client and adds a new notification maker. Pre-populated fields save time and prevent email bounces. This post will cover customizing mailto. We'll also discuss its viability in this decade. Come on.

HTML Mailto is uncomplicated to use. This link opens the default email client and adds a new notification maker. Pre-populated fields save time and prevent email bounces. This post will cover customizing mailto. We'll also discuss its viability in this decade. Come on.

HTML Mailto fundamentals

Because Mailto is a link, you must utilize the ahref property on it. For example, you can send an email when you click a link.

<a href="mailto:contact@mailslurp.dev">I want free Coupons</a>

If you want your leads to send this email to multiple people, just add commas to the code. It will resemble this:

<a href="mailto:contact@mailslurp.dev, Andrew@mailtrap.io, Jane@mailtrap.io">I want free Coupons</a>

Each URL opens the default email software or a web client in a new tab. Your browser and receiver's settings determine what happens.

A blank email with the "To:" field will appear if the recipient is logged in.

Customizing HTML Mailto attachment

Add Mailto subject line

If you want to add a subject line, use the code below automatically:

<ahref="mailto:contact@mailslurp.dev,Andrew@mailtrap.io,Jane@mailtrap.io?subject=Give%20me%20all%20your%20Coupons">

If this was your initial email address in your HTML Mailto, consider adding a "?" to separate them. For additional parameters, use "&." Use the percent 20' tag to separate text.

Adding the email body

In this stage, you use the 'body' parameter. And it will look something like this:

<ahref="mailto:contact@mailslurp.dev,Andrew@mailtrap.io,Jane@mailtrap.io?subject=Give%20me%20all%20your%20Coupons&body=Here%20are%20my%20parents'%20credit%20card%20numbers%3A%0D%0A%0D%0ACheers%2C%0D%0AHappy%20Customer">I want free Coupons</a>

This looks a bit cumbersome, but you can use %0D%0A to separate the lines.

Adding the CC and BCC part of the email

This email area is for notifying parties not directly involved in the business. It keeps them informed. So, to keep Andrew and Jane informed, employ these two functions.

The code will look like this:

<a href="mailto:contact@mailslurp.dev? cc=Andrew@mailtrap.io& bcc=Jane@mailtrap.io& subject=Give%20me%20all%20your%20Coupons&body=Here%20are%20my%20parents'%20credit%20card%20numbers%3A%0D%0A%0D%0ACheers%2C%0D%0AHappy%20Customer">I want free Coupons</a>

Skip the 'To' Field

Do you want others to email you or share your giveaway? Use the Mailto syntax to avoid the To field:

<a href="mailto:?subject=Folks%2C%20check%20this%20out!&body=These%20losers%20are%20giving%20away%20bitcoins!">Spread the news</a>

Open in a new tab

Finally, learn how to open a mailto link in a new tab.

Nothing changes if you employ this strategy and your users use Outlook or Apple Mail. The app opens with a pre-filled mail, target or not.

It matters if people use Gmail as their primary email client. Using the target=" blank" attribute, a customer can stay on your website and see additional "great" discounts. Otherwise, the identical window opens an email client.

Mailto Attachments

It's not that simple adding an attachment because sending data from a user's hard drive to an inbox is fraught with risk. So the mailto protocol lacks attachment support.

It'll be a link, not an attachment. Not always, but usually.

Reasons for HTML Mailto not to work

When Mailto hyperlink is not working, it is usually because the default email client does not match the one they use to send emails.

An unfamiliar client will load when they click a mailto link.

Is Mailto the best approach?

Embedded mailto links collect emails in milliseconds.

So you get a constant stream of spam in your mailbox. Use JavaScript or other methods to mask the address.

By providing a mailto link, you allow authorized outreach professionals to contact you. A hunter.io widget can locate hidden emails in code.

Alternatives

You can use anonymous contact forms.

Online tools make it simple to create appealing contact forms. You can also design your forms to complement your website's design.

Switching Mailto default settings

If they do not work, check your system or browser settings.

  • Windows: Settings > Default apps Follow the menu to choose default apps by protocol. Select a mail client.
  • Mac: Open Mac Mail. Click on "Mail" then "Preferences" in your email account. It modifies the default client.
  • Firefox: Locate the content type "mailto" in General/Applications. Then select the client.
  • If electing Gmail as preferred doesn't help. Instead, go to chrome:/settings/handlers. Make mail.google.com your default handler.

Bottom Line

You should now be able to customize and use a mailto link. On our blog, we cover architecture, software, and email setup for various frameworks and libraries. Check it out.

Ready to dive in?Start building email applications today.