Ebben a részben fogunk egy elévült, nehezen használható (mobilon főleg fájdalmas) WordPress-es online rendelési megoldást, és lépésről lépésre összerakunk helyette egy modern, átlátható ételrendelő űrlapot Fluent Forms-szal. Megmutatjuk, miért csúszik el a régi rendszer UX-ben, és hogyan lehet pár mezőből máris egy sokkal jobb, „21. századi” rendelési folyamatot összerakni.
Miről lesz szó?
Kiindulási helyzet: egy régi rendelési oldal, ami ma már nem működik jól
Először ránézünk, mivel kell dolgoznunk: egy régi, nem reszponzív, nehezen olvasható rendelési felülettel, ami feleslegesen bonyolítja a leadást. Innen indulunk, és ebből csinálunk gyorsan vállalható megoldást.
- Mobilon a rendelés kifejezetten problémás (újratöltés, újraküldés, UX hibák)
- A dizájn és olvashatóság akadályozza a felhasználót
- Kategóriák vannak (pizza, tészta, saláta, desszert…), nem mindenhol értelmezhető a „méret”
- A „nem pizza” tételek külön szöveges mezőbe kényszerülnek (egyéb termék neve)
Az alap űrlap gyors összerakása: név, cím, telefonszám – okosan
A videóban felépítjük a rendeléshez szükséges minimumot, de nem „csak úgy”: finomhangoljuk a mezőket, hogy kevesebb hibával, gyorsabban lehessen rendelést leadni.
- Névmező, címmező, telefonszámmező hozzáadása
- A címmezőből kiszedjük a felesleges elemeket (pl. állam/ország)
- Telefonszámnál formátum/validáció beállítása, hogy tényleg használható szám érkezzen
- Az országlistát leszűkítjük Magyarországra (és alapértelmezetté tesszük)
Adatok betöltése a menühöz: manuálisan vagy AI-val (CSV)
Megmutatjuk, hogyan lehet egy étlapot „betáplálni” a form mezőibe: akár kézzel, akár úgy, hogy AI-val (pl. ChatGPT) próbáljuk kinyerni a régi oldal tartalmát és CSV-be rendezni.
- Kell egy adatszett (különben nincs miből listát építeni)
- Használható a Fluent Forms mint CSV sablonja, amihez igazítjuk az adatokat
- AI-val részben automatizálható a scrapelés, de régi rendszereknél gyakran marad manuális munka
- Fontos: mintát kell adni az AI-nak, különben könnyen „hallucinál” struktúrát
A nagy falat: miért nem jó a Repeater mező ebben a felállásban?
Itt jön a videó egyik legtanulságosabb része: megpróbáljuk a „tökéletes” megoldást (ismétlődő tételek), és közben megmutatjuk, hol ütközünk bele egy jelenlegi Fluent Forms limitációba.
- Repeaterrel szépen lehetne tételsorokat hozzáadni (korlátlan rendelési tétel)
- A gond: a kondicionális logika nem működik oszlop-szinten a repeaterben, csak a teljes blokkra
- Így nem tudjuk dinamikusan megjeleníteni a megfelelő választómezőket tételen belül
- Egy „majdnem tökéletes” megoldás, amihez hiányzik egy kritikus funkció
Chained Select + CSV: hierarchikus választás (és a következő korlát)
Átváltunk a Chained Select mezőre (szülő-gyerek-unoka logika), feltöltjük a CSV-t, és megmutatjuk, hogyan működik valós menüstruktúrával. Azt is megnézzük, miért nem tudjuk ezt repeaterekbe tenni.
- Chained Select: kategória → termék → (opcionálisan) méret felépítés
- CSV importtal gyorsan feltölthető a menü (pl. pizza → méret → konkrét opciók)
- Pizza esetén van méret, más kategóriáknál nincs – ezt a struktúra lekezeli
- Jelenleg nem engedi repeat konténerbe rakni a chained selectet (hibaüzenet)
A működő workaround: Range sliderrel „tételek száma”, és duplikált mezők
Ha nem tudunk valódi „végtelen tételsort” csinálni, akkor okosan kerülünk: bevezetünk egy csúszkát a tételek számához, és annyi chained select sort mutatunk, amennyire tényleg szükség van.
- Range slider: min 1, max pl. 10 (vagy amennyit reálisnak gondolsz)
- Feltételes megjelenés: a 2. tétel csak akkor jelenik meg, ha a slider ≥ 2, stb.
- Chained Select mezők duplikálása gyorsan, azonos adatforrással
- Plusz mezők pillanatok alatt: fizetési mód (készpénz/kártya), GDPR hozzájárulás, megjegyzések
Élesben: milyen a felhasználói élmény és mi történik beküldés után?
A végén ránézünk a kész oldalra: mennyivel átláthatóbb lett a rendelés leadása, és hogyan érkezik be minden a Fluent Forms submissions részébe (értesítés, visszakereshetőség, statisztikák).
- A form már demó tartalommal is jobban használható, mint a régi rendszer
- A telefonszám szépen formázódik, a választások logikusak és gyorsak
- Tételek hozzáadása a csúszkával egyszerű és érthető
- Beküldés után minden ott van a submissions-ben: időbélyeg, áttekinthetőség, feldolgozhatóság
Összegzés
A videóban végigmegyünk azon, hogyan lehet egy régi, kényelmetlen online rendelést pár jól megválasztott Fluent Forms mezővel lecserélni egy sokkal használhatóbb rendszerre – és közben azt is megmutatjuk, hol vannak ma a valódi korlátok. Nézd meg a teljes folyamatot, mert a gyakorlati beállítások és a workaround logikája élőben áll össze igazán.