# Űrlap AI-webhelyépítőben (Bolt és Lovable)

> Hogyan kerül egy JetFormBuilder-űrlap a Bolt vagy Lovable AI-építővel készült oldalra: űrlap generálása CCT-ből, REST API végpont, prompt és az eredmény.

Ha a weboldal frontendjét AI-építővel (Bolt vagy Lovable) készíted, az űrlap adatait a WordPressbe a JetFormBuilder űrlapja és a JetEngine REST API végpontja juttatja el. Az AI-építő a frontend űrlapot generálja, a WordPress pedig fogadja a beküldést, például új CCT-elemként.

## Követelmények

- Fiók a használt AI-építőben (Bolt vagy Lovable).
- A JetEngine és a JetFormBuilder telepítve és aktiválva.
- A **Formless Actions Endpoints** JetFormBuilder-kiegészítő telepítve és aktiválva. A JetFormBuilder → **Addons** fülön az **All Available Addons** között találod; az **Install Addon**, majd az **Activate Addon** gombbal kapcsolhatod be.
- Egyéni tartalomtípus (CCT), amelyhez az űrlap tartozik. A CCT-ről a [CCT áttekintése](https://hub.hellowp.io/hu/plugins/jet-engine/cct-attekintes/) fejezet szól.

## Az űrlap létrehozása

### Bolt: űrlap generálása a CCT-ből

1. Nyisd meg a **JetEngine → Egyedi tartalomtípusok** menüt, és szerkeszd a kívánt CCT-t.
2. Kattints a **Create New Form** gombra.

A gomb létrehoz egy űrlapot a CCT meta mezőinek megfelelő mezőkkel és egy „Insert/Update Custom Content Type Item” beküldés utáni művelettel.

### Lovable: űrlap kézzel

1. A **JetFormBuilder → Add New** menüben hozz létre új űrlapot, a blokkszerkesztőben a **Welcome** blokk **Start from scratch** gombjával.
2. Alapból egy Hidden Field, egy Text Field és egy Action Button kerül az űrlapba. Add meg az űrlap nevét a cím helyén, és add hozzá a weboldalon megjelenítendő mezőket (például Text, Media, Checkbox és Textarea mezőket).
3. Ne állíts stílust az űrlapon: a megjelenést az AI-építő adja. Olyan mezőtípusokat használj, mint amilyeneket a frontenden látni akarsz.
4. Mentsd az űrlapot.

## Végpont létrehozása

1. Nyisd meg a **JetFormBuilder → Endpoints** oldalt, és kattints az **Add new route** gombra.
2. A beállításoknál:
   - **RELATED FORM**: az űrlap.
   - **ACTION TYPE**: **REST API Endpoint**.
   - **ROUTE NAMESPACE**: az API-csoport neve, például `mugs/v1`.
   - **ROUTE**: a végpont neve, például `add`.
3. Kapcsolók: az **Is Restricted** kikapcsolt állapotban az űrlap bárki számára elérhető, bekapcsolva csak meghatározott feltételeknek megfelelő felhasználóké. A **Log Requests** bekapcsolva minden beküldési kísérletet naplóz a végponton.
4. A **Data Fields** blokk **Fields** fülén megadhatsz mintaértéket (**Sample value**) a mezőkhöz. Ez segíti az AI-építőt.
5. A **Sample request** fülön kattints a **Copy request** gombra, és mentsd el a másolt kérést a promptba.
6. Lovable esetén kattints a **Publish** gombra.

## A prompt megírása

A promptban add meg:

- a kívánt űrlap leírását (a mezők nevét, típusát, azt, hogy kötelező-e),
- a végpont URL-jét,
- a mintakérést (a végpont **Sample request** adatai),
- az elvárt működést: hibaüzenetek, sikerüzenet, a küldés gomb letiltása beküldés közben.

Példa Bolthoz:

```text
Build a front-end React form for adding new mugs to the website.
Form fields: mug_name (text, required), mug_desc (textarea, optional),
regular_price (number, required, min=0), mug_materials (radio, optional),
mug_image (file input, image/* only).
On submit, send a POST request to https://example.com/wp-json/mugs/v1/add
with a JSON body matching the sample request.
Show a success message on completion, or an error if the request fails.
Add the form inside a pop-up opened by the "+ Add New Mug" button.
```

A Lovable-hez írt promptban add meg azt is, hogy az űrlap milyen bejegyzéstípusba hozzon létre elemet, a beküldött adatok JSON-formátumát és az új bejegyzés állapotát (például közzétett). Ha az oldal többi része is a WordPressből kapja az adatot, add meg azt is, hogy az adatot a REST API-ból kell lekérni, és hogy melyik URL-ről, milyen mezőkkel. Ha lekérdezés a forrás, a lekérdezés előnézetének egy elemét bemásolhatod példának.

## Az eredmény

A kész weboldalon megjelenik az űrlap (Bolt példában a „+ Add New Mug” gombra felugró ablakban), amelyet ki lehet tölteni és be lehet küldeni. A beküldés után az AI-építővel készült oldalon és a WordPressben is megjelenik az új elem (CCT-elemként).