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

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 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 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ó). 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 és a Munkafolyamatok, makrók és lemondás 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.