Skip to main content

How to Create and Use mailto Links in JavaScript

A mailto link is a special type of hyperlink that opens the user's default email client and pre-fills the recipient's email address. While creating a static mailto link is best done with a simple HTML <a> tag, JavaScript is essential when you need to generate these links dynamically, for instance, by adding a subject and body from a contact form.

This guide will show you the standard HTML method, how to trigger mailto programmatically with JavaScript, and the powerful technique of adding a subject, body, CC, and BCC to the email.

The Foundation: The Standard HTML <a> Tag​

For a simple, static link, you don't need JavaScript. The most semantic and accessible way to create a mailto link is with a standard anchor (<a>) tag.

For example, you want a simple, clickable link that opens an email client.

The solution is to set the href attribute of an anchor tag to mailto: followed by the email address.

<a href="mailto:contact@example.com">Contact Us</a>
note

When a user clicks this link, their default email application will open with contact@example.com already in the "To" field. This is the best approach for static links.

Triggering mailto with JavaScript​

You should use JavaScript when you need to trigger the mailto action programmatically, for example, from a button click or other event. The most direct way to do this is by setting window.location.href.

For example, you have a button, and you want it to open the email client when clicked.

<button id="contact-btn">Email Support</button>

The solution is to attach a click event listener to the button that sets window.location.href.

const contactButton = document.getElementById('contact-btn');

contactButton.addEventListener('click', () => {
  window.location.href = 'mailto:support@example.com';
});
note

This action is functionally identical to a user clicking a standard <a> tag.

The Power of JavaScript: Dynamically Adding Subject, Body, and More​

The real power of using JavaScript is the ability to construct a complex mailto link with pre-filled fields. You can do this by adding query parameters to the URL, just like a standard web link.

The main parameters are:

  • subject: The subject line of the email.
  • body: The content of the email.
  • cc: Carbon copy recipients.
  • bcc: Blind carbon copy recipients.

The solution is to build a query string by starting with ? and separating each key-value pair with &.

const email = 'support@example.com';
const subject = 'Inquiry about Product #12345';
const body = 'Hello, I have a question about...';

const mailtoLink = `mailto:${email}?subject=${subject}&body=${body}`;

// To trigger it:
// window.location.href = mailtoLink;
console.log(mailtoLink);
// Output: mailto:support@example.com?subject=Inquiry about Product #12345&body=Hello, I have a question about...
note

However, this example has a flaw. The spaces and special characters in the subject and body will break the URL. This leads to the next crucial step.

Crucial Step: URL Encoding the Values​

To ensure that your subject and body are transmitted correctly, you must encode them using the encodeURIComponent() function. This function converts spaces and other special characters (like &, ?, /) into their URL-safe "percent-encoded" equivalents (e.g., a space becomes %20).

For example, a subject line with an ampersand (&) will break the mailto link.

const subject = 'Orders & Shipping'; // The '&' will prematurely end the subject

The solution is to wrap every dynamic value in encodeURIComponent().

const email = 'support@example.com';
const subject = 'Orders & Shipping';
const body = 'My order ID is 123.\n\nI have a question.';

// Always encode dynamic components!
const encodedSubject = encodeURIComponent(subject);
const encodedBody = encodeURIComponent(body);

const mailtoLink = `mailto:${email}?subject=${encodedSubject}&body=${encodedBody}`;

console.log(mailtoLink);
// Output: mailto:support@example.com?subject=Orders%20%26%20Shipping&body=My%20order%20ID%20is%20123.%0A%0AI%20have%20a%20question.
note

This creates a robust and correctly formatted link that properly handles all characters and even preserves line breaks (\n becomes %0A).

This script ties everything together. It takes user input from a form and constructs a fully-encoded mailto link when a button is clicked.

HTML:

<form id="contact-form">
  <input id="subject-input" type="text" placeholder="Subject">
  <textarea id="body-textarea" placeholder="Your message"></textarea>
  <button type="submit">Contact Support via Email</button>
</form>

JavaScript:

const contactForm = document.getElementById('contact-form');

contactForm.addEventListener('submit', function(event) {
  event.preventDefault();

  const subjectInput = document.getElementById('subject-input');
  const bodyTextarea = document.getElementById('body-textarea');
  
  const recipient = 'support@example.com';
  const subject = subjectInput.value;
  const body = bodyTextarea.value;

  // Crucially, encode the user-provided subject and body
  const encodedSubject = encodeURIComponent(subject);
  const encodedBody = encodeURIComponent(body);
  
  const mailtoLink = `mailto:${recipient}?subject=${encodedSubject}&body=${encodedBody}`;
  
  // Open the user's email client
  window.location.href = mailtoLink;
});

Conclusion​

Using mailto links is a simple way to help users send an email, and JavaScript makes it powerful and dynamic.

  • For static links, a standard HTML <a href="mailto:..."> tag is the best and most accessible choice.
  • To trigger a mailto link programmatically, use window.location.href.
  • To add a subject, body, or other fields, append them as a query string (e.g., ?subject=...&body=...).
  • Always use encodeURIComponent() on any dynamic values (like user input) before adding them to the link to ensure all characters are handled correctly.

Table of Contents