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

# Typedream

> Connect FormBnB forms to your Typedream website

## Why Use FormBnB with Typedream

Typedream is a simple website builder, but its form features are basic. FormBnB adds:

* Unlimited submissions on the free plan
* Spam protection (honeypot, reCAPTCHA, Turnstile)
* Email notifications and auto-responders
* Webhooks and 21+ integrations
* File upload support
* Full API access to submissions

## 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 Embed Block">
    In the Typedream editor, add an **Embed** block to your page.
  </Step>

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

  <Step title="Publish">
    Publish your Typedream site.
  </Step>
</Steps>

## Example Embed

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST" style="max-width:480px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
  <input type="text" name="_gotcha" style="display:none">

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

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

  <div style="margin-bottom:14px;">
    <label style="display:block;font-size:14px;margin-bottom:4px;font-weight:500;">Message</label>
    <textarea name="message" rows="4" required
      style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;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;font-weight:500;cursor:pointer;">
    Send Message
  </button>
</form>
```

## AJAX Submission

For a smoother experience without page navigation:

```html theme={null}
<form id="formbnb-form" style="max-width:480px;font-family:inherit;">
  <input type="text" name="_gotcha" style="display:none">

  <input type="email" name="email" placeholder="Your email" required
    style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;margin-bottom:12px;font-size:14px;">

  <textarea name="message" placeholder="Your message" rows="4" required
    style="width:100%;padding:10px 12px;border:1px solid #e2e2e2;border-radius:8px;margin-bottom:12px;font-size:14px;resize:vertical;"></textarea>

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

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

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM', {
        method: 'POST',
        body: new FormData(form),
        headers: { 'Accept': 'application/json' }
      });
      if (res.ok) {
        status.textContent = '✓ Sent!';
        status.style.color = 'green';
        form.reset();
      } else { throw new Error(); }
    } catch {
      status.textContent = 'Error. Try again.';
      status.style.color = 'red';
    }
    status.style.display = 'block';
  });
</script>
```

<Tip>
  Typedream embeds work best with inline styles. Use `border-radius: 8px` to match Typedream's rounded design language.
</Tip>