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

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 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:

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