How to Create a Mailto Link

Mailto links open the user's email client with pre-filled information. They're perfect for contact links, feedback buttons, and support requests.

Basic Mailto Link

Mailto links have been part of the web since the early days, and they remain one of the most reliable ways to help users contact you. Unlike contact forms, they don't require server-side processing and work with whatever email client the user prefers.

<a href="mailto:hello@example.com">Email Us</a>

This simple link opens the user's default email client with your address pre-filled. While basic, it's often all you need for a straightforward contact link.

Adding a Subject

Pre-filling the subject line helps you organize incoming emails and gives users a helpful starting point. It's especially useful when you have multiple contact links on your site for different purposes.

<a href="mailto:hello@example.com?subject=Question%20about%20your%20product">
  Ask a Question
</a>

Spaces in the subject become %20 when URL-encoded. You can also use + signs instead, which are easier to read but achieve the same result.

All Parameters

Mailto links support several query parameters that let you pre-fill different parts of the email. Here are all the available options.

Now let's see how to combine these parameters for more sophisticated email links that save time for both you and your users.

Complete Example

Here's a comprehensive example that combines multiple parameters. This type of link works well for support requests or feedback forms where you want to guide the user's message.

<a href="mailto:support@example.com?subject=Support%20Request&body=Hi%20Support%20Team%2C%0A%0AI%20need%20help%20with...&cc=manager@example.com">
  Contact Support
</a>

The %0A codes create line breaks in the body text. The %2C is a URL-encoded comma. The CC ensures your manager sees all support requests.

Multiple Recipients

You can send to multiple people by separating email addresses with commas. This is useful for team contacts or when you want to copy stakeholders.

<!-- Multiple TO recipients (comma-separated) -->
<a href="mailto:sales@example.com,info@example.com?subject=Inquiry">
  Contact Sales
</a>

<!-- Multiple CC recipients -->
<a href="mailto:main@example.com?cc=copy1@example.com,copy2@example.com">
  Email with CCs
</a>

Multiple addresses in the TO field are separated by commas in the mailto portion, not as a query parameter. CC and BCC addresses can also include multiple recipients.

Adding Line Breaks

Formatting the body text with line breaks makes pre-filled messages much easier to read. Without proper breaks, your message becomes a wall of text.

Use %0A for line breaks and %0A%0A for paragraph breaks:

<a href="mailto:hello@example.com?subject=Feedback&body=Hi%20Team%2C%0A%0AI%20wanted%20to%20share%20some%20feedback%3A%0A%0A1.%20First%20point%0A2.%20Second%20point%0A%0AThanks!">
  Send Feedback
</a>

<!-- Decoded body text:
Hi Team,

I wanted to share some feedback:

1. First point
2. Second point

Thanks!
-->

Each %0A creates a single line break. Use two (%0A%0A) for paragraph spacing. The comment shows how the decoded message appears in the email client.

Building Links in JavaScript

When generating mailto links programmatically, you can let JavaScript handle the URL encoding automatically. This is safer and easier than manually encoding special characters.

function createMailtoLink(options) {
  const { to, subject, body, cc, bcc } = options;

  let mailto = `mailto:${to}`;
  const params = new URLSearchParams();

  if (subject) params.set('subject', subject);
  if (body) params.set('body', body);
  if (cc) params.set('cc', Array.isArray(cc) ? cc.join(',') : cc);
  if (bcc) params.set('bcc', Array.isArray(bcc) ? bcc.join(',') : bcc);

  const queryString = params.toString();
  if (queryString) {
    mailto += '?' + queryString;
  }

  return mailto;
}

// Usage
const link = createMailtoLink({
  to: 'support@example.com',
  subject: 'Help Request',
  body: 'Hi,\n\nI need help with...\n\nThanks!',
  cc: ['manager@example.com']
});

// Open in email client
window.location.href = link;

The URLSearchParams API handles encoding automatically. Note that we set window.location.href instead of using window.open() since mailto links don't open a new browser window anyway.

React Component

For React applications, a reusable component makes mailto links consistent and maintainable across your site. This component uses useMemo to only rebuild the URL when props change.

interface MailtoButtonProps {
  to: string;
  subject?: string;
  body?: string;
  cc?: string | string[];
  bcc?: string | string[];
  children: React.ReactNode;
}

function MailtoButton({
  to,
  subject,
  body,
  cc,
  bcc,
  children
}: MailtoButtonProps) {
  const href = useMemo(() => {
    const params = new URLSearchParams();

    if (subject) params.set('subject', subject);
    if (body) params.set('body', body);
    if (cc) params.set('cc', Array.isArray(cc) ? cc.join(',') : cc);
    if (bcc) params.set('bcc', Array.isArray(bcc) ? bcc.join(',') : bcc);

    const query = params.toString();
    return `mailto:${to}${query ? '?' + query : ''}`;
  }, [to, subject, body, cc, bcc]);

  return (
    <a href={href} className="mailto-button">
      {children}
    </a>
  );
}

// Usage
<MailtoButton
  to="hello@example.com"
  subject="Quick Question"
  body={`Hi,

I have a question about your services.

Best regards`}
>
  Email Us
</MailtoButton>

The component accepts the body as a template literal with natural line breaks. JavaScript handles converting those to the proper URL-encoded format behind the scenes.

Character Encoding

Understanding character encoding is crucial for mailto links because many common characters have special meaning in URLs. The table below shows the most frequently needed encodings.

Special characters must be URL-encoded:

Always use encodeURIComponent() in JavaScript rather than manually encoding. It handles all special characters including Unicode correctly.

Common Use Cases

These patterns cover the most common scenarios where mailto links are useful. Copy and customize them for your specific needs.

Contact Form Alternative

<a href="mailto:contact@example.com?subject=Website%20Inquiry&body=Name%3A%20%0ACompany%3A%20%0AMessage%3A%20">
  Contact Us
</a>

<!-- Opens with:
Subject: Website Inquiry
Body:
Name:
Company:
Message:
-->

This template creates a simple form-like structure in the email body. Users fill in the blanks, which helps you get consistent, useful information.

Bug Report

<a href="mailto:bugs@example.com?subject=Bug%20Report&body=Browser%3A%20%0AOS%3A%20%0ASteps%20to%20reproduce%3A%0A1.%20%0A2.%20%0A3.%20%0A%0AExpected%3A%20%0AActual%3A%20">
  Report a Bug
</a>

Bug report templates prompt users to include technical details that help you reproduce issues. The structured format saves back-and-forth communication.

Share via Email

function shareViaEmail(title, url) {
  const subject = encodeURIComponent(`Check out: ${title}`);
  const body = encodeURIComponent(`I thought you might like this:\n\n${title}\n${url}`);

  window.location.href = `mailto:?subject=${subject}&body=${body}`;
}

// No 'to' address - user adds their own recipient

Share links without a TO address let users email content to anyone they choose. This is useful for "Email this page" buttons on articles or product pages.

Limitations

Mailto links have some constraints you should be aware of. Understanding these helps you decide when to use mailto versus a contact form.

Despite these limitations, mailto links remain valuable for simple contact needs where you want to leverage the user's existing email setup.

Try the URL Builder

Use our Mailto Link template to build email links interactively.