> ## Documentation Index
> Fetch the complete documentation index at: https://formbnb.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Framer

> Add FormBnB forms to your Framer site for unlimited submissions

## 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

<Steps>
  <Step title="Create FormBnB Form">
    Create a new form in your [FormBnB dashboard](https://app.formbnb.com) and copy the form slug.
  </Step>

  <Step title="Add Code Embed in Framer">
    In the Framer editor, add a **Code** component (from the Insert menu) where you want the form.
  </Step>

  <Step title="Paste Form HTML">
    Paste your FormBnB form HTML into the code component.
  </Step>

  <Step title="Publish">
    Publish your Framer site. The form is live.
  </Step>
</Steps>

## Example Embed

Paste this into a Framer Code component:

```html theme={null}
<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:

```html theme={null}
<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>
```

<Tip>
  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.
</Tip>