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

# Bolt

> Use FormBnB forms with Bolt - StackBlitz AI app builder

## Why FormBnB with Bolt

Bolt builds full-stack apps in the browser. When your app needs forms that collect data, send emails, or trigger webhooks, FormBnB handles the backend so Bolt can focus on the frontend.

## How to Use

Bolt runs in the browser and doesn't use the `npx skills` CLI. Instead, include FormBnB instructions directly in your prompt:

### In Your Prompt

```
Build a portfolio site with a contact form. The form should POST to
https://api.formbnb.com/f/MY_ORG/contact using fetch.
Include name, email, and message fields.
Add a hidden input named _gotcha with display:none for spam protection.
Show a success message after submission.
```

### Key Details to Include

1. **Endpoint:** `https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM`
2. **Method:** `POST` with `fetch` and `FormData`
3. **Spam protection:** `<input type="text" name="_gotcha" style="display:none">`
4. **JSON response:** Add `Accept: application/json` header
5. **Redirect:** Use `_next` hidden field for custom redirect URL

## Example Prompts

### Landing Page with Waitlist

```
Create a SaaS landing page with a hero section, features grid, and
a waitlist email capture form. The form should POST to
https://api.formbnb.com/f/MY_ORG/waitlist using AJAX.
Add _gotcha honeypot. Show "You're on the list!" on success.
```

### Contact Form with File Upload

```
Build a freelancer portfolio with a contact page. The contact form
should POST to https://api.formbnb.com/f/MY_ORG/contact with
enctype="multipart/form-data". Include name, email, message, and
a file upload for project briefs (accept PDF and DOCX).
Add _gotcha spam protection.
```

### Multiple Forms

```
Create a customer portal with three forms:
1. Support form → POST to https://api.formbnb.com/f/MY_ORG/support
2. Feedback form → POST to https://api.formbnb.com/f/MY_ORG/feedback
3. Bug report form → POST to https://api.formbnb.com/f/MY_ORG/bugs

All forms should use AJAX, show loading spinners, and display
success/error messages. Include _gotcha on all forms.
```

## Reference Code

Share this with Bolt if it needs a pattern:

```tsx theme={null}
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setLoading(true);

  try {
    const res = await fetch("https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM", {
      method: "POST",
      body: new FormData(e.currentTarget),
      headers: { Accept: "application/json" },
    });

    if (res.ok) {
      setSuccess(true);
      e.currentTarget.reset();
    } else {
      setError("Something went wrong");
    }
  } catch {
    setError("Network error");
  } finally {
    setLoading(false);
  }
};
```

<Tip>
  FormBnB auto-creates forms when you submit to a new slug. You don't need to set up anything in the FormBnB dashboard first — just start building in Bolt and submit.
</Tip>