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

# Wix

> Use FormBnB as your Wix form backend for unlimited submissions

## Why Use FormBnB with Wix

Wix has a built-in form app, but it's limited:

* Submission limits on free and lower plans
* No webhook support
* Limited integrations
* No API access to submission data

FormBnB gives you:

* Unlimited submissions on the free plan
* Spam protection (honeypot, reCAPTCHA, Turnstile)
* Webhooks and 21+ integrations
* Full API access to all your data

## 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 HTML Embed">
    In the Wix editor, click **Add** → **Embed Code** → **Embed HTML**. Place it where you want the form.
  </Step>

  <Step title="Paste Form Code">
    Select "Code" mode and paste your FormBnB form HTML.
  </Step>

  <Step title="Resize and Publish">
    Resize the embed to fit your form, then publish.
  </Step>
</Steps>

## Example Embed

Paste this into a Wix HTML embed:

```html theme={null}
<html>
<head>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 16px; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 13px; margin-bottom: 4px; color: #333; }
  .field input, .field textarea {
    width: 100%; padding: 10px; border: 1px solid #ddd;
    border-radius: 6px; font-size: 14px; font-family: inherit;
  }
  .field textarea { resize: vertical; height: 80px; }
  button {
    width: 100%; padding: 12px; background: #000; color: #fff;
    border: none; border-radius: 6px; font-size: 14px; cursor: pointer;
  }
  button:hover { background: #333; }
  .status { margin-top: 10px; font-size: 13px; }
</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 Message</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...';
      const data = new FormData(form);

      try {
        const res = await fetch('https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM', {
          method: 'POST',
          body: data,
          headers: { 'Accept': 'application/json' }
        });
        if (res.ok) {
          status.textContent = '✓ Message sent!';
          status.style.color = 'green';
          form.reset();
        } else {
          throw new Error();
        }
      } catch {
        status.textContent = 'Error. Please try again.';
        status.style.color = 'red';
      }
    });
  </script>
</body>
</html>
```

<Tip>
  Wix HTML embeds run in an iframe, so you need a full HTML document with inline styles. Use AJAX submission to avoid the iframe navigating away on submit.
</Tip>
