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 ([email protected]) that works immediately. Handy when a Framer landing page needs a contact address before you've set up mail on the domain.

Create an account Read the docs

recommended setup

Use the MailContact script with your own design.

Add this HTML to your site, or use the form builder. Replace the form link with yours. The hosted script injects the hidden check, handles sending and automatic verification, and preserves the draft on errors. You control the HTML and CSS. Free forms display a visible “Processed by mailcontact.app” link; Pro and Plus do not. Feedback follows the browser’s language; set data-mailcontact-language="fr" on the form to force French.

contact.html

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form>
  <fieldset>
    <legend>Contact us</legend>
    <label>
      Name (optional)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Message
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Website
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Send message</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

For a component with its own submit handler, load the same script and use MailContact.prepare(form) and MailContact.send() instead of the automatic marker. See the custom interface reference for loading, feedback and Free attribution.

the snippet

Alternative: a direct integration for Framer.

This example posts directly to the API. Keep the required company_website field present and empty. Native posts open JSON on success or a verification page when needed. Custom scripts without verification support send suspicious messages to Spam for review; strong spam is also held there without notifications or quota usage. A success response confirms reception, including review, or a silent discard of a filled check. See spam protection for the full behavior.

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="[email protected]" required />
  <textarea name="message" placeholder="What can we help with?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</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.

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.

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.

Get notified

Add a Discord, Slack, email, or webhook channel. Delivered messages ping you where you already are.

why mailcontact

Built to pair well with Framer.

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.

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. [email protected] 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. Use the hosted MailContact script inside the Embed to handle submission, verification and inline feedback. A configurable redirect for native posts is not currently available.

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.

One inbox for every Framer project you ship.

Forms and a real email address, together, with notifications where you live. Start with a free account.

Create your free form

No credit card needed. Free includes one project and 50 form messages per month.