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

• egyszerűen,
• rövid idő alatt
• ÉS ami a legfontosabb: biztonságosan
  tudsz űrlapot beilleszteni a honlapodba, bármilyen keretrendszerben is készült az.

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.

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!

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

• Másold ki az űrlap forráskódját a vágólapra! (kijelölés majd Ctrl +C) Az Űrlapok menüpontban a Feliratkozási űrlap beillesztése saját honlapba az alábbi kóddal lehetséges felirat alatt, egy szövegdobozban találod az űrlap kódjait. Minden kódra szükség van, amit a mezőben látsz. Innentől: <!– ListaMester URLAP KEZDETE –> … idáig: <!– ListaMester URLAP VEGE –>
  

  Űrlapok menüpontban az űrlap forráskódja szövegdobozban található

• Nyisd meg WordPressben azt a bejegyzést, ahova be szeretnéd illeszteni az űrlapot! FONTOS: kapcsolj html nézetre!
• Html nézetben, ahol szeretnéd, hogy megjelenjen az űrlap, másold be a vágólapról a kódjait! (Ctrl +V)

• Ha az űrlap megjelenését módosítani szeretnéd, igazítani a honlapod kinézetéhez, és ezt nem tetted meg az Űrlapok menüpontban a saját CSS funkció segítségével, akkor lehet a weboldaladban is alakítani rajta. Html nézetben! Amire ügyelni kell, hogy a <form>, <input> <checkbox>  elemeket valamint azok “name”, “value”, “id” stb. paraméterei ne változtasd meg, mert ezek az űrlap működését befolyásolják!
• Ha bármi MÁST szeretnél változtatni azon az oldalon, ahol az űrlap is van, megteheted, visszakapcsolhatsz grafikus nézetbe és dolgozhatsz úgy. De! Ha az űrlappal akarsz dolgozni, akkor azt kizárólag html nézetben teheted meg.

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

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!

• Feliratkozol úgy, hogy minden mezőt kitöltesz. Mi történik feliratkozás után? Megkapod a beállított köszönő oldalt vagy üzenetet? Megérkezik a feliratkozásod a csoportba? Ott vagy a tagok listáján? Megérkezik a megadott e-mail címedre a feliratkozás után kiküldendő hírlevél? (ha van ilyen beállítva) stb.
• Megpróbálsz feliratkozni úgy, hogy nem töltesz ki minden kötelező mezőt. Mi történik? Jön a hibaüzenet, hogy a kötelező mezőket is töltsd ki? Ha nincs hibaüzenet, akkor lehet, hogy bepipáltad a Javascript használata (WordPressben nem ajánlott) funkciót az Űrlapok menüpontban. Vedd ki a pipát, mentsd el az űrlap beállításait, másold ki újra a szövegdobozból az űrlap forráskódját és illeszd be az előző űrlap helyére!

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.

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:

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):

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.