# Űrlap készítése a régi űrlapkészítővel

> A JetEngine Űrlapok (régi) moduljának bekapcsolása, az űrlap mezői, oldaltörés, előbeállított értékek, a Text és Textarea mező, és az űrlap beillesztése Elementorba vagy a blokkszerkesztőbe.

A JetEngine saját űrlapkészítője (**Űrlapok (régi)** modul) már csak kritikus hibajavításokat kap, az új űrlapfunkciók a JetFormBuilder bővítményben érhetők el. A régi modul viszont még használható, és a JetEngine több funkciója (például a Profilkészítő vagy az Adattárak) is hivatkozik rá. Ez a fejezet az űrlap elkészítését írja le a kezdetektől a weboldalra helyezésig.

## A modul bekapcsolása

1. Nyisd meg a **JetEngine → JetEngine** vezérlőpultot.
2. A **Modulok** fülön kapcsold be az **Űrlapok (régi)** kapcsolót.
3. Mentsd el a beállítást.

Ezután megjelenik a **JetEngine → Űrlapok** menüpont. A modulokról a [Modulok](https://hub.hellowp.io/hu/plugins/jet-engine/modulok/) fejezetben olvashatsz bővebben.

## Az űrlaplista

A **JetEngine → Űrlapok** oldalon látod az elkészült űrlapokat. Minden űrlap mellett ott van a rövidkódja, amellyel bárhová beillesztheted. Az **Új űrlap hozzáadása** gombbal újat hozhatsz létre, az **Űrlap importálása** gombbal exportált űrlapot tölthetsz be.

![Az Űrlapok lista egy űrlappal és a rövidkódjával](./kepek/urlapok-1-urlap-lista.webp)

*Az Űrlapok lista egy űrlappal és a rövidkódjával* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine-booking)

Nézd meg a rövidkód oszlopot: a `_form_id` értéke az űrlap azonosítója.

## Az űrlap szerkesztője

Az új űrlapnak adj egy címet, majd állítsd be a három szakaszt: **Mezők beállításai**, **Beküldés utáni műveletek / értesítések beállításai** és **Üzenetek beállításai**. A **Frissítés** (új űrlapnál **Közzététel**) gombbal mented el az egészet.

![Az űrlap szerkesztője: mezők, értesítések és üzenetek](./kepek/urlapok-1-urlap-szerkeszto.webp)

*Az űrlap szerkesztője: mezők, értesítések és üzenetek* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=edit)

Az oldal tetején a mezők sorai láthatók, alattuk a **Mező hozzáadása**, **Küldés gomb hozzáadása** és **Oldaltörés hozzáadása** gombok. Az **Enable reCAPTCHA v3 form verification** jelölőnégyzet a reCAPTCHA-ellenőrzést kapcsolja be (a kulcsokat az **Űrlapok (régi)** modul külön fülén adhatod meg). A **Pre-set form field values** jelölőnégyzet az előbeállított értékeket kapcsolja be, erről lejjebb olvashatsz.

### Mezők hozzáadása

Gondold végig, mit kell kitöltenie a látogatónak, és add hozzá a mezőket a **Mező hozzáadása** gombbal. Az egyes mezők típusai:

- **Text**: rövid szöveg, például név vagy vezetéknév.
- **Textarea**: hosszabb szöveg, például megjegyzés az űrlapon.
- **Select**, **Checkboxes**, **Radio**: választási lehetőségek, lásd a [Select, Checkboxes és Radio mezők](https://hub.hellowp.io/hu/plugins/jet-engine/urlapok-valasztomezok/) fejezetet.
- **Number**: szám, például a személyek száma.
- **Date**, **Time**, **Datetime**: dátum és idő.
- **Media**: fájlfeltöltés, például dokumentum vagy kép.
- **Hidden** és **Calculated**: rejtett és számolt mező, lásd a [Rejtett és számolt mezők](https://hub.hellowp.io/hu/plugins/jet-engine/urlapok-rejtett-szamolt-mezo/) fejezetet.

A mező **Name** (név) értéke csak kisbetűt, számot és aláhúzást tartalmazhat. Nagybetű, szóköz és egyéb jel nem engedélyezett, mert hibát okoz az űrlapban.

A mezők sorrendjét és szélességét a sorukon lehet módosítani: a sor jobb oldalán a ceruza a szerkesztést, a két négyzet a másolást, a keresztező nyilak a feltételes szabályokat nyitják meg (ezekről a [Feltételes láthatósági szabályok űrlapmezőkhöz](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-urlap-feltetelek/) fejezetben van szó). A **Fullwidth** felirat a mező szélességét mutatja.

### Szöveg és szövegterület: kiegészítő megjegyzés mező

Ha az űrlapon egy plusz megjegyzés mezőre van szükséged, jelöld ki az űrlapot, és a **Mezők beállításai** szakaszban válaszd a mező **Type** legördülő listájából a **Text** vagy a **Textarea** típust. A Text egysoros beviteli mező, a Textarea többsoros. Végül mentsd az űrlapot a **Módosítások alkalmazása** és a **Frissítés** gombbal.

### Oldaltörés

Az **Oldaltörés hozzáadása** gomb az űrlapot több lépésre bontja. A látogató csak az előző oldal kitöltése és a következő oldalra lépő gomb megnyomása után léphet a következőre. Az oldaltörés külön mezőként kerül az űrlapba, és ezeket állíthatod rajta:

- a gomb felirata (**Label**),
- a letiltott állapot üzenete (**Disabled message**): ez jelenik meg, ha a gomb inaktív, például nem töltötte ki a látogató a kötelező mezőket,
- egyéni CSS a gomb formázásához.

### Előbeállított mezőértékek

A **Pre-set form field values** kapcsolóval az űrlap mezői automatikusan kitöltődnek, mielőtt a látogató hozzányúlna. Add meg:

- a **forrást**: bejegyzés, felhasználó vagy URL-lekérdezési változó,
- az azonosítót: honnan vegye a bejegyzés azonosítóját (az aktuális felhasználó vagy bejegyzés azonosítójából, vagy URL-lekérdezési változóból),
- minden mezőhöz azt a tulajdonságot, amelyből az értéket kapja.

Így például az e-mail-cím mező a bejelentkezett felhasználó címével töltődik ki.

### Értesítések és üzenetek

Az űrlap alján a **Beküldés utáni műveletek / értesítések beállításai** szakaszban adhatod meg, mi történjen a beküldés után ([Beküldés utáni műveletek](https://hub.hellowp.io/hu/plugins/jet-engine/urlapok-ertesitesek/)), az **Üzenetek beállításai** szakaszban pedig a látogatónak megjelenő üzeneteket ([Űrlapüzenetek](https://hub.hellowp.io/hu/plugins/jet-engine/urlapok-uzenetek/)).

Minden módosítás után kattints a **Módosítások alkalmazása** gombra, a végén pedig a **Közzététel** vagy **Frissítés** gombra.

## Az űrlap elhelyezése az oldalon

### Elementorban

1. Nyisd meg az oldalt az Elementor szerkesztőjével.
2. Húzd a vászonra a **Form** widgetet.
3. A **Tartalom** fülön válaszd ki az elkészült űrlapot a **Select form** listából.
4. A widget stílusbeállításaival alakítsd ki az űrlap megjelenését.
5. Kattints a **Frissítés** gombra.

### A blokkszerkesztőben

1. Nyisd meg az oldalt a szerkesztőben, és add hozzá a **Form** blokkot.
2. A **Select form** listából válaszd ki az űrlapot.
3. A blokk stílusbeállításaival formázd meg, majd kattints a **Frissítés** gombra.

Az űrlap bárhová beilleszthető a rövidkódjával is, amelyet az űrlaplistában találsz.