Ide kattintva egyszerűen hívható
+36 70 200 4205

Kapcsolat űrlap é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ó.

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
Ű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

Spam mentesítés

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.

Contact Form 7 Honeypot

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,

Ű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

Contact Form 7 Redirection

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ó.

Contact Form 7 – Conditional Fields

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

Pay with Contact Form 7

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.

Flamingo

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.

Mailchimp for WordPress

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

  1. 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
  2. Az adatkezelési tájékoztató ehhez be van linkelve a kapcsolatfelvétel vagy egyéb űrlapba
  3. 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)
  4. Az elfogadás aktív cselekmény, pl. jelölőnégyzet kipipálása
  5. 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.

Contact Form 7

További lépések

Az űrlap létrehozásának lépéseit az alábbi videó ismerteti.

Címszavakban a teendők

  1. 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
  2. Nevezzük el az új űrlapot
  3. Illesszük be a Honeypot mezőt, a spam-ek elkerülésére
  4. 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
  5. 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
  6. 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
  7. Figyeljünk rá, hogy a label-eket a jelölőnégyzet és rádiógomb mezők esetében ne használjuk
  8. Í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
  9. 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
  1. Aktiváljuk a Mail (2) használata jelölőnégyzetet
  2. 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)
  3. Határozzuk meg a tárgy mezőt
  4. Tetszőleges szöveget írhatunk ide, jó, ha a fogadó fél számára segít beazonosítani levelet
  5. A további fejléceknél hagyjuk meg az alapbeállításokat, ami a válaszüzenetet fogadó email cím
  6. 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.
  7. Ugyanakkor nem szükséges minden mezőt kötelezően felhasználnunk.

Automatikus-uzenet-kuldes-cf7


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.

SMTP Mailer


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

* kötelező mező


Adatkezelési tájékoztató


Webfolio Webdesign - Hugyák Andrea

Webfejlesztő, mérnök-közgazdász at WebFolio Webdesign
Responsive WordPress weboldal készítés mellett 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.
Webfolio Webdesign - Hugyák Andrea

Pin It on Pinterest