Ebben a tutorialban megmutatjuk, hogyan rakunk össze Fluent Forms-ban egy olyan szolgáltatás megrendelő/igényfelmérő űrlapot, ami nem csak kérdez, hanem okosan alkalmazkodik a válaszokhoz. Feltételes (kondicionális) mezőkkel szűkítjük a lehetőségeket, rejtett/előbukkanó mezőkkel tisztán tartjuk a felületet, a végén pedig automatikusan kiszámoljuk a várható végösszeget.
Miről lesz szó?
Az alap űrlap felépítése: mire lesz szükségünk?
Először összerakjuk az „árajánlat kérő” vázát: alapadatok, egy jól tagolt szerkezet, és egy logika, amire később építhető a kalkuláció.
- Üres formból indulunk, és elnevezzük az űrlapot
- Alap mezők: keresztnév/vezetéknév, email, telefonszám
- Konténerekkel (kétoszlopos elrendezés) rendezettebbé tesszük a mezőket
- Required beállítások: mi legyen kötelező és mi maradjon opcionális
Szekciók és tagolás: hogy átlátható maradjon
Egy igényfelmérő akkor jó, ha nem egy hosszú, ijesztő lista. Szekciótörésekkel (section break) szépen szétválasztjuk a blokkokat, és felkészítjük a terepet a dinamikus részekhez.
- Section break használata az „autódról” rész bevezetéséhez
- Címekkel irányítjuk a kitöltőt (mit és miért kérünk)
- A form így rögtön profibbnak és könnyebben kitölthetőnek hat
Kondicionális logika: márka alapján csak a releváns típusok jelennek meg
Itt lesz igazán izgalmas: márka választás után csak az ahhoz tartozó típus dropdown jelenik meg. Nem kell végiggörgetni száz opciót – a form „gondolkodik” helyettük.
- Márka dropdown: kötelező választás (ez indítja a logikát)
- Külön típus dropdown mezők márkánként (pl. Alfa Romeo, Renault)
- Conditional logic: csak akkor jelenjen meg a mező, ha a márka egyezik
- Name attribute használata: később a kalkulációhoz és azonosításhoz aranyat ér
Tömeges (bulk) opciófeltöltés vs kalkulációs értékek: a csavar
Megnézzük a bulk feltöltés kényelmét, és azt is, hol ütközik falba, amikor pénzügyi kalkulációs értékeket akarunk hozzáadni. Ez a rész rengeteg időt spórolhat (vagy vihet el), ha előre jól döntesz.
- Bulk importtal gyorsan felvihetők sok opció (modellek listája)
- A kalkulációs értékek (calculation values) bulkban nem működnek úgy, ahogy szeretnénk
- Miért fontos előre eldönteni: csak listázunk, vagy számolni is akarunk?
- Gyakorlati workaround: modellekhez kézzel adunk felárat (pl. nagy autó +2000)
Szolgáltatások és extrák: alapár + opcionális tételek
Felvesszük a választható szolgáltatásokat alapárakkal, majd jöhetnek az extrák – szintén saját értékekkel. Ettől lesz a végeredmény egy valódi megrendelő lap, nem csak egy kérdőív.
- Szolgáltatás dropdown (kötelező): pl. csak külső / csak belső / külső-belső, fix árakkal
- Extrák dropdown (nem kötelező): pl. fényszóró polírozás, klímafertőtlenítés, plusz értékekkel
- Calculation values mezőnként: itt adjuk meg az árakat
- Name attribute-ek beállítása, hogy a képletezésnél ne vesszünk el
Végösszeg számítása: dinamikus kalkulációs mező (Pro funkció)
A végére felrakunk egy számmezőt, ami automatikusan összeadja a szolgáltatást, az extrákat és akár a típushoz kötött felárat is. A videóban élőben leteszteljük: kisautó vs nagy autó, és azonnal látszik a különbség.
- Numeric field „Összesen” mező létrehozása és formázása (EU stílus)
- Enable calculation (Fluent Forms Pro): itt kapcsoljuk be a számítást
- Képlet összerakása: szolgáltatások + extrák + (típus felár, ha van)
- Gyors teszt az előnézetben: a választások azonnal módosítják a végösszeget
Összegzés
A videó végére összeáll egy olyan dinamikus megrendelő űrlap, ami kevesebbet kérdez, mégis többet tud: csak a szükséges mezőket mutatja, és rögtön számol is. Nézd meg a teljes tutorialt, és rakjuk össze lépésről lépésre a saját, több összetevős kalkulációs űrlapodat!