No plan upgrade for one form
Framer's native form components sit on the paid plans at the time of writing. An Embed with your own HTML posts straight to mailcontact from any published Framer site.
integrations · site builder
A contact form for your Framer site, with one Embed.
The quickest way to add a contact form to a Framer site is a code Embed: paste a few lines of plain HTML, point the form at your mailcontact endpoint, and submissions land in your project's inbox, with a ping in Discord, Slack, or email.
Framer ships native form components, but they're part of the paid plans at the time of writing. The Embed route is different: it's your own markup posting to an external endpoint, so it works on any Framer site and doesn't touch Framer's form features at all.
Each inbox also comes with a real email address (yourproject@mailcontact.app) that works immediately. Handy when a Framer landing page needs a contact address before you've set up mail on the domain.
the snippet
A working form for Framer, in one paste.
Point the form at your project's mailcontact endpoint. Submissions land in your project inbox. No server, no API route, no email service to wire up.
Insert → Embed → HTML
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
<input type="text" name="name" placeholder="Your name" />
<input type="email" name="email" placeholder="you@email.com" required />
<textarea name="message" placeholder="What can we help with?" required></textarea>
<button type="submit">Send</button>
</form>
<style>
form { display: grid; gap: 8px; font-family: system-ui, sans-serif; }
input, textarea, button { padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 8px; font: inherit; }
textarea { min-height: 96px; resize: vertical; }
button { background: #111; color: #fff; border: none; cursor: pointer; }
</style>how it works
Three steps, start to finish.
01
Create an inbox
One inbox per project. Name it after your Framer site and you get a form endpoint and a project email address immediately.
02
Paste into an Embed
In Framer, insert an Embed component, switch it to HTML, and paste the snippet with your form id. Resize the component so the whole form fits.
03
Get notified
Add a Discord, Slack, email, or webhook channel. Every submission pings you where you already are.
why mailcontact
Built to pair well with Framer.
Nothing to host behind the site
Framer publishes your pages, but there's no server of yours behind them. The form posts to mailcontact directly. CORS is open, so framer.website subdomains and custom domains both work.
An email address in the same inbox
A Framer landing page usually needs a contact address too. yourproject@mailcontact.app works from the first second (no DNS records) and lands next to your form submissions.
faq
Framer + mailcontact, answered
Do I need a paid Framer plan to add a contact form?
Not with this approach. Framer's built-in form components are a paid feature at the time of writing, but the snippet above is plain HTML inside an Embed posting to mailcontact. It doesn't use Framer's form features at all.
How do I show a success message after submitting?
The endpoint replies with a small JSON body, so a native form post navigates to that raw response. Add a few lines of script inside the Embed to submit via fetch and swap in a thank-you message instead. A configurable redirect for native posts is coming with the launch.
Can I style the form to match my Framer design?
Yes, the markup is entirely yours. Embed HTML doesn't inherit your Framer styles, so include a style block (like the snippet does) and set the same fonts and colors you use elsewhere on the site.
Does it work from a free framer.website subdomain?
Yes. The endpoint accepts cross-origin posts from any domain, so free subdomains and custom domains both work. Rate limits are generous for a contact form: 20 requests per minute per IP.
related
Also works with
One inbox for every Framer project you ship.
Forms and a real email address, together, with notifications where you live. Launching soon. Be the first to know.