FormThunder isn't open yet. This site describes the service as it will run at launch. Find out more

FormThunder
Menu

Add a Framer contact form with an Embed and your own HTML

To add a FormThunder contact form to Framer, place an Embed component on the page, switch it to HTML, and paste the form below. The form brings its own styling, because Framer's styles don't reach inside the embed. Each submission is stored by FormThunder and emailed to your verified address.

Updated

The Framer code

  1. Insert an Embed component and set its type to HTML.
  2. Paste the code, and set the embed's size so the whole form shows.
  3. Publish, then send a test from the live site.
Embed HTML
<style>
  .tf { display: grid; gap: 12px; font: 15px system-ui, sans-serif; }
  .tf input, .tf textarea { width: 100%; padding: 10px; border: 1px solid #d4d4d8; border-radius: 8px; box-sizing: border-box; }
  .tf button { padding: 10px; background: #111; color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
</style>
<form class="tf" action="https://formthunder.com/submit" method="POST" target="_top">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="redirect" value="https://yoursite.com/thanks">
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1">
  <input name="name" placeholder="Name" aria-label="Name" required>
  <input name="email" type="email" placeholder="Email" aria-label="Email" required>
  <textarea name="message" rows="5" placeholder="Message" aria-label="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.

Notes for Framer

  • target="_top" matters. Without it, the redirect can load your thank-you page inside the embed frame.
  • Match your Framer styles by copying its colours and font into the <style> block. If your font is a Google Font, add its <link> above the style block.
  • Framer's own Form component can post to a webhook, but it won't send fields like access_key in the shape /submit expects. Use the Embed.

Or have your AI add it

Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.

You, to your AI
Add a FormThunder contact form to this Framer site that emails hello@example.com. Send a test when you're done.

Questions

Can I style this to match my Framer site?

Yes, through the style block in the embed. Framer's theme doesn't reach into it, so set the colours and font yourself.

Do I need a paid Framer plan?

Check Framer's current plans. The form itself doesn't care, as long as the Embed is available and the site can publish.

Related guides

Get your Framer form sending

The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.

Get started freeRead the quickstart