Framer - FormBnB Documentation

Why Use FormBnB with Framer

Framer’s built-in form component is limited. FormBnB gives you:

Unlimited form submissions on the free plan
Spam protection (honeypot, reCAPTCHA, Turnstile)
Email notifications and auto-responders
Webhook integrations
21+ integrations (Slack, Discord, Google Sheets, etc.)
Full API access to your submission data

Setup Steps

Create FormBnB Form

Create a new form in your FormBnB dashboard and copy the form slug.

Add Code Embed in Framer

In the Framer editor, add a Code component (from the Insert menu) where you want the form.

Paste Form HTML

Paste your FormBnB form HTML into the code component.

Publish

Publish your Framer site. The form is live.

Example Embed

Paste this into a Framer Code component:

<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST" style="max-width:500px;font-family:Inter,sans-serif;">
  <input type="text" name="_gotcha" style="display:none">

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;">
  </div>

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;">
  </div>

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;">Message</label>
    <textarea name="message" rows="4" required
      style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px;resize:vertical;"></textarea>
  </div>

  <button type="submit"
    style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;">
    Send Message
  </button>
</form>

AJAX Submission (No Page Redirect)

For a smoother experience without leaving the page:

<form id="formbnb-form" style="max-width:500px;font-family:Inter,sans-serif;">
  <input type="text" name="_gotcha" style="display:none">

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;">
  </div>

  <div style="margin-bottom:16px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;">Message</label>
    <textarea name="message" rows="4" required
      style="width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;resize:vertical;"></textarea>
  </div>

  <button type="submit"
    style="width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:8px;cursor:pointer;">
    Send Message
  </button>
  <p id="form-status" style="margin-top:12px;font-size:14px;display:none;"></p>
</form>

<script>
  const form = document.getElementById('formbnb-form');
  const status = document.getElementById('form-status');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(form);

    try {
      const res = await fetch('https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM', {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' }
      });

      if (res.ok) {
        status.textContent = '✓ Message sent!';
        status.style.color = 'green';
        form.reset();
      } else {
        throw new Error();
      }
    } catch {
      status.textContent = 'Something went wrong. Try again.';
      status.style.color = 'red';
    }
    status.style.display = 'block';
  });
</script>

Use inline styles to match your Framer site’s design. Framer’s Code component doesn’t have access to your site’s CSS classes, so inline styles are the way to go.

​Why Use FormBnB with Framer

​Setup Steps

​Example Embed

​AJAX Submission (No Page Redirect)

Why Use FormBnB with Framer

Setup Steps

Example Embed

AJAX Submission (No Page Redirect)