What a mail link does and why you'd use one

A mail link is a clickable element on your website that opens the user's email program and starts a new message to a specific address. When someone clicks it, their default email client (Gmail, Outlook, Apple Mail, or whatever they use) launches with the "To:" field already filled in. You don't need any backend code or email service to make this work — it's built into how web browsers handle links.

Mail links are useful when you want people to contact you but don't want to display your email address as plain text on the page, where spam bots can find it. They're also faster than asking someone to copy an address and open their email manually. In Framer, you create them using a special link format that takes about 30 seconds to set up.

Key Takeaways

  • Mail links use the mailto: format in the URL field and work in Framer's link component without any code.
  • The basic format is mailto:yourname@example.com, and you can add a subject line and message body if you want.
  • Test the link in preview mode before publishing to make sure it opens your email program correctly.
  • Mail links work on desktop and mobile, though mobile users see their phone's email app instead of their computer's.

Creating a basic mail link in Framer

Open your Framer project and select the text, button, or other element you want to turn into a mail link. In the right panel, look for the link icon or the URL field — this is where you paste the mail link format. Type or paste mailto:yourname@example.com, replacing "yourname@example.com" with the actual email address you want people to reach.

That's the complete setup. When someone clicks that element, their email program opens with a blank message addressed to that email. No configuration needed, no external services, no code to write. Framer treats it like any other link.

Adding a subject line to the mail link

If you want the email to arrive with a subject line already filled in, add ?subject= after the email address. For example: mailto:contact@example.com?subject=Website%20Inquiry. The %20 represents a space — you need this because URLs can't contain regular spaces.

This is helpful when you want emails organized by topic or when you're linking from a specific page and want the subject to reflect that. A user can still change the subject before sending, so this is just a convenience, not a restriction.

Adding a message body to the mail link

You can also pre-fill the message body using &body=. The full format looks like this: mailto:contact@example.com?subject=Website%20Inquiry&body=Hello%20there. Again, use %20 for spaces and %0A for line breaks if you want the message to span multiple lines.

This is useful when you want to guide the user toward what information to include. For example, you might pre-fill a message that says "I'm interested in your services. Here's what I need:" and let them add details. The user can edit or delete the pre-filled text before sending, so it's a starting point, not a locked message.

Testing your mail link before publishing

Click the preview button in Framer to test the link in a live preview. Click the element with the mail link and confirm that your email program opens with the correct address, subject, and body text (if you added those). On a desktop computer, your default email client should launch. If nothing happens, double-check that you used the correct format and that your email address has no typos.

If you're testing on a phone or tablet, the behavior changes slightly — mobile devices open their native email app instead of a desktop client. This is normal and expected. Test on both a computer and a phone if your site gets mobile traffic, just to confirm the link works in both places.

Common mistakes and how to avoid them

The most frequent error is forgetting the mailto: part at the beginning. Without it, Framer treats the text as a regular URL and tries to navigate to it as a web page, which fails. Always start with mailto: before the email address.

The second mistake is using regular spaces instead of %20 in the subject or body. A space in a URL breaks the link. If you're adding multiple parameters (subject and body), make sure you use & to separate them, not a question mark for the second one. The format is ?subject=...&body=..., not ?subject=...?body=....

Frequently Asked Questions

Can I make a mail link that sends to multiple addresses?

Yes, separate multiple addresses with commas: mailto:person1@example.com,person2@example.com. All addresses will appear in the "To:" field when the email opens. Some older email clients may not handle multiple addresses correctly, but most modern ones do.

What happens if someone doesn't have an email program set up?

On a computer without a default email client, clicking the link may do nothing or show an error. On a phone, the native email app always exists, so the link works. If you're concerned about this, you can offer both a mail link and a contact form as alternatives.

Do mail links work on all browsers and devices?

Yes, mail links are supported on all modern browsers and devices. Desktop browsers open the user's default email client. Mobile browsers open the phone's email app. The link format is a web standard that's been around for decades.

Can I track whether someone clicked the mail link?

No, mail links don't send data back to your website. Once the email program opens, the connection between your site and the user's action is broken. If you need to track contact attempts, you would need to use a contact form instead of a mail link.

Should I hide my email address in a mail link to prevent spam?

Mail links provide some protection because the address doesn't appear as plain text on the page, which makes it harder for automated spam bots to scrape. However, the address is still visible in the page's HTML code if someone inspects it. If you receive heavy spam, a contact form with server-side validation is more effective than a mail link alone.