How to Set Email Subject and Body with mailto: Links

By the end of this page, you will understand how mailto: links work, how to prefill email fields like subject and body, what the correct URL syntax looks like, and what limitations to expect across email clients and browsers.

The mailto: scheme is a special type of URL that opens the user's default email application instead of navigating to a web page. It can do more than just specify the recipient address. You can also attach query parameters to prefill parts of the email, such as:

• subject
• body
• cc
• bcc

A basic mailto: link looks like this:

mailto:user@example.com

A more complete one looks like this:

mailto:user@example.com?subject=Hello&body=How%20are%20you%3F

This matters because it gives users a quick way to contact someone from a website or app while reducing the amount of typing they need to do.

However, mailto: does not send the email by itself. It only opens the user's email client with some fields pre-filled. The user still needs to review and send the message manually.

It is also important to URL-encode special characters such as spaces, line breaks, &, and ?, because mailto: uses URL syntax.

Think of a mailto: link like a pre-filled paper form.

• The email address is the person you want to send it to.
• The subject is the title already written on the form.
• The body is the message text already filled in.
• Clicking the link hands that form to the user's email app.

But the app does not mail it automatically. The user still has to press Send.

The general syntax is:

mailto:recipient@example.com?subject=Your%20Subject&body=Your%20message

Example: subject only

<a href="mailto:support@example.com?subject=Help%20needed">Email support</a>

This opens the user's email app with:

• To: support@example.com
• Subject: Help needed

Example: subject and body

<a href="mailto:support@example.com?subject=Bug%20Report&body=I%20found%20a%20problem%20on%20your%20site.">Report a bug</a>

This prefills both the subject and the message body.

Example: body with line breaks

<a href="mailto:jobs@example.com?subject=Job%20Application&body=Hello%2C%0A%0AI%20would%20like%20to%20apply%20for%20the%20role.%0A%0ARegards">Apply by email</a>

Here:

• %20 represents a space
• %0A represents a new line
• %2C represents a comma

Example: multiple fields

<a href="mailto:team@example.com?cc=manager@example.com&subject=Project%20Update&body=The%20latest%20status%20is%20attached.">Send update</a>

When using multiple fields:

• Start the first parameter with ?
• Separate additional parameters with &

Safer JavaScript example

If you build the link dynamically, encode values first:

const email = "support@example.com";
const subject = encodeURIComponent("Bug Report");
const body = encodeURIComponent("I found an issue on the checkout page.\nPlease investigate.");

const mailtoLink = `mailto:${email}?subject=${subject}&body=${body}`;
console.log(mailtoLink);

This helps prevent broken links caused by special characters.

Consider this example:

<a href="mailto:hello@example.com?subject=Meeting%20Request&body=Hello%2C%0ACan%20we%20meet%20tomorrow%3F">Send email</a>

Step by step:

1. The browser sees a link starting with mailto:.
2. Instead of opening a normal web page, it asks the operating system to open the default email client.
3. hello@example.com is placed into the To field.
4. The query string begins after ?.
5. subject=Meeting%20Request sets the email subject to Meeting Request.
6. &body=... adds the body text.
7. Encoded characters are decoded:
   • %20 becomes a space
   • %0A becomes a line break
   • %3F becomes ?
8. The email draft opens, and the user can edit or send it.

The final draft looks roughly like this:

• To: hello@example.com
• Subject: Meeting Request
• Body:

  Hello,
  Can we meet tomorrow?
  

mailto: links are commonly used in small and medium-sized web projects where opening the user's email app is enough.

Common use cases

• Contact links on personal websites or company pages
• Support requests with a prefilled subject like Support Request
• Bug reporting with a template in the body
• Job applications with a predefined subject line
• Feedback forms that redirect to email instead of storing data in a database

Example scenarios

Customer support

<a href="mailto:support@example.com?subject=Support%20Request">Contact support</a>

Bug report template

<a href="mailto:bugs@example.com?subject=Bug%20Report&body=Page%3A%20%0ASteps%20to%20reproduce%3A%20%0AExpected%20result%3A%20%0AActual%20result%3A%20">Report a bug</a>

Feedback button

<a href="mailto:feedback@example.com?subject=Website%20Feedback">Send feedback</a>

These templates make it easier for users to provide structured information.

In real projects, developers usually use mailto: in simple cases where a full backend email system is unnecessary.

Common patterns

1. Prefilled support links

Developers create links with a standard subject so support emails are easier to sort.

<a href="mailto:support@example.com?subject=Account%20Help">Account help</a>

2. Template-based bug reports

A body template guides the user to include useful details.

<a href="mailto:bugs@example.com?subject=Bug%20Report&body=Browser%3A%20%0ADevice%3A%20%0AProblem%3A%20">Report issue</a>

3. Dynamic generation with encoding

In JavaScript apps, the link is often built from user or app data.

function createMailto(recipient, subject, body) {
  return `mailto:${recipient}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
}

4. Fallback simplicity

Teams often avoid putting too much data into a mailto: link because support varies across devices and clients.

Important practical note

mailto: is usually best for:

• quick contact links
• simple templates
• small websites

For production systems that must reliably send emails, developers usually use:

• backend email services
• contact forms
• transactional email APIs

That is because mailto: depends on the user's local email setup.

1. Forgetting to URL-encode spaces and symbols

Broken example:

<a href="mailto:test@example.com?subject=Hello World&body=How are you?">Send</a>

Problem:

• Spaces and special characters may break the URL or behave unexpectedly.

Better:

<a href="mailto:test@example.com?subject=Hello%20World&body=How%20are%20you%3F">Send</a>

2. Using ? more than once

Broken example:

<a href="mailto:test@example.com?subject=Hi?body=Message">Send</a>

Problem:

• Only the first ? starts the query string.
• Additional parameters must use &.

Correct:

<a href="mailto:test@example.com?subject=Hi&body=Message">Send</a>

3. Assuming mailto: sends email automatically

mailto: only opens the draft in the user's email app. It does not send anything by itself.

4. Forgetting that some users do not have a local email client configured

If no mail app is set up, the link may not work as expected.

5. Putting too much content in the body

Very long mailto: links can become hard to maintain and may not behave consistently across platforms.

6. Not encoding line breaks

Broken example:

<a href="mailto:test@example.com?body=Hello,
How are you?">Send</a>

Correct:

<a href="mailto:test@example.com?body=Hello%2C%0AHow%20are%20you%3F">Send</a>

mailto: vs contact form

• Use mailto: when you want something simple and quick.
• Use a contact form when you need validation, storage, spam protection, or guaranteed submission.

mailto: vs backend sending

• mailto: lets the user send the email.
• Backend sending lets your application send the email.

If reliability matters, mailto: is usually not enough.

Basic syntax:
mailto:recipient@example.com

With subject:
mailto:recipient@example.com?subject=Hello

With subject and body:
mailto:recipient@example.com?subject=Hello&body=How%20are%20you%3F

With multiple parameters:
mailto:recipient@example.com?cc=copy@example.com&subject=Hi&body=Message

Rules

• Use ? before the first parameter.
• Use & between additional parameters.
• URL-encode spaces and special characters.
• %20 = space
• %0A = newline
• %3F = ?
• %2C = ,

JavaScript helper

const link = `mailto:test@example.com?subject=${encodeURIComponent("Hello")}&body=${encodeURIComponent("Line 1\nLine 2")}`;

Remember

• mailto: opens an email draft.
• It does not send the message automatically.
• Support can vary by browser, OS, and email client.

Can I set the subject in a mailto: link?

Yes. Use the subject query parameter:

mailto:test@example.com?subject=Hello

Can I set the email body too?

Yes. Use the body parameter:

mailto:test@example.com?body=Hello%20there

Can I use both subject and body together?

Yes:

mailto:test@example.com?subject=Hello&body=How%20are%20you%3F

How do I add line breaks in the body?

Use %0A for a new line.

Does mailto: work in every browser?

It is widely supported, but behavior depends on the browser, operating system, and the user's configured email app.

Can mailto: send the email automatically?

No. It only opens a draft in the user's email client.

Should I use mailto: for a production contact system?

Only for simple cases. If you need reliability, validation, tracking, or guaranteed delivery, use a contact form and backend email service instead.

• URL encoding — Needed to safely include spaces, punctuation, and line breaks in mailto: links.
• Query parameters — subject and body are passed as URL query parameters.
• HTML links — mailto: is commonly used inside an <a> tag.
• HTTP forms — A common alternative when you need more control than mailto: provides.
• Client-side JavaScript — Useful for generating mailto: links dynamically.
• Backend email sending — Relevant when your application needs to send emails directly without relying on the user's email client.