Űrlap beágyazása Wordpress-be

A SalesAutopilot által létrehozott űrlap Wordpress-be történő beillesztése négyféle módon is történhet. Tartalomként háromféleképpen, widget-ként pedig egy újabb módon. Az alábbi oldalon ezt a négy megoldást ismerheti meg.

Űrlap beillesztése Wordpress tartalomba

A Wordpress tartalom részében alapértelmezetten nem lehet Javascript kódot és CSS definíciókat elhelyezni. Mivel a SalesAutopilot által generált űrlap tartalmaz ilyen elemeket két megoldás lehetséges: bővítmény használatával vagy a Javascript és CSS definíciók különválasztásával (ez utóbbit alapvető webszerkesztői ismeretekkel rendelkezőknek ajánljuk).

A.) Űrlap beillesztése Surbma – SalesAutopilot Shortcode plug-in segítségével (javasolt megoldás)

1. lépés Plug-in telepítése Telepítse fel, majd kapcsolja be a Surbma – SalesAutopilot Shortcode bővítményt.

2. lépés Űrlap megadása Akár az oldal szerkesztése, akár az Elemetor használata során a HTML kódba a következő kódot kell beírni:
[sa-form listid="THIS_IS_THE_LISTID" formid="THIS_IS_THE_FORMID"]

3. lépés Beállítás A fenti kódba helyettesítse be az Ön által létrehozott elemek azonosítóit:

• listid= a lista azonosítója
• formid= az űrlap azonosítója

B.) Űrlap beillesztése Insert Html Snippet plug-in segítségével

Először telepítse fel az Insert Html Snippet bővítményt. Aktiválja. Kattintson a jobb oldali sávban az XYZ Html menüpont HTML Snippets opcióra.

A megjelenő képernyőn kattintson az "Add New HTML Snippet" gombra.

A Tracking Name mezőbe írjon be egy rövid elnevezést, amellyel hivatkozik az adott űrlapra. A HTML code mezőbe másolja be az űrlap HTML forrását (mindegy, hogy az iframe-s vagy a HTML forráskódot másolja be). Ezután kattintson a Create gombra.

Megjelenik az elmentett snippet-ek listája. A Snippet Short Code oszlopban lévő mezőkódot másolja a vágólapra.

Nyissa meg a tartalmat ahova be szeretné illeszteni az űrlapot. A tartalomban a megfelelő helyre illessze be a fentebb kimásolt mezőkódot, mentse el a tartalom módosításait, kattintson az előnézet gombra és az űrlap meg fog jelenni.

Snippet használat Avada sablon esetén

Ha Avada sablont használ, akkor a Snippet Short Code oszlopban lévő mezőkódot egy Code Block típusú elembe másolja be. Avada sablon esetén, ha csak egy helyen szeretné a weboldalán megjeleníteni az űrlapot, akkor nem szükséges bővítményt használnia, elég, ha az űrlap forráskódját bemásolja egy Code Block-ba.

Snippet használata Elementor sablon esetén

Űrlapot a "Shortcode" Elementor elem és az XYZ plugin együttes használatával tud beilleszteni az űrlapba. Először helyezzen el az oldalra egy Snippet elemet, oda ahova az űrlapot be szeretné illeszteni.

Ezután kattintson a most elhelyezett Shortcode elemre, majd a másolja be az XYZ plugin shortcode-ját a képen jelölt helyre:

Az űrlap azonnal megjelenik az oldalon. Ha gombra kattintva megnyíló vagy exit popup-ot helyezett el, azok természetesen csak a gombra kattintva vagy az oldal elhagyása előtt fognak ténylegesen megjelenni.

Kiegészítő megjegyzés: Egy másik hasonló működésű plugin a Raw HTML Snippet.

C.) Űrlap beillesztése plug-in nélkül (webszerkesztői tudás szükséges)

A SalesAutopilot űrlap forráskódján egy kisebb módosítást kell végrehajtani, hogy beilleszthető legyen. Az űrlap forrásában lévő ellenőrző Javascript kódot nem lehet közvetlenül bemásolni az űrlap többi részével együtt a Wordpress tartalomba. Ezért az űrlap forráskódjából ki kell vágni ezt a részt és egy külön fájlban elhelyezni. Az ellenőrző szkript kódja a <script type="text/javascript"> és a </script> határoló tag-ek közötti rész.

Ezt a kódot el kell menteni egy .js kiterjesztésű fájlba, felmásolni arra a szerverre ahol a Wordpress fut. Ezek után egy erre a fájlra mutató hivatkozást kell elhelyezni az űrlap forráskódjában az eredeti ellenőrzőkód helyén, a következő módon:
<script type="text/javascript" src="http://www.onweboldala.hu/urlap-ellenorzo.js">

Az így módosított forráskódot be lehet másolni a Wordpress tartalomba (csak HTML nézetben).

Ha űrlapot illesztett egy tartalomba, akkor nem szabad átváltani Visual nézetbe, különben az űrlap formázásait és az űrlap elemeket a Wordpress eltávolítja.

D.) Űrlap beillesztése Wordpress widget-be

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

Űrlap widget-ben való felhasználásához a "Text" típusú Widget-be kell bemásolni a SalesAutopilot által generált űrlap forráskódját ahogy az alábbi képernyőfotókon látható.