Notion Sites - FormBnB Documentation

Why Use FormBnB with Notion Sites

Notion Sites doesn’t have native form support. FormBnB fills that gap:

Add fully functional forms to any Notion Site
Unlimited submissions on the free plan
Email notifications on every submission
Spam protection built in
Webhooks and 21+ integrations
No third-party form builder needed

Setup Steps

Create FormBnB Form

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

Add Embed Block

In your Notion page, type /embed and add an Embed block.

Create a Hosted Form Page

Since Notion embeds require a URL, host a simple HTML page with your form (see options below).

Paste the URL

Paste the URL of your hosted form into the Notion embed block.

Option 1: Use FormBnB’s Hosted Form

The easiest approach — use FormBnB’s built-in hosted form page:

In your FormBnB dashboard, go to your form settings
Enable the hosted form
Copy the hosted form URL
Paste it into a Notion embed block

No code needed.

Option 2: Self-Hosted HTML Page

Create a simple HTML file and host it anywhere (GitHub Pages, Vercel, Netlify):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 24px; }
    .field { margin-bottom: 14px; }
    .field label { display: block; font-size: 14px; margin-bottom: 4px; color: #37352f; }
    .field input, .field textarea {
      width: 100%; padding: 8px 10px; border: 1px solid #e0e0e0;
      border-radius: 4px; font-size: 14px; font-family: inherit;
    }
    .field textarea { resize: vertical; height: 80px; }
    button {
      padding: 8px 16px; background: #2eaadc; color: #fff;
      border: none; border-radius: 4px; font-size: 14px; cursor: pointer;
    }
    button:hover { background: #2496c4; }
    .status { margin-top: 10px; font-size: 14px; }
  </style>
</head>
<body>
  <form id="formbnb-form">
    <input type="text" name="_gotcha" style="display:none">
    <div class="field">
      <label>Name</label>
      <input type="text" name="name" required>
    </div>
    <div class="field">
      <label>Email</label>
      <input type="email" name="email" required>
    </div>
    <div class="field">
      <label>Message</label>
      <textarea name="message" required></textarea>
    </div>
    <button type="submit">Send</button>
    <p class="status" id="status"></p>
  </form>

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

    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      status.textContent = 'Sending...';

      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';
      }
    });
  </script>
</body>
</html>

Use AJAX submission so the form stays in the embed after submitting instead of navigating away.

​Why Use FormBnB with Notion Sites

​Setup Steps

​Option 1: Use FormBnB’s Hosted Form

​Option 2: Self-Hosted HTML Page

Why Use FormBnB with Notion Sites

Setup Steps

Option 1: Use FormBnB’s Hosted Form

Option 2: Self-Hosted HTML Page