Mező-típusok és feltételes logika

Egy űrlap mezőkből áll. A Bookinda 17 mezőtípust ismer, mindegyik más célt szolgál.

A 17 mezőtípus

Szöveg-mezők

1. Text – egysoros szöveg (név, cím)
2. Textarea – többsoros szöveg (megjegyzés, leírás)
3. Email – email-cím (auto-validáció)
4. Phone – telefonszám

Számszerű

5. Number – egész vagy decimális szám

Választás

6. Radio – egy választás több opció közül (klasszikus rádió-gomb)
7. Dropdown – egy választás drop-downból
8. Checkbox – egyszerű igen/nem
9. Checkbox Group – több opció kiválasztható

Dátum / idő

10. Date – dátum-választó
11. Time – idő-választó
12. DateTime – dátum + idő

Média

13. Signature – e-aláírás (rajzolva)
14. Drawing – általános rajzolás (pl. testfestés helye)
15. File Upload – fájl-feltöltés (PDF, DOC)
16. Image Upload – kép-feltöltés (referencia-fotó)

Layout (nem-input)

17. Heading – csoport-fejléc (szakasz-elválasztó)
18. Text Block – statikus szöveg (info, magyarázat)
19. Divider – vízszintes vonal
20. Image – statikus kép

(Layout-mezők nem kérnek értéket, csak struktúra-célt szolgálnak.)

Per-mező beállítások

Alapok

• Cím (a kérdés szövege)
• Help text (kis magyarázat alá)
• Placeholder (input-mezőkben szürke szöveg)
• Required (kötelező)
• Width: full, half, third
• Sort order (sorrend)

Validáció

• Min / max hossz (text-mezőknél)
• Min / max érték (number-mezőknél)
• Pattern (regex, haladó)

Mapping

• Map to customer field – a beérkező érték a vendég-profilra kerül (név, email, telefon, születésnap, stb.)

Feltételes logika (visibleIf)

Egy mező csak akkor jelenik meg, ha egy másik mező értéke valami konkrét.

Példa

• Mező 1: "Van allergiád?" (Radio: Igen / Nem)
• Mező 2: "Mire?" (Text) – csak akkor látható, ha a Mező 1 értéke "Igen"

Beállítás

A Mező 2 szerkesztőjén:

• Visible if: Mező 1 = "Igen"

Ha a vendég "Nem"-et választ, a Mező 2 nem jelenik meg.

Aláírás-mező részletei

A Signature mezőben:

• Rajzfelület (egér / érintőképernyő)
• Clear gomb (újrarajzolás)
• Mentéskor: PNG-kép + IP-cím + timestamp + user-agent

A jogi auditolhatóság érdekében ezek mind tárolódnak.

File / Image upload

A vendég:

• File: PDF, DOC, max 10 MB
• Image: JPG, PNG, max 10 MB

A salon-szerveren tárolódik, és a vendég-profilhoz kapcsolódik.

Mikor használd

Szcenárió 1, kozmetikai allergia-szűrés

• Radio: "Van bőrproblémád?" (Igen/Nem)
• Visible-if Igen: Textarea "Mit?"
• Visible-if Igen: Image Upload "Tudsz fotót küldeni?"

Szcenárió 2, masszázs konzultáció

• Drawing: "Hol fáj? Rajzold be a testen"
• Textarea: "Részletek"
• Number: "Fájdalom 1-10 skálán"

Szcenárió 3, Consent

• Text Block: a teljes consent-szöveg
• Checkbox: "Elolvastam és elfogadom"
• Signature: aláírás

Szcenárió 4, Intake

• Text: "Vezetéknév" (mappingelve customer.lastName)
• Text: "Keresztnév" (mappingelve customer.firstName)
• Email: "Email" (mappingelve customer.email)
• Phone: "Telefon" (mappingelve customer.phone)
• Date: "Születésnap" (mappingelve customer.birthday)

Szcenárió 5, Feedback

• Radio: "Hány csillag? (1-5)"
• Textarea: "Mi tetszett?"
• Textarea: "Mi javíthatnánk?"

Tippek

• A required mezőket szigorúan: csak amit tényleg szükséges. Egy hosszú űrlap sok kötelezővel = magas elhagyás-arány.
• A visibleIf logika rövid űrlapot épít hosszú adatokra: csak releváns mező jelenik meg.
• A Drawing mező sokoldalú: testfestés-célzás, fogazat-állapot, parképítés-rajz.
• A File Upload-ot ritkán használd, mert a vendég nem szeret fájlt csatolni. Image Upload egyszerűbb.
• A mező-szélesség (full/half/third) a desktop-on érvényes, mobilon mindig full.
• A Pattern (regex) hibás validáció esetén kapcsolj ki, ne frusztrálja a vendéget.
• A Heading és Divider mezők nem mező-számba mennek, csak rendezéshez.

Kapcsolódó cikkek

• Űrlapszerkesztő
• Áttekintés
• Beküldések