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

# Lovable

> Use FormBnB forms with Lovable - the AI full-stack app builder

## Why FormBnB with Lovable

Lovable builds full-stack apps from prompts. When you need forms that actually work — collecting submissions, sending emails, triggering webhooks — FormBnB is the easiest backend to connect. No server setup, no database config. Just a URL.

## How to Use

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

### In Your Prompt

```
Build a landing page for a SaaS product. Include a waitlist form that
submits to https://api.formbnb.com/f/MY_ORG/waitlist using POST.
Add a honeypot field named _gotcha (hidden) for spam protection.
Show a success message after submission without page reload.
```

### Key Details to Include

When prompting Lovable, mention these specifics:

1. **Endpoint URL:** `https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM`
2. **Method:** `POST`
3. **Spam protection:** Hidden `_gotcha` field
4. **AJAX submission:** Use `fetch` with `FormData` for no-reload experience
5. **Accept header:** `Accept: application/json` for JSON responses

## Example Prompts

### Contact Form

```
Create a contact page with a form. The form should POST to
https://api.formbnb.com/f/MY_ORG/contact using fetch with FormData.
Include name, email, and message fields. Add a hidden _gotcha field
for spam protection. Show "Message sent!" on success.
```

### Waitlist with Email Capture

```
Build a hero section with an email capture form. Submit to
https://api.formbnb.com/f/MY_ORG/waitlist via AJAX POST.
Include a hidden _gotcha field. Show a thank-you message on success.
Track UTM parameters by adding hidden _utm_source and _utm_campaign fields.
```

### Multi-Form App

```
Create a customer support app with:
1. A contact form that POSTs to https://api.formbnb.com/f/MY_ORG/contact
2. A bug report form that POSTs to https://api.formbnb.com/f/MY_ORG/bugs
3. A feature request form that POSTs to https://api.formbnb.com/f/MY_ORG/features

All forms should use AJAX submission, show loading states, and display
success messages. Include _gotcha honeypot fields on all forms.
```

## Template Code

If Lovable needs a reference, share this pattern:

```tsx theme={null}
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  setStatus("sending");

  const formData = new FormData(e.currentTarget);

  try {
    const res = await fetch("https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM", {
      method: "POST",
      body: formData,
      headers: { Accept: "application/json" },
    });
    setStatus(res.ok ? "success" : "error");
    if (res.ok) e.currentTarget.reset();
  } catch {
    setStatus("error");
  }
}
```

<Tip>
  FormBnB auto-creates forms when you submit to a new slug. You don't need to create the form in the dashboard first — just start submitting.
</Tip>