# Űrlapkészítő: mezők és mezőbeállítások

> Az űrlap összeállítása mezőkből: a mezőtípusok, a feltételes logika és a mezők beállításai.

Az űrlap szerkesztőjének első füle az **Űrlapkészítő**. Két oszlopra oszlik: balra áll az űrlap, jobbra az **Űrlapelemek** listája. Mező hozzáadásához kattints a jobb oldali elemre, és megjelenik az űrlapon.

![Az űrlapkészítő négy hozzáadott mezővel, az egyik kinyitva](./kepek/urlapok-szerkeszto-mezokkel.webp)

*Az űrlapkészítő négy hozzáadott mezővel, az egyik kinyitva* (https://minta-bolt.hu/wp-admin/admin.php?page=wpbs-forms&subpage=edit-form&form_id=1)

Minden mező fejlécében látszik a neve és a típusa. A fejlécre kattintva kinyílnak a mező beállításai. A kinyitott mező fejlécében az **ID** jelzi a mező azonosítóját, mellette a törlés, a másolás és az áthelyezés (fogd és vidd) ikonja van.

![Egy kinyitott Email mező az általános beállításokkal](./kepek/urlapok-mezo-opciok.webp)

*Egy kinyitott Email mező az általános beállításokkal* (https://minta-bolt.hu/wp-admin/admin.php?page=wpbs-forms&subpage=edit-form&form_id=1)

Az űrlap és a mezők módosításait az **Űrlap mentése** gombbal rögzítheted.

## Mezőtípusok

A mezők három csoportban vannak. A gombok feliratai a felületen angolul állnak.

### Alap űrlapelemek

| Mező | Mire jó |
|---|---|
| Text | Egysoros szöveg. |
| Email | E-mail-cím; ellenőrzi, hogy az érték érvényes cím-e. |
| Phone | Telefonszám; ellenőrzi, hogy érvényes szám-e. |
| Textarea | Többsoros szöveg. |
| Dropdown | Legördülő lista, egy érték választható. |
| Checkbox | Jelölőnégyzetek listája, egy vagy több érték választható. |
| Radio | Választógombok listája, egy érték választható. |
| Number | Csak számot fogad el. |

### Haladó űrlapelemek

| Mező | Mire jó |
|---|---|
| HTML | Saját HTML-kód: az űrlap elrendezésének javítására vagy szakaszokra bontására. |
| Datepicker | Kattintásra dátumválasztót nyit. Nem helyettesíti és nem befolyásolja a naptárban kiválasztott dátumot. |
| Hidden | Rejtett szövegmező, az űrlapon nem látszik. Saját szöveget tárolhat, vagy dinamikusan töltheted ki. |
| Captcha | Google reCAPTCHA a spam ellen. Használatához be kell írnod a reCAPTCHA API-kulcsokat a bővítmény beállításai között. |
| Consent | Hozzájáruló jelölőnégyzet, amelynek szövegét az adatkezelési tájékoztatóra vagy az általános szerződési feltételekre mutató hivatkozássá alakíthatod. Mindig kötelező. |
| Signature | Aláírásmező, amelyet a Szerződések kiegészítő ad hozzá. Az ügyfél aláírhat, és az aláírás a szerződés PDF-jébe kerül. Csak akkor érhető el, ha a Szerződések kiegészítő telepítve van. |

### Árazási űrlapelemek

Ezek a fizetéshez kapcsolódnak, és a foglalás végösszegét befolyásolják: például kiegészítő szolgáltatást vagy díjat adhatsz velük az űrlaphoz. Csak akkor látszanak, ha a bővítmény beállításai között az árazás be van kapcsolva.

| Mező | Mire jó |
|---|---|
| Product | Rejtett mező, amely kötelező költséget ad a foglaláshoz, például takarítási díjat. |
| Product Number | Mint a Number, de árat rendelhetsz hozzá, és az ár a megadott számmal szorzódik. |
| Product Dropdown | Mint a Dropdown, de minden opcióhoz külön ár tartozik. |
| Product Checkbox | Mint a Checkbox, de minden opcióhoz külön ár tartozik. |
| Product Radio | Mint a Radio, de minden opcióhoz külön ár tartozik. |
| Security Deposit | Visszatérítendő kauciót ad a foglaláshoz. Csak akkor érhető el, ha a kaució a beállításokban be van kapcsolva. |
| Coupon | Kuponkód beírására szolgáló mező. Csak a Kedvezmények és kuponok kiegészítővel érhető el. |
| Inventory | Legördülő lista, amelyből az ügyfél kiválaszthatja, hány egységet foglal. Csak a Készlet kiegészítővel érhető el. |
| Total | Táblázat az összes tételről és a rendelés végösszegéről, mint egy kosár. |
| Payment method | A fizetési mód kiválasztása; az összes bekapcsolt fizetési módot felkínálja. |

## Mezőbeállítások

A kinyitott mezőnek három füle van: **Általános beállítások**, **Speciális beállítások** és **Feltételes logika**.

### Általános beállítások

| Beállítás | Mit csinál |
|---|---|
| **Címke** | A mező felirata. |
| **Kötelező** | Ha be van kapcsolva, az ügyfélnek ki kell töltenie a mezőt. |
| **Beállítások** | A Dropdown, Checkbox és Radio mezőknél az opciók listája (**Opció hozzáadása**). Az árazási mezőknél minden opcióhoz árat is megadhatsz. |
| **Árszámítás** | Csak árazási mezőknél: az ár napra vagy foglalásonként számítódik. |

### Speciális beállítások

![A Text mező speciális beállításai](./kepek/urlapok-mezo-specialis.webp)

*A Text mező speciális beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=wpbs-forms&subpage=edit-form&form_id=1)

| Beállítás | Mit csinál |
|---|---|
| **Helykitöltő** | A mezőben halványan látszó szöveg. |
| **Alapértelmezett érték** | Az előre kitöltött érték. |
| **Leírás** | Rövid leírás a mező alatt. |
| **Elrendezés** | Teljes szélesség, vagy fél szélesség balra vagy jobbra igazítva. Hosszú űrlapok oszlopokba rendezéséhez hasznos. |
| **Egyéni osztály** | Saját CSS-osztály a mezőhöz, egyedi stílushoz. |
| **Címke elrejtése** | Elrejti a mező címkéjét. A helykitöltővel együtt jól működik. |
| **Dinamikus kitöltés** | Lehetővé teszi, hogy a mező értékét dinamikusan töltsék ki. |

Az árazási mezőknek további beállításai is vannak: a **Szorzás** egy másik űrlapmező értékével szorozza meg az árat, az egyéni „Total” címke pedig lecseréli a mező sorának feliratát a „Total” mező táblázatában. A Datepicker mezőnél a dátum formátumát is megadhatod. Ezek a beállítások az adott mezőtípusnál jelennek meg.

Ha a fordítások be vannak kapcsolva, a mezőben a lefordítható beállítások másolatai is megjelennek, nyelvenként.

### Feltételes logika

Egyes mezőknél beállíthatod, hogy a mező csak akkor látsszon, vagy akkor tűnjön el, ha más űrlapmezők értékei teljesítenek egy feltételt.

1. Nyisd ki a mezőt, és válaszd a **Feltételes logika** fület.
2. Kapcsold be a **Bekapcsolás** kapcsolót.
3. Állítsd be a feltételeket a megjelenő szabályokban.

![A Feltételes logika fül kikapcsolt állapotban](./kepek/urlapok-feltetelek.webp)

*A Feltételes logika fül kikapcsolt állapotban* (https://minta-bolt.hu/wp-admin/admin.php?page=wpbs-forms&subpage=edit-form&form_id=1)