What a mail link does and why you'd use one
A mail link is a clickable element on a webpage that opens the reader'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 to know their email address or have them type it — the link does that work.
Framer is a design and development tool that lets you build websites without writing code by hand. Creating a mail link in Framer means setting up that clickable element inside your Framer project so visitors can contact you directly from your site.
Mail links are useful because they lower the barrier to contact. A visitor doesn't have to copy your address, switch programs, and paste it in. They click once and start typing. This usually means more people actually reach out.
Key Takeaways
- A mail link opens the visitor's email program with your address already in the "To:" field when they click it.
- In Framer, you create a mail link by selecting a text or button element, then setting its link type to "mailto:" followed by your email address.
- You can add a subject line so the email opens with a pre-filled subject, which helps you sort incoming messages.
- Mail links work on phones and desktops as long as the visitor has an email program set up on their device.
Creating a basic mail link in Framer
Start by adding a text element or button to your Framer canvas — whichever you want visitors to click. Type the text that will appear on screen, like "Contact Us" or "Send me a message." This is what people see and click on.
With that element selected, look for the link settings in the right panel. Framer calls this the "Design" or "Interaction" panel depending on your view. Click the link icon or the field that says "Link" or "URL." Instead of pasting a web address, you'll type a special format: mailto:youraddress@example.com. Replace "youraddress@example.com" with your actual email address. That's the complete mail link — nothing else needed.
Test it by publishing your site or using Framer's preview mode. Click the element. Your email program should open with a blank message ready to send to that address. If nothing happens, check that you typed "mailto:" at the start and that your email address has no spaces.
Adding a subject line to mail links
You can make the mail link even more useful by pre-filling the subject line. This helps you sort incoming messages and reminds the visitor what they're writing about. The format is: mailto:youraddress@example.com?subject=Your Subject Here.
For example, if you run a freelance design business, you might use mailto:hello@yoursite.com?subject=Design Inquiry. When someone clicks that link, their email opens with "Design Inquiry" already in the subject field. They can change it if they want, but most won't.
If your subject line has spaces, Framer handles them automatically — you don't need to replace spaces with special characters. Just type the subject naturally between the equals sign and the closing bracket.
Adding a message body to mail links
You can go one step further and pre-fill the message body itself. This is useful if you want to prompt the visitor with questions or give them a template to fill in. The format adds another parameter: mailto:youraddress@example.com?subject=Your Subject&body=Your message here.
For instance, a photographer might use: mailto:bookings@yoursite.com?subject=Session Booking&body=Event date:%0ALocation:%0ANumber of hours needed:. The %0A creates a line break, so the message body appears on separate lines. When someone clicks that link, they see a form-like structure to fill in.
Keep the pre-filled message short. Long templates can feel pushy, and visitors often delete them anyway. A few guiding questions work better than a full form.
Making mail links work across devices
Mail links work on phones and desktops, but the behavior depends on what email program the visitor has set up. On a phone, clicking a mail link usually opens the default email app (Gmail, Apple Mail, Outlook, or whatever the user chose). On a desktop, it opens the default email client.
If someone hasn't set up an email program on their device, the link won't do anything — it won't error or break, it just won't trigger. This is rare on phones but more common on shared or work computers. For that reason, many sites show their email address as plain text somewhere on the page too, so visitors can copy it manually if needed.
Test your mail links on both a phone and a computer before publishing. The link itself works the same way, but seeing it in action on the devices your visitors actually use helps you spot any issues.
Styling and labeling mail links in Framer
Once you've set the mailto: link, style the element like any other button or text in Framer. Change the color, size, font, background, hover effect — all the usual design controls explore. Visitors should be able to tell it's clickable, so make it look like a button or underline it like a link.
Label it clearly. "Contact Us," "Email Me," or "Get in Touch" all work. Avoid vague labels like "Click Here" because they don't tell the visitor what will happen. If you use an icon (like an envelope), pair it with text so screen readers and people skimming the page understand it's a mail link.
If you're using a button element, Framer lets you add hover states — a color change or shadow that appears when someone hovers their cursor over it. This reinforces that it's interactive and builds confidence before they click.
Troubleshooting mail links that don't work
If you set up a mail link and it doesn't open email when clicked, check these common issues. First, verify you typed "mailto:" at the start — it's straightforward to forget. Second, make sure there are no spaces in the email address itself. Third, confirm the element is actually linked by clicking it in preview mode, not in the editor.
If the link works in preview but not after publishing, wait a few minutes for your site to fully deploy. Framer sometimes needs a moment to push changes live. Clear your browser cache (or open the site in an incognito window) to rule out an old version being cached.
On mobile, if the mail link doesn't work, the visitor may not have an email app configured. This is uncommon but possible on tablets or shared devices. Having your email address visible elsewhere on the page gives them a fallback option.
Frequently Asked Questions
Can I track whether someone clicked my mail link?
No — mail links are straightforward and don't send data back to you. They just open the visitor's email program. If you need to track contact form submissions, you'd use a form tool instead of a mail link. Framer integrates with services like Formspree or Zapier that can log submissions.
What happens if I use a mail link on a device without email set up?
Nothing happens — the click doesn't trigger an error, it just doesn't open anything. This is rare on phones but can occur on shared computers or tablets. Include your email address as plain text somewhere on the page so visitors can copy it manually if the link doesn't work.
Can I add multiple email addresses to one mail link?
Not in a practical way. You can technically list multiple addresses separated by commas, but most email programs don't handle this well. If you need to route messages to different people, use a contact form tool instead of a mail link.
Do mail links work on all email programs?
They work on all major programs — Gmail, Outlook, Apple Mail, Yahoo Mail, and others. They also work on phone email apps. The exact behavior varies slightly (some programs may ask for confirmation before opening), but the link itself is a web standard that's been around for decades.
Can I change the mail link after I publish my site?
Yes. Edit the element in Framer, change the mailto: address, and republish. The change goes live within a few minutes. Visitors who already bookmarked the old link will still have the old address, but new visitors will see the updated one.