Contact Form 7 – megrendelőlap létrehozása

Ha terméket vagy szolgáltatást szeretnél eladni a weboldaladon, de csak néhány van, akkor nem érdemes rá egy komplett webáruházat felhúzni. Pári Balázs most lépésről-lépésre bemutatja, hogy hogyan hozhatsz létre részletes megrendelőlapot a Contact Form 7 bővítménnyel.

1. lépés: Új űrlap hozzáadása

A Vezérlőpulton kattints a Kapcsolat menüpontra, majd az Új hozzáadása gombra. Végezd el az űrlap alapbeállításait (adj neki nevet, állítsd be az e-mail adatokat, stb).

2. lépés: Fölösleges adatok kitörlése az űrlapból és az üzenet törzséből

A bővítmény az űrlap törzséhez magától hozzáadott néhány mezőt. Ezeket nyugodtan meghagyhatod, kivéve a Tárgy és Üzenet mezőket, mert ezekre most nincs szükséged. Tehát az alábbi képen kijelölt részt töröld ki. (A bejegyzés képeire kattintva megnézheted őket nagyobb méretben.)

Mivel az űrlapból ezeket a mezőket kitörölted, az e-mailben nincs értékük, tehát onnan is nyugodtan kitörölheted. Az üzenet törzse doboz a törlés után így fog kinézni:

3. lépés: A megrendelő alapadatainak bekérése

A megrendelő további alapadatainak bekéréséhez (például telefonszám) hozz létre egy újabb beviteli mezőt. Kattints a Címke létrehozása feliratú legördülő menüre és itt válaszd a Telefonszám opciót. A jobb oldalon megjelennek a mező beállításai. A Kötelező mező? bejelölésével kötelező teheted a megrendelő számára a mező kitöltését – tehát amíg nem adja meg a telefonszámát, addig nem küldheti el az űrlapot. A Név mezőben adhatsz egy nevet a beviteli mezőnek. A többi mezőben még több egyedi beállítást lehet megadni, most ezek közül csak a „maxlength”-et, azaz a maximális hosszt adom meg. Az ide beírt számmal megszabhatod, hogy legfeljebb hány karaktert írhat a mezőbe a felhasználó.

Ha készen vagy a beállítások megadásával, a kapott rövid kódot illeszd be az űrlap törzsébe:

<p>Beviteli mező neve<br />
[kapott rövid kód] </p>

Miután ezt beillesztetted, az űrlapod törzse így fog kinézni:

Mivel a felhasználó által beírt telefonszámnak a e-mailben is meg kell jelennie, a másik kapott rövid kódot illeszd be az üzenet törzsébe:

Mező neve: [kapott rövid kód]

Ezután az üzeneted törzse így fog kinézni:

4. lépés: Termék kiválasztása legördülő menü segítségével

Az előzőekhez hasonlóan hozz létre egy új Legördülő menüt (Címke létrehozása -> Legördülő menü). Állítsd be kötelezőnek, és adj neki egy nevet. A Választás nevű szövegterületbe írhatod be a termékeket, soronként egyet. Ha a beállításokkal megvagy, a kapott rövid kódokat illeszd be az űrlap, illetve az üzenet törzsébe. Ezután valami ilyesmit fogsz látni:

5. lépés: A termék mennyiségének megadása csúszka segítségével

Hozz létre egy új Csúszkát (Címke létrehozása -> Szám (csúszka)), tedd kötelezővé, adj neki nevet. A „min” opciónál beállíthatod a minimum értéket, a „max” opciónál a maximum értéket. A „step” opciónál pedig az ugrás mértékét állíthatod be. Az én beállításaim szerint a skála 1-től 10-ig terjed és egyesével lehet ugrani az értékek között.

Ha a beállításokkal készen vagy, a kapott rövid kódokat illeszd be az űrlap, illetve az üzenet törzsébe az eddigiekhez hasonlóan. Ezek után valami hasonlót fogsz látni:

6. lépés: Az üzletszabályzat elfogadása

Hozz létre egy új Elfogadó négyzetet (Címke létrehozása -> Elfogadás). Adj neki egy nevet, majd a kapott rövid kódot illeszd be az űrlap törzsébe. Ha mindent jól csináltál, valami ilyesmit fogsz látni:

7. lépés: Űrlap mentése, oldalba illesztése

Görgess fel a lap tetejére és kattints a Mentés gombra. Az űrlap elmentése után zöld alapon megjelenik egy rövid kód. Ezt másold ki vágólapra (CTRL+C), majd egy tetszőleges oldal, bejegyzés vagy widget szerkesztőjébe illeszd be (CTRL+V). Végül örülj az eredménynek 🙂

 

Kiegészítés Monitól:

A mezőket természetesen tetszésed szerint bővítheted még, bekérheted a szállítási címet, a fizetési módot, stb. Ezen kívül megrendelés esetén mindenképpen illik egy visszaigazoló üzenetet küldeni a megrendelőnek. Használd tehát az Email (2) lehetőséget, és írd meg a visszaigazoló üzenet törzsét, például így:

"Kedves [your-name]!

Köszönjük megrendelését! Kérjük, megrendelése összegét fizesse be az 12345678-87654321-51100005 számlaszámra. Ezután küldjük a számlát, és a terméket.

Ha bármilyen kérdése van, kérjük, forduljon ügyfélszolgálatunkhoz az ugyfelszolgalat [@] domainnevem [.] hu e-mail címen."

Ha még egy kicsit profibban akarod csinálni, akkor minden termékhez készíts külön megrendelő űrlapot, és a termék bemutató oldalára illeszd be, a visszaigazoló üzenetbe pedig írd be a pontos árat. De azért, ha négy-öt terméknél vagy szolgáltatásnál többet szeretnél értékesíteni, akkor már érdemes inkább egy webáruház-bővítményt használni.