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

# Webflow

> Connect your Webflow forms to FormBnB for better control and features

## Why Use FormBnB with Webflow

While Webflow has built-in forms, FormBnB offers:

* Unlimited form submissions (Webflow limits on lower plans)
* Webhook integrations
* Better spam protection
* Custom email templates
* API access to submissions
* 21+ integrations (Slack, Discord, Google Sheets, etc.)

## Setup Steps

<Steps>
  <Step title="Create FormBnB Form">
    Create a new form in your FormBnB dashboard and copy the form slug.
  </Step>

  <Step title="Add Embed Element">
    In Webflow, add an Embed element where you want the form.
  </Step>

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

## Example Embed

Paste this into a Webflow Embed element:

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST" class="formbnb-form">
  <input type="text" name="_gotcha" style="display:none">
  
  <div class="form-field">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div class="form-field">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-field">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4" required></textarea>
  </div>
  
  <button type="submit" class="submit-button">Send Message</button>
</form>

<style>
.formbnb-form { max-width: 500px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; margin-bottom: 4px; }
.form-field input, .form-field textarea { 
  width: 100%; 
  padding: 8px; 
  border: 1px solid #ccc; 
}
.submit-button { 
  background: #000; 
  color: #fff; 
  padding: 12px 24px; 
  border: none; 
  cursor: pointer; 
}
</style>
```

<Tip>
  You can style the form using Webflow's custom CSS or inline styles in the embed.
  Match your site's design by copying class names from your Webflow form elements.
</Tip>