Bubble - FormBnB Documentation

Why Use FormBnB with Bubble

Bubble has built-in form elements, but sending that data externally requires plugins or API workflows. FormBnB simplifies this:

No plugins needed — just an HTML embed or API call

Unlimited submissions on the free plan

Spam protection, webhooks, and 21+ integrations

Email notifications out of the box

Full API access to submission data

Option 1: HTML Embed

The simplest approach. Add an HTML element in Bubble and paste your FormBnB form.

Create FormBnB Form

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

Add HTML Element

In the Bubble editor, add an HTML element to your page.

Paste Form Code

Paste the form HTML below into the element.

<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST" style="font-family:inherit;">
  <input type="text" name="_gotcha" style="display:none">

  <div style="margin-bottom:14px;">
    <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:6px;">
  </div>

  <div style="margin-bottom:14px;">
    <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:6px;">
  </div>

  <div style="margin-bottom:14px;">
    <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:6px;resize:vertical;"></textarea>
  </div>

  <button type="submit"
    style="padding:12px 24px;background:#000;color:#fff;border:none;border-radius:6px;cursor:pointer;">
    Send Message
  </button>
</form>

Option 2: API Connector

For tighter integration with Bubble’s native elements, use the API Connector plugin to POST to FormBnB.

Install API Connector

In Bubble, go to Plugins → search for API Connector → install it.

Add API Call

Create a new API with these settings:

Name: FormBnB Submit
Method: POST
URL: https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM
Headers: Content-Type: application/json, Accept: application/json
Body type: JSON
Body:

{
  "name": "<name>",
  "email": "<email>",
  "message": "<message>"
}

Trigger from Workflow

In your page workflow, trigger the API call on button click and pass the input values.

The HTML embed approach is faster to set up. Use the API Connector when you need to combine FormBnB submissions with other Bubble workflows.

​Why Use FormBnB with Bubble

​Option 1: HTML Embed

​Option 2: API Connector

Why Use FormBnB with Bubble

Option 1: HTML Embed

Option 2: API Connector