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

# Bubble

> Connect FormBnB forms to your Bubble app

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

<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 HTML Element">
    In the Bubble editor, add an **HTML** element to your page.
  </Step>

  <Step title="Paste Form Code">
    Paste the form HTML below into the element.
  </Step>
</Steps>

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

<Steps>
  <Step title="Install API Connector">
    In Bubble, go to **Plugins** → search for **API Connector** → install it.
  </Step>

  <Step title="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:**

    ```json theme={null}
    {
      "name": "<name>",
      "email": "<email>",
      "message": "<message>"
    }
    ```
  </Step>

  <Step title="Trigger from Workflow">
    In your page workflow, trigger the API call on button click and pass the input values.
  </Step>
</Steps>

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