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

# Squarespace

> Add FormBnB forms to Squarespace for unlimited submissions and integrations

## Why Use FormBnB with Squarespace

Squarespace has built-in forms, but they come with limits:

* Squarespace caps form storage on lower plans
* Limited notification options
* No webhook support
* No third-party integrations beyond email

FormBnB gives you:

* Unlimited submissions on the free plan
* Spam protection (honeypot, reCAPTCHA, Turnstile)
* Webhooks to send data anywhere
* 21+ integrations (Slack, Discord, Google Sheets, etc.)
* Full API access to submissions

## Setup Steps

<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 Code Block">
    In the Squarespace editor, add a **Code Block** where you want the form. Make sure "Display Source" is unchecked.
  </Step>

  <Step title="Paste Form HTML">
    Paste your FormBnB form HTML into the code block.
  </Step>

  <Step title="Save and Publish">
    Save the page. Your form is live.
  </Step>
</Steps>

## Example Embed

Paste this into a Squarespace Code Block:

```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="formbnb-field">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="formbnb-field">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="formbnb-field">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="4" required></textarea>
  </div>

  <button type="submit">Send Message</button>
</form>

<style>
.formbnb-form {
  max-width: 500px;
  font-family: inherit;
}
.formbnb-field {
  margin-bottom: 16px;
}
.formbnb-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}
.formbnb-field input,
.formbnb-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
.formbnb-form button {
  background: #000;
  color: #fff;
  padding: 12px 24px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.formbnb-form button:hover {
  background: #333;
}
</style>
```

## Custom Redirect

Send users to a thank-you page after submission:

```html theme={null}
<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
  <input type="hidden" name="_next" value="https://yoursite.squarespace.com/thank-you">
  <!-- rest of your fields -->
</form>
```

<Tip>
  Use `font-family: inherit` in your styles so the form picks up your Squarespace site's typography automatically.
</Tip>