Kapcsolat űrlap spam mentesen és egyéb GDPR kompatibilis űrlapok, nyereményjáték, kvíz, készítése WordPress weboldalon, Contact Form 7 bővítménnyel
Az egyszerű kapcsolatfelvételi űrlapon túl számos célra alkalmas a Contact Form 7 bővítmény. Képes feltételes logika kezelésére, fizetési lehetőséggel is bővíthető. Kiválóan alkalmas nyereményjátékok lebonyolítására. Az űrlapon keresztül beérkező adatok el is menthetőek és könnyen feldolgozható, excel táblázatban kiexportálhatóak. Számos rendszerrel, többek között a Mailchimp hírlevél rendszerrel is integrálható és gyakorlatilag garantáltan spam mentesíthető. Kérdés, beállítási igény esetén nagyon szívesen rendelkezésre állok!
Tartalom
- Contact Form 7 bővítmény előnyök és hátrányok
- Contact Form 7-et kiegészítő hasznos bővítmények
- Az űrlap spam elleni védelme
- Honeypot bővítmény
- Google reCAPTCHA
- +1 spam mentesítő elem, a CF7 kvíz mező
- Űrlap készítése, lépésről-lépésre
- Tipikus email küldési hibák és megoldásuk
- Űrlap formázása
Contact Form 7 bővítmény előnyök és hátrányok
Hátrány
A bővítmény egyetlen hátránya szerintem kimerül abban, hogy az űrlap létrehozása kissé körülményesebb, mint a megfogom és bedobom típusú bővítmény esetében.
Előnyök
Népszerű és gyakran frissül
A fenti paraméterek alapfeltételei egy WordPress bővítmény kiválasztásának. Jelenleg 5 millió feletti letöltéssel büszkélkedhet és a cikk megírásakor egy hónapja frissült utoljára.
Flexibilitás
A Contact form 7 rendkívül rugalmas, számos feladat megvalósítására alkalmas, a teljesség igénye nélkül:
- Egyszerű kapcsolatfelvétel űrlap
- Bővített kapcsolatfelvétel űrlap (plusz mezőkkel kiegészítve)
- Feltételes logika kezelése (egy választástól vagy választól függően más további mezők jelennek meg az űrlapon, pl. más adatokat kér be az űrlap magánszemély és más adatokat vállalat esetében)
- Eseményekre, programokra regisztrációk és jelentkezési lapok (eseti rendezvények, előadások vagy rendszeres programok kezelése, pl. fitnesz órák)
- Megrendelő űrlapok (amennyiben nem szeretnénk webshop típusú rendszerben értékesíteni egy szolgáltatást, pl. rendezvény részvételi lehetőséget vagy online tanfolyamot, esetleg letölthető terméket, ebook-ot, akkor a megrendelő űrlapot is felhasználhatjuk az értékesítésre. Ez esetben fizetési lehetőségként az átutalás és a PayPal integrálható. Postai csekket már nem hinném, hogy túl korszerű lenne felajánlani, de ez meglehetősen célcsoport függő.
- Fizetési lehetőség integrálása legtöbb, a hazánkban ismert bankkártyás fizetési rendszerrel (SimplePay, Barion) és a PayPal rendszerrel is működik
- Nyereményjátékok
- Kvízek készítése
- Hírlevél – Maichimp – rendszer integrációs lehetőség
- Adatmentés és export, az űrlapon keresztül beérkező adatok elmenthetőek és könnyen feldolgozható, excel táblázatban exportálhatóak, későbbi felhasználásra, pl. körlevél küldés, nyereményjáték sorsolás
Bővíthetőség
A CF7 űrlap flexibilitását nagyban annak köszönheti, hogy tetszőlegesen bővíthető a legkülönbözőbb mezőkkel (telefonszám, dátum, url, jelölőnégyzet, rádiógomb, elfogadás – pl. Adatkezelési tájékoztató)
Html kód használható az űrlapban
Ez azt jelenti, hogy kivastagítást vagy címsorokat is használhatunk az űrlapon belül. Pl. egy hosszabb űrlapon az adat csoportok tagolására és kiemelésére használhatunk címsorokat (pl. személyi adatok, érdeklődési kör, adatkezelési nyilatkozat), így növelve az űrlap áttekinthetőségét
Html kód használható a mezők címkézésekor
Ezzel lehetőségünk van arra, hogy linket vagy egyéb kódot használjunk a mező címkéjében. Legkézenfekőbb példa erre, amikor a GDPR megfelelőséghez az Adatkezelési tájékoztatót be kell linkelnünk az elfogadására beillesztett jelölőnégyzet mellé
Honosított bővítmény
A Contact Form 7 magyar nyelvre is le van fordítva, így ha a honlapunk nyelve magyarra van állítva, akkor a bővítmény és a vele generált űrlap, valamint a – hibás vagy hiányos űrlap kitöltés esetén megjelenő – esetleges hibaüzenetek is eleve magyarul jelennek meg, nincs szükség utólagos fordításra.
Alkalmas több nyelvű honlapon történő használatra
A bővítmény jelenleg 58 nyelvre van lefordítva, így több nyelvű honlapon is nagyon jól használható, kompatibilis a multi-language bővítményekkel, melyek a több nyelvű honlapokat hivatottak vezérelni, mit pl. a piacvezető WPML (WordPress Multi Language) bővítmény
Email kliensek tiltása
Ha nem szeretnénk engedélyezni nem céges email címről az űrlap elküldését, pl. csak céges e-mail címről fogadunk el jelentkezéseket, regisztrációt egy rendezvényre, akkor ennek kezelésére is alkalmassá tehető az űrlap, meg tudjuk határozni, hogy milyen e-mail címeket tiltunk le a beküldéskor, pl. Gmail, Freemail stb.
Dokumentáció
A bővítmény rendkívül jól dokumentált, az angol nyelvű dokumentáció végigvezet az űrlap készítésen, számos felhasználási ötletet ad és az esetleges hibaelhárításban is segít
Contact Form 7-et kiegészítő hasznos bővítmények
Az űrlap spam elleni védelme
Honeypot bővítmény
Ez a bővítmény arra épít, hogy a robotok automatikusan kitöltenek minden mezőt. A bővítménnyel az űrlapba elhelyezett mezőt viszont nem szabad kitölteni az űrlap elküldéséhez, mivel a robotok ezt megteszik, így az űrlapot nem lehet elküldeni.
A Honeypot bővítmény önmagában is nagyon hatásos a spam-ek ellen, de ha valaki esetleg nem elégedett vele, a Google reCAPTCHA is integrálható az űrlappal.
Google reCAPTCHA
Ehhez önálló bővítményre nincs is szükség, csak regisztrálni kell az oldalt a Google szolgáltatásában és a kapott API kulcsot be kell állítani a Contact Form 7 bővítmény integráció menüjében. A beállítás hatására egy elég transzparens ikon jelenik meg a weboldal összes oldalán, a képernyő jobb alsó sarkában.
Ha ez nem nyeri el a tetszésünket, akkor CSS-el az ikon letiltható, de a felhasználási feltételek szerint csak az esetben, ha a Google megfelelő hivatkozásait belinkeljük az űrlapba. Erre a megoldásra minta látható a WebFolio kapcsolat oldalán is: Ezt az oldalt a reCAPTCHA és a Google védi (Privacy Policy és Terms of Service).
A Google reCAPTCHA V2, azaz korábbi verziójával már nem kompatibilis a bővítmény, ha a legfrissebb bővítmény verziót használjuk vagy arra frissítünk, akkor a V2, azaz 2 API kulcs verzió nem alakítja át a captcha rövid kódot, az szövegesen, hibásan jelenik meg az űrlapban. Az API kulcsot cserélni kell a 3-as verzióra.
Extrém esetben, ha véletlenül, ezt nem tudva frissítettünk rá a bővítményre és pl. hirtelen sok űrlapot kellene javítanunk, törölni belőle a [captcha] rövid kódot, akkor ideiglenesen visszatérhetünk a bővítmény előző verziójára. Azért csak ideiglenesen, mert fontos a weboldal biztonsága érdekében, hogy annak elemei, a WordPress keretrendszer, a bővítmények és a sablon is naprakész legyen.
Nagyon egyszerűen, néhány klikkeléssel a WP Rollback bővítmény segítségével tudunk egy előző plugin vagy WordPress verziót visszaállítani.
+1 spam mentesítő elem, a CF7 kvíz mező
A CF7 bővítmény alapból, további bővítmény hozzáadása nélkül is tartalmaz egy kvíz mező lehetőséget, mely nagyon hatékonyan alkalmas a spam levelek és hírlevél integráció esetében a nem valós feliratkozók kiszűrésére.
A kvíz mezőre klikkelve megadhatunk egy tetszőleges kérdés-válasz párt, melynek pontos megválaszolása nélkül nem küldhető el az űrlap.
- Ez lehet egy szöveges kérdés
- ez esetben érdemes hangsúlyozni, hogy kis és/vagy nagybetűs választ várunk
- vagy adódhat a kérdés jellegéből is, hogy a válasz kezdőbetűje nagy, pl. ha tulajdonnévre kérdezünk rá, úgymint Magyarország fővárosa? Ezt a látogatók nagybetűs Budapest beírással fogják – nagy valószínűséggel – megválaszolni
- Vagy egy matematikai formula, pl. 13+7=? (betűvel kiírva)|húsz, ennek használata esetén is érdemes szerintem egyértelműsíteni, hogy számmal vagy szövegesen kiírt választ várunk.
Hibás válasz esetén ez a mező is egyértelmű hibaüzenetet eredményez.
CF7 űrlap spam mentesítő mező
Ez a kód fog hozzáadódni az űrlaphoz, az elválasztójel innen ki is másolható:
[quiz quiz-517 „Milyen színű az ég (kisbetűvel írva)?*|kék”]
A szokványok kötelező mező opció nem szerepel ennek a mezőnek a beszúrásakor, de az űrlap ennek jelölése nélkül is kötelező mezőként fogja kezeli, így érdemes a kérdésben ez is jelölni, a szokványos csillag jelzettel (vagy ki is írhatjuk, hogy kötelező mező).
A végeredmény valahogy így fog kinézni, ehhez arra is szükség van, hogy a mezőnek ezt az elemét is a gyári megjelenéshez képest hozzáigazítsuk a weboldal stílusához.
CF7 űrlap spam mentesítő mező az űrlapon
Néhány további lehetőség, pl. random kérdések hozzáadásának leírása elérhető a bővítmény honlapján.
Űrlap kitöltést követő átirányítás
A bővítmény lehetővé teszi, hogy az űrlap sikeres elküldését követően a látogatót átirányítsuk egy másik url-re, pl. köszönő vagy információs oldalra.
- Az átirányításnál kiválaszthatjuk, hogy az oldal új ablakban nyíljon-e meg.
- JavsScript futtatható vele az űrlap küldés után, ami konverzió mérésre használható
- Képes az űrlap mezőket url query paraméterként használni
- A fizetős változata még számos további lehetőséget kínál
Feltételes logika kezelése az űrlapon
Egy választástól vagy választól függően más további mezők jelennek meg az űrlapon, pl. kiválasztható, hogy az űrlapot, megrendelő lapot kitöltő magánszemély vagy vállalat, majd ezt követően más adatokat kér be az űrlap a magánszemély és más adatokat vállalati megrendelő esetében.
A bővítménnyel több egymást követő feltételes logikai lépés is előállítható.
Fizetéssel kombinált űrlap
A legtöbb, a hazánkban ismert bankkártyás fizetési rendszerrel (SimplePay, Barion) és a PayPal rendszerrel is működik. A PayPal ismertsége és népszerűsége Magyarországon jelenleg nem olyan magas, mint más fizetési rendszereké, pl. Barion, így csak abban az esetben javasolt a használata, ha nagyon gyors fizetési megoldásra van szükség.
Így az űrlapok alkalmasak PayPal Account vagy regisztráció nélküli és különböző online bankkártyás fizetésekre, ezeket a lehetőséget akkor érdemes leginkább használni, ha valamilyen egyszerű értékesítési lehetőséget szeretnénk webshop modul konfigurálása nélkül gyorsan létrehozni.
A webshop-os fizetés előnye lehet az egyszerű űrlapos megrendeléssel szemben:
- kombinálás más termékekkel (kosár funkció)
- bővebb automatikus válaszlevél funkciók
- készlet / létszám kezelés, a termék jellegétől függően (fizikai termék vagy tanfolyam / rendezvény jegy).
Erről a megoldásról bővebb információ a Webáruház készítés előzetes komplett kérdéslista cikkben olvasható.
A bővítmény alkalmas támogatások szedésére is. A bővítmény letöltési szám nagyon alacsony, ugyanis ha nagyon szeretnénk, bővítmény nélkül is létrehozhatunk konkrét összegre vonatkozó PayPal fizetési lehetőségeket, ez azoknak lehet nagy segítség, akik ezt a WordPress weboldaluk kezelőfelületén, egy helyen szeretnék megoldani.
Barion és SimplePay
A Barion és a SimplePay lehetővé teszi adott termék vagy szolgáltatás esetében a konkrét összegra vonatkozó fizetési oldal és link legenerálását, melyre az űrlap segítségével átirányíthatjuk a vásárlót.
PayPal
Adatok elmentése
Az űrlapon keresztül beérkező adatok elmenthetőek, azonban arra érdemes figyelni, hogy ha használjuk ezt a lehetőséget, akkor ezt az Adatkezelési szabályzatunkban is jelezni szükséges.
Az elmentett adatok excel táblázatban exportálhatóak, könnyen kezelhető formátumban. Ez a későbbi későbbi felhasználás során nagyon hasznos lehet, pl. körlevél küldés, nyereményjáték sorsolás kezelése, űrlap beküldők körében statisztikai elemzések végzése pl. marketing célból.
Mailchimp integráció
A bővítmény egy egyszerű rövid kóddal lehetőséget ad rá, hogy a hírlevél feliratkozók egyúttal egy Mailchimp hírlevél listára is feliratkozhassanak.
A feliratkozásnál itt is nagyon fontos az összes vonatkozó szabály betartása, melyekről a Szabályos hírlevél feliratkozás alapelemei cikkben is olvashatunk bővebben.
Űrlap készítése Contact Form 7 bővítménnyel, lépésről-lépésre
A GDPR kompatibilis űrlap elemei
Elsőként nézzük meg, melyek a GDPR kompatibilis kapcsolat űrlap jellemzői
- Az adatkezelési tájékoztatót el kell fogadnia az érdeklődőnek az üzenet vagy egyéb űrlap elküldését megelőzően
- Az adatkezelési tájékoztató ehhez be van linkelve a kapcsolatfelvétel vagy egyéb űrlapba
- Az adatkezelési tájékoztató egy klikkeléssel elérhető a weboldalon (tehát fel van töltve a weblapra és nem csak letölthető pdf dokumentumként érhető el)
- Az elfogadás aktív cselekmény, pl. jelölőnégyzet kipipálása
- A jelölőnégyzet kötelező mező és nincs előre kipipálva
Amennyiben még nem áll rendelkezésre, egy – a Budapesti Iparkamara ajánlása alapján készült – Adatkezelési szabályzat minta a WebFolio oldalán megtekinthető, ahhoz is hozzájárulok, hogy a dokumentumot bárki szabadon letöltse és felhasználja.
Jogi felelősségkizárás
Egy rendben lévő adatkezelési tájékoztató minta felhasználása önmagában semmiképp nem garantálja, hogy az adott weboldal megfelel a GDPR előírásainak, hiszen az számos egyéb tényezőtől, háttérfolyamattól, beállítástól is függ.
Éppen ezért az ajánlott minta kapcsán én sem vállalhatok a megfelelőséggel és teljes körűséggel kapcsolatban felelősséget, továbbá a cikk nem minősül jogi tanácsadásnak.
A CF7 telepítése
A bővítményt a szokásos módon telepíthetjük. Vagy letöltjük a bővítmény hivatalos oldaláról, kicsomagoljuk és ftp-n keresztül feltöltjük a weboldal bővítményei közé vagy egyszerűen rákeresünk a WordPress kezelőfelületen az új bővítmény menüpontban és ott választjuk a telepítést.
További lépések
Az űrlap létrehozásának lépéseit az alábbi videó ismerteti.
Címszavakban a teendők
- Kapcsoljuk be a bővítményt és a WordPress kezelőfelületen keressük meg a Kapcsolat menüpontot, válasszuk az új űrlap lehetőséget
- Nevezzük el az új űrlapot
- Illesszük be a Honeypot mezőt, a spam-ek elkerülésére
- Adjuk az űrlaphoz Acceptance (elfogadás) típusú kötelező mezőként az Adatkezelési szabályzat elfogadást, a dokumentumot töltsük is fel a honlapra és linkeljük be
- Az új mezőt adjuk hozzá az űrlap második fülén az email törzshöz, amit a rendszer továbbít részünkre az űrlap elküldését követően, így értesülünk egy új kapcsolatfelvételi üzenetről vagy egyéb információkról, amit az űrlapon megadtak
- Bővítsük tetszés szerinti mezőkkel az űrlapot, minden új mező hozzáadása után mentsük el az űrlapot és az email törzset is bővítsük az új mezővel
- Figyeljünk rá, hogy a label-eket a jelölőnégyzet és rádiógomb mezők esetében ne használjuk
- Írjuk be az acceptance_as_validation: on kifejezést a 4., további beállítások fülre, annak érdekében, hogy a felhasználó pontos hibaüzeneteket kapjon a form kitöltését követően, pl. ha a kötelező jelölőnégyzetet nem pipálta ki
- Illesszük be az űrlap kódját a végleges helyére vagy egy draft teszt oldalra és teszteljük magát az űrlapot is, töltsük ki és küldjük el, nézzük meg, a hozzánk érkezett információk teljes körűek-e
Sikeres levél küldést követő lehetőségek
Automatikus visszajelzés
A bővítmény a sikeres levél küldést alapesetben egy rövid, az űrlap helyén megjelenő üzenettel jelzi a weboldalon. Ennek a sikeres levélküldésnek a szövegezését módosítani tudjuk az üzenetek szerkesztő fülön. Ugyanitt a többi automatikus üzenet is testre-szabható.
Átirányítás köszönő oldalra
Mint a bővítmények részletezéskor említésre került, a fentieken túlmenően azt is beállíthatjuk, hogy milyen oldalon landoljon a látogató a sikeres levél küldést követően. Ez adott esetben a konverzió mérés szempontjából is fontos lehet.
Ugyanakkor köszönő oldalként vagy további információ közlésére is alkalmas ez a megoldás.
Automatikus válaszüzenet beállítása
Az előbbiekben ismertetett két lehetőség kiegészítéseként is működhet – a szerintem – üzenet fogadásakor elég fontos beállítás, az automatikus válaszüzenet beállítása.
Miért is lényeges ez?
- A levél küldője kaphat egy nevesített automatikus válaszüzenetet a sikeres levél küldést követően
- A küldő teljesen biztos lehet benne, hogy üzenetes sikeresen célba ért
- Tájékoztatást kaphat további lépésekről, attól függően, hogy mi volt a megkeresés célja, mert a válaszüzenet űrlaponként is beállítható. A WebFolio Webdesign kapcsolati űrlap kitöltése esetén például az érdeklődő automatikus email üzenetet is kap, amiben a tájékoztatom többek közt arról is, hogy legkésőbb mennyi időn belül fogok levelére visszajelezni.
A beállításhoz a következő lépések szükségesek
- Aktiváljuk a Mail (2) használata jelölőnégyzetet
- Töltsük ki a feladó mezőt (email cím tartalmazza a weboldal domain-t, nem szükséges, hogy létező email cím legyen)
- Határozzuk meg a tárgy mezőt
- Tetszőleges szöveget írhatunk ide, jó, ha a fogadó fél számára segít beazonosítani levelet
- A további fejléceknél hagyjuk meg az alapbeállításokat, ami a válaszüzenetet fogadó email cím
- Az üzenettörzs kialakításánál ugyanaz az eljárás, mint a saját magunknak küldött email beállítás esetében. Az üzenet szövege teljesen szabadon alakítható, kiegészíthető. Megszemélyesíthetjük a levelet az üzenet mezőkkel, pl. a küldő nevével.
- Ugyanakkor nem szükséges minden mezőt kötelezően felhasználnunk.
Tipikus email küldési problémák és megoldásuk
Levél küldési limit
Az email küldő bővítmények a tárhely erőforrásait használják a levél elküldésére, ezért ha nagyszámú üzenetre számítunk, pl. valamilyen kampány, nyereményjáték miatt, akkor mindig egyeztessünk előzetesen a tárhely szolgáltatóval, nincs-e valamilyen küldési limit beállítva erre vonatkozóan.
Amennyiben igen – találkoztam már 500-2000 napi levél küldési limittel – általában kezdeményezhető az emelés és csak elvétve van külön díjszabása.
SMTP levél küldés
A WordPress rendszer az ún. mail() php függvényt használja a levelek továbbítására. Gyakori, hogy a tárhely szolgáltatók ezt a függvényt biztonsági okból letiltják. Ilyen esetben annyit észlelünk, hogy az űrlap elküldésekor a küldés sikertelen hibaüzenet jelenik meg a weboldalon, annak ellenére, hogy mindent rendben kitöltöttünk.
A megoldás ilyen esetben a biztonságos, SMTP típusú levélküldés. Ehhez egy bővítményt kell telepíteni a weboldalra és aktiválást követően be kell állítani néhány, a tárhely szolgáltatótól beszerezhető adminisztrációs adatot.
Az űrlap formázása, meglévő sablonhoz igazítása
Az űrlap mezőinek alapmegjelenése elég egyszerű, de némi CSS ismerettel könnyen testre-szabható, hozzáigazítható a meglévő sablonunkhoz.
Amennyiben az űrlap elemek formázásával nem kíván foglalkozni, úgy a minta űrlaphoz kapcsolódó beállítások letölthetőek a hírlevél feliratkozást követően.
A letöltött dokumentumban ezt is jelzem, hogy a jellemzően cserélendő színeket és elemeket, pl. a küldés gomb színét és formáját hol tudjuk módosítani.
A CSS alapismeretekre ez a cikk nem tér ki, azzal egy másik írás fog foglalkozni, a hírlevél feliratkozók erről is értesülhetnek. A cikk alapján kisebb stílust érintő módosításokat egyedi CSS elemekkel akkor is meg tudnak majd oldani a weboldalukon, ha arra az adott sablon menüjében nincs beállítási lehetőség.
Hírlevél feliratkozás, formázáshoz szükséges kód és információ kérése
Cikkajánló
A WordPress keretrendszert, valamint az elkészült weblapok kezelését is oktatja, igény esetén a rendszeres weboldal frissítést és karbantartás feladatait is elvégzi.
Akár a hírlevél rendszer kialakítását és weblapra integrálását vagy a weboldalra szükséges fényképek elkészítését is vállalja, képzett fotográfusként.
Emellett online-marketing és SEO / keresőoptimalizálás szakértő, teljes körű tanácsokkal látja el ügyfeleit, így az elkészült gyors és mobil barát weboldal valódi eszköze lesz az értékesítésnek.
