Typedream - FormBnB Documentation

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

Create FormBnB Form

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

Add Embed Block

In the Typedream editor, add an Embed block to your page.

Paste Form HTML

Paste your FormBnB form HTML into the embed.

Publish

Publish your Typedream site.

Example Embed

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

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

Typedream embeds work best with inline styles. Use border-radius: 8px to match Typedream’s rounded design language.

​Why Use FormBnB with Typedream

​Setup Steps

​Example Embed

​AJAX Submission

Why Use FormBnB with Typedream

Setup Steps

Example Embed

AJAX Submission