Űrlap beágyazása Wordpress-be

Áttekintés

A SalesAutopilot által létrehozott űrlap Wordpress-be történő beillesztése többféle módon történhet. Az alábbi bejegyzésben ezeket a módokat mutatjuk be:

1. Űrlap beillesztése plugin segítségével
   1. Rövid kód beillesztése Wordpress szerkesztőbe
   2. Rövid kód beillesztése Elementor-ba
2. Űrlap beillesztése iframe-mel vagy teljes forráskóddal (plugin nélkül)
   1. Alapértelmezett Wordpress szerkesztő esetén
   2. Elementor szerkesztő esetén
3. Űrlap widget-be történő beillesztése

1. Űrlap beillesztése plugin segítségével

Van lehetőséged különböző pluginok segítségével beilleszteni elkészített űrlapod a Wordpress oldaladba. Az alábbiakban bemutatunk egy ismertebb plugint, amely segítségével könnyedén elhelyezheted oldaladra az űrlapot. Természetesen más, hasonló működésű, plugint is használhatsz az űrlap beillesztéséhez.

Insert Html Snippet

1. Először is telepítsd a plugint a Wordpress fiókodban. Ezt a Bővítmények > Új hozzáadása felületen tudod megtenni.
   
2. A telepítés után a bal oldali menüsávban létrejön egy XYZ HTML menü opció. Az űrlap beágyazásához kattints a menü ikonra (1), majd a HTML Snippets opcióra (2). A megjelenő felületen pedig az “Add New HTML Snippet” (3) gombra.
   
3. A megjelenő felületen a Tracking Name (1) mezőbe adj meg egy rövid, beszédes elnevezést, amelyből a későbbiekben tudni fogod, hogy melyik űrlap forráskódját tartalmazza. A HTML code szöveg dobozba másold be a beilleszteni kívánt űrlapod iframe-s vagy teljes forráskódját a fiókodból. Arról, hogy pontosan melyik kódot használd bővebben olvashatsz a Feliratkozó űrlap weboldalba ágyazása - általános módszer c. Tudásbázis bejegyzésünkben. Ha bemásoltad a kódot, akkor kattints a Create (3) gombra.
   
   
4. Ezzel létrejön egy ún. shortcode (rövid kód) (1) aminek a segítségével bármelyik oldaladra tetszőlegesen elhelyezheted az űrlapodat Wordpressen belül. Ha a későbbiekben szeretnéd szerkeszteni az űrlap forráskódját, vagy a rövid kód elnevezését, akkor a sor végén látható ceruza ikonra kattintva teheted ezt meg (2).
   
   

Rövid kód beillesztése Wordpress szerkesztőbe

A beillesztéshez másold ki a fentebbi képen látható rövid kódot, majd nyisd meg annak az oldalnak a szerkesztő felületét, ahova be szeretnéd illeszteni a kódot.

Ha a Wordpress alapértelmezett szerkesztőfelületét használod, abban az esetben egyszerűen illeszd be a rövid kódot arra a helyre, ahol látni szeretnéd (1) az oldalon az űrlapodat és kattints a Frissítés gombra (2)

Ezzel már ki is került az éles oldaladra az űrlap, már érkezhetnek ezen keresztül a feliratkozóid vagy a megrendelések

Rövid kód beillesztése Elementorba

Ha nem az alapértelmezett Wordpress szerkesztőt használod, hanem mondjuk Elementort, akkor nyisd meg szerkesztésre Elementorral az oldalt és keresd ki a Shortcode elemet (1) a bal oldali menüsávban és illeszd be az oldal tetszőleges felületére (2).

Ezután kattints a beillesztett elemre és a bal oldali menüben megjelenő szövegdobozba másold be a korábban létrehozotott rövidkódot (1). Ha minden megfelelően működik, akkor azonnal meg is jelenik az űrlap az oldal előnézetében (2). Ha elvégeztél minden szükséges módosítást, akkor az űrlap beillesztésének véglegesítéshez kattints a Frissítés gombra (3).

2. Űrlap beillesztése iframe-mel vagy teljes forráskóddal (plugin nélkül)

Alapértelmezett Wordpress szerkesztő esetén

A Wordpress szerkesztője már képes kezelni nem csak a HTML kóddal beillesztett tartalmakat, hanem azt is ha a kód Javascript kódit is tartalmaz. Ezzel lehetővé téve, hogy egyből a kívánt oldalra tudd beilleszteni az űrlapod kódját. Ezt a következőképpen tudod megtenni:

1. Nyisd meg szerkesztésre azt az oldalt, ahova az űrlapot szeretnéd beilleszteni.
2. Tetszőleges helyre illessz be egy Egyéni HTML blokkot.
   
   
3. Az Egyéni HTML blokkba másold be az űrlap teljes, vagy iframe-s forráskódját (1). Arról, hogy pontosan melyik forráskódot használd bővebben olvashatsz a Feliratkozó űrlap weboldalba ágyazása - általános módszer c. Tudásbázis bejegyzésünkben. Ezután tekintsd meg előnézetben az oldalt és ha megfelelően megjelenik az űrlap előnézetben, akkor kattints a Frissítés gombra (2).
   
   
4. Ezzel be is illesztetted az űralpod az oldalra.
   
   

Elementor szerkesztő esetén

Elementor szerkesztő esetén is hasonlóan be kell illesztened egy HTML elemet az oldaladba, hogy beilleszthesd az űrlapodat. Ezt a következőképpen tudod megtenni:

1. Nyisd meg szerkesztésre Elementorral azt az oldalt, amelybe az űrlapot szeretnéd elhelyezni, majd a bal oldali menüben keresd ki a HTML elemet (1) és illeszd be az oldal tetszőleges részére (2).
   
2. Ezután kattints rá a beillesztett elemre és a bal oldalt megjelenő szövegdobozba másold be az űrlapod kódját (1). A kód beillesztése után az oldal előnézetében megjelenik az űrlap (2). Ha elvégeztél minden szükséges változtatást, akkor az űrlap beillesztésének véglegesítéséhez kattints a Frissítés gombra (3).
   
   

Űrlap widget-be történő beillesztése

Sokkal egyszerűbb a dolog ha az űrlapot widget-be szeretnéd használni. A Wordpress widget-ek a weboldal jobb vagy bal oldalsávjában megjelenő általában előre definiált funkciók (pl. kereső, tag-felhő stb.)

A következőképpen tudod beilleszteni űrlapodat egy widget-be:

1. A Bal oldali menüsávban a Megjelenésnél (1) válasszd ki a Widgetek opciót (2). Az űrlap beillesztéséhez Szöveges (Text) widget-re (3) lesz szükséged. Válasszd ki (4) és illesszd be (5) az oldal megfelelő sávjába.
   
   
2. A hozzáadott widget-et nevezzd el (1). Ez az elnevezés az oldalon is látszódni fog. A szövegdobozba illesszd be az űrlap kódját (2) és mentsd el (3) a widget-et.
   
   
3. Ezután már meg is jelenik abban a sávban az űrlap, ahova a widget-et beillesztetted. Az alábbi képen látható űrlap az Oldalsávban került elhelyezésre.
   
   

Kapcsolódó bejegyzések:

• Űrlap sablonok használata és készítése
• Feliratkozó űrlap weboldalba ágyazása - általános módszer
• Wordpress-es Popup űrlap plugin összekötése SalesAutopilottal
• Feliratkozó űrlap elhelyezése weboldalra több példányban