# Foglalási űrlap lépésről lépésre

> Teljes példa: foglalási űrlap egyszerű módban JetFormBuilderrel és PayPal-fizetéssel, utólagos műveletek, kipróbálás, és a régi JetEngine-es űrlap.

Ez a fejezet végigvezet egy teljes foglalási űrlap elkészítésén egyszerű módban, JetFormBuilderrel: a fizetési kapu bekapcsolásától a kipróbálásig. A mezők és a műveletek rövid összefoglalója a [Foglalási űrlap](https://hub.hellowp.io/hu/plugins/jet-booking/foglalasi-urlap/) fejezetben van. A JetFormBuilder felülete angol marad, ezért a mezők és a beállítások angol neveken szerepelnek.

Mit kell előkészítened: telepített és bekapcsolt JetBooking és JetFormBuilder, valamint egy bejegyzéstípus-bővítmény (például JetEngine) a foglalási példányok és a rendelések bejegyzéstípusával. Az egyszerű módban WooCommerce-integrációval készülő űrlap más beállításokat is használ, azokról az [Előkészületek egyszerű módhoz WooCommerce-integrációval](https://hub.hellowp.io/hu/plugins/jet-booking/elso-lepesek-elokeszites-woocommerce-integracio/) fejezet szól.

## A fizetési kapu bekapcsolása

A példában PayPalon fizet a vendég.

1. A PayPal fejlesztői oldalán lépj be a fiókodba, és másold ki a **Client ID** és a **Secret Key** értékét.
2. A **JetFormBuilder → Settings → Payments Gateways** fülön kapcsold be az **Enable Gateways** és az **Enable Test Mode** kapcsolót. A második kapcsoló homokozó (sandbox) módot állít be, hogy a fizetést ki lehessen próbálni.
3. A megjelenő **PayPal Gateway API** részben illeszd be a **Client ID** és a **Secret Key** értékét.
4. Mentsd a beállításokat.

## A JetBooking beállítása

1. Nyisd meg a **Foglalások → Beállítások → Általános** oldalt. Az **Egyszerű** mód az alapértelmezett.
2. A **Foglalási rendelések bejegyzéstípus** listából válaszd ki azt a típust, amely a foglalási rendeléseket tárolja, a **Foglalási példányok bejegyzéstípusa** listából pedig azt, amely a foglalható tételeket tartalmazza.

Ezt a varázslóban is megadhatod ([Beállítási varázsló](https://hub.hellowp.io/hu/plugins/jet-booking/beallitasi-varazslo/)). A példában a „Foglalási rendelések” és a „Szobák” bejegyzéstípus szerepel. A rendelések típusában ugyanazok a mezők vannak, mint az űrlapon (keresztnév, vezetéknév, vendégek száma és a többi), a be- és kijelentkezési dátum mező kivételével.

## Az űrlap felépítése

1. Nyisd meg a **JetFormBuilder → Add New** oldalt. Az űrlap a blokkszerkesztőben nyílik meg.
2. A **Welcome** blokkban kész vagy AI-val generált űrlapot is választhatsz. Kattints a **Start from scratch** gombra, ha saját űrlapot építesz. Alapból egy **Hidden Field**, egy **Text Field** és egy **Action Button** kerül az űrlapra.
3. Add meg az űrlap címét (például „Foglalási űrlap”).

### Szövegmezők

Az alapértelmezett **Text Field** lesz a vendég keresztneve, két újabb szövegmezővel pedig a vezetékneve és az e-mail-címe. A mezők **General** füle alatt töltsd ki a **Field label** mezőt (a **Form field name** magától kitöltődik), a **Field → Field type** menüben válaszd a **Text** vagy az **Email** típust, és a mezőt a szerszámsor csillag ikonjával tedd kötelezővé.

Az **Email** típusú szövegmező egyszerű módban nem kötelező, de a **Foglalások → Beállítások → Munkafolyamatok** fülön ütemezett e-mailek küldéséhez szükséges.

### Be- és kijelentkezési dátumok

Húzd a **Check-in/Check-out dates** mezőt a kívánt helyre, és állítsd be:

- a **General → Field label** mezőben a feliratot (például „Érkezés és távozás”);
- a **Fields position** menüben az **Inline** értéket;
- a **Field Settings → Layout** menüben az **Separate fields for check in and check out dates** értéket, ha külön mezők kellenek;
- a **Date format**, a **Date field separator** és a **First day of the week** értékét;
- a mezőt tedd kötelezővé.

### Vendégek száma, oszlopok

A vendégek számát a **Number Field** gyűjti: add meg a nevét, a **Min/Max Values** és a **Step** értéket. Ha szükséges, a **Columns** blokkal az elrendezést egyenlő vagy eltérő szélességű oszlopokra oszthatod.

### Jelölőnégyzetek: szolgáltatások

A **Checkbox Field** jelölőnégyzetekkel adhatod meg a kérhető szolgáltatásokat. A **Fill Options from** menüben alapból a **Manual Input** van beállítva. Add meg a mező nevét (például „MEALS”), kattints a **Manage Items** gombra, és az **Edit Manual Options** ablakban az **Add new Option** gombbal vegyél fel opciókat. Minden opciónál töltsd ki a **Label**, a **Value** és a **Calculate** mezőt. Például a „Reggeli, 15 USD” címke értéke 15. A **Calculate** mezőt hagyhatod üresen, mert a számításhoz a **Value** mező értéke kell. Az **Update** gombbal mentsd az opciókat. Másik jelölőnégyzet-csoportot vegyél fel a további szolgáltatásoknak ugyanígy.

### Számított mező: a teljes ár

A **Calculated Field** számolja a teljes árat. Add meg a **Field label** mezőt (a név magától kitöltődik). A **Calculated Value Prefix** mezőbe a kijelzett összeg elé kerülő szöveget írhatod (például „Összesen: ”). A csavarkulcs ikonnal a mezőket és a makrókat tudod beszúrni a képletbe.

Egy példaképlet három tagból áll:

- `(%check_in_and_out_dates%*%META::_apartment_price%*%guests%)`: a foglalt napok (éjszakák) száma, az 1 napra/éjszakára vonatkozó ár (makró), és a vendégek száma szorzata;
- `(%guests%*%check_in_out_dates%*%meals%)`: a vendégek, a napok és az étkezések szorzata;
- `(%additional_services%)`: a kiegészítő szolgáltatások értéke hozzáadva.

A JetFormBuilderben beépített foglalási makrók vannak a rugalmas árkezeléshez, beleértve a szezonális árakat, a tarifákat és a hétvégi árakat. A tétel árát a **Be- és kijelentkezési dátumok** mezőben megadott napok vagy éjszakák számával szorozza a rendszer. A makrók listáját az [Árazás](https://hub.hellowp.io/hu/plugins/jet-booking/arazas/) és a [Munkafolyamatok, makrók és lemondás](https://hub.hellowp.io/hu/plugins/jet-booking/munkafolyamatok-es-makrok/) fejezet tartalmazza.

### A küldés gombja

Az **Action Button** beállításainál add meg a gomb szövegét (például „Foglalás”). Végül kattints a **Publish** vagy az **Update** gombra.

## Fizetési kapu az űrlapon

1. Az űrlap beállításai között nyisd ki a **Gateway Settings** részt.
2. Jelöld be a **PayPal Checkout** lehetőséget, és kattints az **Edit** gombra.
3. Az **Edit PayPal Checkout Settings** ablakban kapcsold be a **Use Global Settings** kapcsolót: a **Client ID** és a **Secret Key** magától kitöltődik a globális beállításokból.
4. Kattints a **Sync Action Token** gombra. A szinkron után a gomb felirata **Access Token updated** lesz.
5. Add meg a **Currency code** értékét (a példában USD, nálad HUF), a **Price/Amount field** mezőnél pedig válaszd ki a számított mezőt.
6. Kattints az **Update** gombra.

## Utólagos műveletek

Az űrlap beállításainál a **Post Submit Actions** részben állítsd be a küldés utáni műveleteket. A sorrend számít: előbb az **Insert/Update Post**, utána az **Apartment Booking**.

1. **Save Form Record.** Alapértelmezett. Az űrlap adatai a **JetFormBuilder → Form Records** oldalon kezelhetők.
2. **Insert/Update Post.** Kattints a **+ New Action** gombra, és válaszd ki. A **Post Type** mezőben add meg a foglalási rendelések típusát, a **Post Status** legyen **Published**. A **Fields Map** részben az űrlapmezők mellett válaszd a **Post Meta** értéket, jelöld ki a bejegyzéstípus megfelelő mezőjét, és írd be a meta mező nevét. Az **Update** gombbal zárd be az ablakot. Fizetéses űrlapnál a műveletre mutatva kattints a keresztezett vonalak ikonjára, és az **Edit Action Conditions & Events** ablak **Events match** fülén válaszd a **GATEWAY.SUCCESS** eseményt.
3. **Apartment Booking.** A **+ New Action** után válaszd ki. Az **Edit Apartment Booking** ablakban rendeld hozzá: az **Apartment ID Field** mezőhöz a `post_id` mezőt, a **Check-in/Check-out Date Field** mezőhöz a dátum mezőt, az **E-mail Field** mezőhöz az e-mail mezőt. Az **Update** gombbal mentsd. Ennél a műveletnél az események között a **DEFAULT.PROCESS** legyen beállítva.
4. **Send Email.** Az űrlap küldése után azonnal küld e-mailt, a műveletek sorrendje szerint. Az ütemezett e-maileket (például emlékeztetőt a foglalás előtt) a **Foglalások → Beállítások → Munkafolyamatok** fülön adhatod meg. A **Mail to** menüben válaszd az **Email from submitted form field** lehetőséget, és a **From field** listában az e-mail mezőt. Add meg a **Subject** értékét, a **Content type** legyen **Plain text**. A levélszövegbe makrókkal szúrhatod be a foglalás adatait.

## Az űrlap kitétele az egyedi oldalra

Az űrlap Elementorban, a blokkszerkesztőben és Bricksben is elhelyezhető. Példa Elementorral és JetThemeCore-ral:

1. Készíts a bejegyzéstípushoz egyedi (single) oldalt, és a beállításaiban a **Post Type** listában válaszd ki a foglalható tételek típusát (például „Szobák”) a sablon forrásaként.
2. Tervezd meg az oldalt, majd húzd a **JetForm** elemet a kívánt helyre.
3. Válaszd ki a listából a korábban elkészített űrlapot, és szabd testre a megjelenését.

## Kipróbálás

1. **Az űrlap az oldalon.** Töltsd ki az űrlapot, és kattints a foglalás gombra. A PayPalon át fizethetsz. A fizetés után e-mailt kapsz a vásárlás adataival.
2. **Form Records.** A **JetFormBuilder → Form Records** oldal az összes elküldött űrlapot és állapotukat mutatja. A név fölé víve az **Edit** hivatkozással megnézheted a részleteket.
3. **E-mail.** Nézd meg a postaládádat: megérkezett-e a visszaigazolás.
4. **Payments.** A **JetFormBuilder → Payments** oldal az összes fizetést és adataikat gyűjti. A **View** hivatkozással megnézheted a részleteket.
5. **A rendelések bejegyzése.** A foglalási rendelések menüpontján nyisd meg a létrejött bejegyzést. A **Booking Data** szakasz mutatja a foglalás adatait, az **Edit** gombbal javíthatod.
6. **Foglalások.** A **Foglalások → Foglalások** oldalon az **Info** ikonnal kinyithatod a foglalás adatait, a **Szerkesztés** gombbal módosíthatod.

## Régi JetEngine-es foglalási űrlap (Legacy)

Foglalási űrlapot a JetEngine régi űrlapmodulja is tud készíteni.

1. A **JetEngine → JetEngine → Modules** oldalon kapcsold be a **Forms (Legacy)** kapcsolót, és mentsd. Megjelenik a **Forms** fül, ott az **Add New** gombbal új űrlapot veszel fel.
2. Vedd fel a mezőket (például létszám, keresztnév, vezetéknév, e-mail). A **Check-in/check-out dates** mezőhöz az egyszerű mód kell. Állíthatod a **Separate fields for check in and check out dates** elrendezést, az **Inline** mezőpozíciót, a feliratokat, a helykitöltőket, a dátumformátumot, az elválasztót, a hét első napját és a mező nevét (például „Booking Dates”). Az **Apply Changes** gombbal alkalmazd.
3. Ne töröld az alapból létrejövő `post_id` rejtett mezőt. Érdemes felvenni a **Post Title** és az **Order ID** rejtett mezőt is.
4. A **Notifications Settings** résznél az alapértelmezett **Send Email** értesítés később állítható. Vegyél fel egy **Insert/Update Post** értesítést, és válaszd ki a rendelések bejegyzéstípusát. A **Fields Map** a bejegyzéstípus meta mezőit mutatja (ha nincs meta mező, csak a `post_id` látszik).
5. Vegyél fel egy **Apartment booking** értesítést: az **Apartment ID** mezőnél a `post_id` rejtett mezőt, a **Check-in/Check-out date** mezőnél a dátummezőt válaszd. Fontos, hogy a mezőben a `inserted_post_id` legyen megadva ott, ahol a rendelés azonosítója tárolódik a foglalási táblában.
6. Végül állítsd be a **Send Email** értesítést: a **Mail to** mezőben válaszd ki a megfelelő e-mail lehetőséget, hogy a vendég a sikeres foglalás után e-mailt kapjon.