15. Feliratkozási űrlap beillesztése WORDPRESS honlapba

Itt az űrlap beillesztését (beágyazását) mutatjuk meg WORDPRESS weboldalba.

Ha NEM WORDPRESS weboldalba akarod beilleszteni az űrlapot, hanem egyedi fejlesztésűbe, akkor ide kattints: ListaMesteres űrlap beillesztése NEM WORDPRESS weboldalba

A ListaMesterben

Ha beilleszted az űrlapot, akkor az a honlapod része lesz, a weboldaladon fog vele találkozni a feliratkozó, nem a ListaMester szerveréről fog megnyílni. Ezzel ellentétes az az eset, amikor csak az űrlapod linkjét teszed ki a honlapodra és a ListaMesteres űrlap felugrik annak, aki erre a linkre rákattint. (és maga az űrlap a ListaMester szerverén található)

Az űrlap WordPress honlapba beillesztésének menete:

Ami eltér a WordPress esetében, az az, hogy WordPress honlapokba NEM LEHET Javascript kódokat elhelyezni. A ListaMesteres űrlapok tartalmaznak Javascript elemeket, ezért a sima “kimásolom – html nézetben bemásolom” módszer nem fog működni.

Három megoldás közül választhatsz: 

  1. beilleszted az űrlapot a weblapodba úgy, hogy nincs bekapcsolva a Javascript funkció az űrlapnál,
  2. WordPress widgetbe illeszted be az űrlapot
  3. iframe-be illeszted be az űrlapot

Egyik sem ördöngösség, mutatjuk:

Űrlap beillesztése WordPress weboldalba Javascript funkciók kikapcsolásával

Ha WP oldalad van, akkor az űrlapok menüpontban NE HASZNÁLD ezt a funkciót, NE TEGYÉL PIPÁT a Javascript használata (WordPressben nem ajánlott) funkciót elé! Nem véletlenül van a funkció nevében is a felhívás, hogy WordPressben nem ajánlott.

LisstaMesteres űrlap WP weboldalba illesztése javascript funkciók nélkül

LisstaMesteres űrlap WP weboldalba illesztése javascript funkciók nélkül

Kis kitérő: mi is a Javascript és mire szolgál?

Amikor valaki nem tölti ki az űrlapodon a kötelező mezőket (pl. a nevet és/vagy a mail címet, vagy bármi más adatmezőt, amit Te kötelezőnek állítottál be), akkor az űrlap a Javascript kódok segítségével “kiabál” neki, hogy “A pirossal kijelölt mezőket is kérjük kitölteni!”

De ha nem pipálod be, akkor mi fogja ellenőrizni, hogy a feliratkozó kitöltött-e minden kötelező mezőt?
Nem maradsz ellenőrzés nélkül. Ezt a böngészők ma már megteszik, azaz a Chrome, a Firefox, stb. fog szólni a feliratkozónak, hogy kihagyott egy kötelező mezőt.

Tehát WP weboldal esetén, készítsd el az űrlapot az űrlapok menüpontban (szöveg az űrlapon, adatmezők, külalak), majd mentsd el legalul, ügyelve rá, hogy a Javascript használata (WordPressben nem ajánlott) funkció előtt ne legyen pipa!

Változtatások elmentése az Űrlapok menüpontban

Változtatások elmentése az Űrlapok menüpontban

Mentés után jöhet a beillesztés:

Űrlap forráskódja WordPress oldalban html nézetben

Űrlap forráskódja WordPress oldalban html nézetben

Így néz ki az előzőleg html nézetben mutatott űrlap a grafikus nézetben egy sales oldalban:

Űrlap beillesztve WordPress oldalba grafikus nézetben

Űrlap beillesztve WordPress oldalba grafikus nézetben

FONTOS: Bármit változtatsz a ListaMesterben magán az űrlapon (új adatmezőt adsz hozzá, vagy törölsz, vagy szöveget módosítasz rajta), akkor a weblapodból ki kell törölnöd az űrlap forráskódját és újra be kell illesztened az új, megváltoztatott kódokat! (html nézetben)

Még egy tanács: El szoktátok felejteni tesztelni az űrlapot beillesztés után. Tesztelni mindig kell. Bárkivel előfordulhat, hogy siet, rutinból csinálja már a beillesztést, és valami lemarad kimásoláskor, valamit töröl, amit nem kellene, stb. Szánjál rá 2 percet, hogy a honlapodon kipróbálod az űrlapot!

SPECIÁLIS ESET: ELLENŐRZŐ KÓD / CAPTCHA KÓD HASZNÁLATA AZ ŰRLAPON WORDPRESS WEBOLDALBAN

A Javascript használata funkció előtt van egy másik lehetőség, az Antispam-bot ellenőrző kód használata (captcha)

Ennek a kódnak a segítségével lehet kiszűrni a nem valós feliratkozókat. Előfordul, hogy egy automata program, egy robot talál rá az oldaladra és ez a robot tölti ki hamis feliratkozásokkal az űrlapodat. Hogy ezeket kiszűrjük, az egyik megoldás a captcha kódok használata.

Ha ezt bekapcsolod, akkor az űrlapodon, a feliratkozó gomb felett megjelenik egy újabb mező. A rendszer generál egy feladványt, amit csak ember tud helyesen megválaszolni. Ez lehet egy számsor, vagy egy betűsor. Ezt a feliratkozónak be kell írnia ebbe az adatmezőbe, ez egy kötelező adatmező, tehát csak így tud feliratkozni.

Így fog kinézni az űrlapod az ellenőrző kóddal a ListaMesterben

Így fog kinézni az űrlapod az ellenőrző kóddal a ListaMesterben

Ha azt tapasztalod, hogy megtalálta az űrlapodat egy robot, azaz valami értelmetlen névvel és/vagy e-mail címmel érkeznek a feliratkozások, amik nem lehetnek valósak, akkor egy ideig használj az űrlapodon ilyen ellenőrző kódot!

Hogyan kell ezt beállítani?

Miután megszerkesztetted az űrlapot, készen vannak az adatmezők, készen van a kinézet, az Űrlapok menüpontban pipáld be az Antispam-bot ellenőrző kód használata (captcha) és a Javascript használata (WordPressben nem ajánlott) funkciókat. Mentsd el a beállításokat legalul!

Miért használjuk a javascript funkciót, ha az a WordPressben nem ajánlott?

Azért kell a javascript is, mert ez végzi az ellenőrzést, hogy jól írta-e be a feliratkozó a számsort. Mindkét funkció előtt legyen pipa:

Így tudod beállítani a captcha kódot az űrlapodhoz a ListaMesterben

Így tudod beállítani a captcha kódot az űrlapodhoz a ListaMesterben

FIGYELEM: ilyen esetben változik a beillesztés módja!

Ha használsz javascript kódot (+ captchát) ÉS WP rendszerben van a honlapod, akkor az űrlap beillesztése után NE KAPCSOLJ vissza a WP szerkesztő felületén html nézetből grafikus nézetbe, mert a WP el fogja rontani a kódokat!

Tehát illeszd be html nézetben az űrlap kódjait a weboldalba, mentsd el (frissítsd) és lépjél ki az oldalból!

Minden egyes alkalommal, amikor módosítasz valamit az oldalon, ahol a LM-es űrlap is van, akkor le kell ellenőrizni, hogy a WP nem rontotta-e el az űrlapot.
Ezt így kell: Próbálj meg feliratkozni üres adatmezőkkel, ha nem pirosodnak be a hiányzó adatmezők a hibaüzenettel, hogy “tessék kitölteni”, akkor az űrlapot a WP elrontotta és újra be kell illeszteni.
A rutinos felhasználóink már automatikusan minden módosítás után, amit a weboldalukon csinálnak, kapásból törlik az űrlap kódjait és beillesztik újra, majd kilépnek a szerkesztő felületről. (amikor már biztosan semmilyen módosítás nem lesz az oldalon)

Macerás, de mindez CSAK WordPress honlapokra vonatkozik és CSAK akkor, ha captcha kódot is tartalmaz az űrlap.

Ha az iframe megoldást választod az űrlap beillesztéséhez, akkor captcha kóddal is nyugodtan lehet iframe-ben dolgozni. (lásd a leírást alul!)

Űrlap beillesztése WordPress widget-be

Mik azok a widget-ek?

A WordPress weboldalon bal vagy jobb oldalon látható, előre definiált funkciók.

Ha ilyen oldalsó panelben szeretnéd szerepeltetni az űrlapot, akkor “Text” típusú widget-be kell bemásolni a ListaMesteres űrlap forráskódját.

Űrlap beillesztése iframe-be

Mit jelent az, hogy iframe-ben van az űrlap?

Ha iframe-be illeszted be az űrlapot, akkor úgy fog kinézni az adott weboldalad, mintha benne lenne egy “mini weboldal” és ebben a mini oldalban lenne benne az űrlap. Mire jó ez? Az iframe-s megoldás a WP-ben azért is jó, mert az kvázi “honlap a honlapban” és a WP abba nem tud belenyúlni, nem érdekes, hogy van javascript, vagy nincs az űrlap forráskódjában. Tehát az iframe esetén nem kell kivenni a pipát a javascript alkalmazása előtt. Az oldalad többi részén a helyén marad minden, csak az iframe dobozon belül fog elnavigálni a feliratkozó a feliratkozás utáni üzenetre (vagy arra az oldalra, amit beállítasz). Tehát a köszönő oldal is az iframe dobozban fog megjelenni.

Hogy kerül az űrlap iframe-be?

Az űrlap URL-jét iframe-be teszed, így:
<iframe src=”http://form1.listamester.hu/forms/XXX/YYY.html” style=”width: 350px;”></iframe>

Hol van az űrlap URL-je?

Az Űrlapok menüpontban rögtön felül, a feliratkozási űrlap linkje mellett találod kiírva (a mentőöv felett 2 sorral):

ListaMester feliratkozási űrlap linkje

ListaMester feliratkozási űrlap linkje

Itt az XXX és YYY az űrlap azonosítására szolgáló számok, a hivatkozott oldal pedig egy statikus html a ListaMester szerverén.

<iframe src=”http://form1.listamester.hu/forms/XXX/YYY.” style=”width: 350px;”></iframe>

A style=”width: 350px;” paraméter a szélességét adja meg az iframe doboznak a weboldaladon. Ez persze szabadon beállítható.

Pl. itt van egy korábbi bejegyzésben is példaként bemutatott “boldog házi kedvenc” hírlevélre feliratkoztató űrlap iframe-ben, amit 360 px szélesre állítottunk. Így megjelenik oldalt egy kis görgetősáv. (Nem működik! Nem lehet feliratkozni rajta! Direkt kikapcsoltuk a feliratkozás lehetőségét.)


Ha nem tetszik ez a megoldás, nem szeretnénk görgetni, akkor adjunk meg magasságot is!

Ha szeretnél captcha kódot is használni az űrlapodon a WP oldaladban, akkor is választhatod az iframe-s megoldást a beillesztéshez. Bepipálod a két funkciót (a fentiekben, a captcha kódnál leírtuk), és ugyanígy beilleszted iframe-ben, mint captcha nélkül.



Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.


kettő × 4 =