##  Feliratkozási űrlap beillesztése Elementorba 

Ha Elementort használsz, három módon is, a WordPress plugin segítségével összekötheted az űrlapodat a Listamesterrel. 2026-tól Elementor Pro form widget is elérhető – [ez a legkézenfekvőbb megoldás.](https://www.listamester.hu/utmutato-listamesterhez/urlapok/nativ-elementor-listamester-integracio) A Listamester WordPress pluginjának beillesztéséről bővebben [ITT](https://www.listamester.hu/utmutato-listamesterhez/urlapok/feliratkozasi-urlap-beillesztese-wordpress-honlapba "Feliratkozási űrlap beillesztése WORDPRESS honlapba") találsz információt.

### Adatok webhookon keresztüli átküldése

**Elemetoros űrlap esetén** lehetőség van az adatok webhookon keresztüli átküldésére. Ehhez NINCS szükség a wordpress pluginra. Ennek összekapcsolását részletezzük az alábbi útmutatóban.

Az alábbi képen bal oldalt láthatod az elkészített az űrlapot az Elementorban, jobb oldalt pedig a Listamesterben.

![Listamester - Útmutatók - Elementor - Űrlapok összehasonlítása](/sites/default/files/inline-images/elementorban_urlap.jpeg)


#### Beállítás Listamesterben:

Az Elementorhoz szükségünk lesz a **Webhook**ok beállítására. Ehhez lépj a **Beállítások-Integrációk-Webhookok** menübe. Itt válaszd ki a legördülő menüből a csoportod.

![Listamester - Útmutatók - Elementor űrlap - Beállítás Listamesterben 01](/sites/default/files/inline-images/k%C3%A9p_2023-09-21_200426622.png)

A következő oldalon kattints az **Új Webhook létrehozása** gombra!

![Listamester - Útmutatók - Elementor űrlap - Beállítás Listamesterben 02](/sites/default/files/inline-images/k%C3%A9p_2023-09-21_200614654.png)

A megjelenő ablakban töltsd ki az adatokat. Nevezd el a webhookot, majd a **Kommunikáció irányát** állítsd **bejövő**re. Válaszd ki a **műveletet**, majd állítsd **Aktív**ra a checkboxot. (A példában feliratkoztatjuk az űrlapot kitöltőket.)

![Listamester - Útmutatók - Elementor űrlap - Beállítás Listamesterben 03](/sites/default/files/inline-images/urlap5_1.png)![Listamester - Útmutatók - Elementor űrlap - Beállítás Listamesterben 03](/sites/default/files/inline-images/urlap5_2.png)- A beállítások után generáld ki a **Hook kulcs**od. Ehhez kattints az **Új kulcs generálása** gombra! (Ezt mentsd el, a későbbiek folyamán fog kelleni!)
- Az Elementorból add meg az **Email** és **Név** **mező azonosítóját** az Elementorból.
- A példában külön szedtük a Vezetéknév és Keresztnév adatmezőket, így **külső mezőt** kell hozzárendelni.
- A **mezők azonosítójá**t Elementorban az adott mezőre kattintva a **Tartalom** fül alatti **Címke** részben találod meg.
    - Az azonosítóhoz azt kell beírni, ami az Elementornál az adott adatmező azonosítója, pl. firstname. (az egy dolog, hogy ott az űrlapon a firstname az "Keresztnév" - az már az Elementor dolga). Tehát mindkét rendszerben vannak *alapértelmezett* elnevezések az adatmezőknek. Mindkét rendszerben nevezhetjük azt akárminek a konkrét listánál, vagy űrlapon - ezt az adott rendszerben állítjuk be.
    - **DE!** azt hogy amikor egymással kommunikál a 2 rendszer, akkor melyik adatot hova kell küldeni, azt a webhooknál állítjuk be és ott az *alapértelmezett* elnevezések kellenek.

![Listamester - Útmutatók - Elementor - Mező Címkék](/sites/default/files/inline-images/k%C3%A9p_2024-06-04_193853981.png)

- Ha minden adatot kitöltöttél, kattints a **Mentés** gombra!

![Listamester - Útmutatók - Elementor űrlap - Beállítás Listamesterben 03](/sites/default/files/inline-images/k%C3%A9p_2024-06-04_194220606.png)

A mentés után megkapjuk az **Webhook** **ID** értékét is. (Ezt is mentsd el, a későbbiek folyamán fog kelleni!)

![Listamester - Útmutatók - Elementor űrlap - Beállítás Listamesterben 04](/sites/default/files/inline-images/k%C3%A9p_2023-09-21_202045035.png)

##### Útvonal létrehozása:

- Az előbbiekben megkapott **Hook kulcs** és **Hook ID** szükséges hozzá.
- Az alábbi linkbe helyettesítsd be a *SAJATHOOKID* részre a megkapott **Hook ID**-d, a *SAJATHOOKKULCS* részre pedig a **Hook kulcs**od.
    - https://listamester.hu/usr/hookConverters/elementor.php?hookId=**SAJATHOOKID**&hookKey=**SAJATHOOKKULCS**&extractMethod=1

#### Beállítás Elementorban:

Itt első körben a Pro verzióban meg kell keresned a **Form** lehetőséget. A **Form elem** beszúrása után a **Form szerkesztése** alatt a **Form Fields** részben hozzá kell adni az űrlap elemeit. (A példában Vezetéknév, Keresztnév, Email.)

![Listamester - Útmutatók - Elementor űrlap - Beállítás 01](/sites/default/files/inline-images/elementor_urlap_beallitas01.jpeg)

Ezek után egyesével az adott **elemekre kattintva** a **Content** fülön a **Type** részben állítsd be az adatmező típusát, a **Label** szöveges mezőben pedig be kell írnod az elemek neveit, amelyeknek pontosan meg kell felelniük a Listamesterben létrehozott adatmezők neveivel.

![Listamester - Útmutatók - Elementor űrlap - Beállítás 02](/sites/default/files/inline-images/elementor_urlap_beallitas02.jpeg)

Lejebb az **Action After Submit** részben állítsd be, hogy az űrlap elküldése után mi történjen. **Fontos**, hogy a **Webhook** lehetőséget mindenképp add hozzá, hogy átjöjjenek a rendszerbe az adatok. (A példában a *Collect Submission* lehetőség az elementorban gyűjti az adatokat, az *Email* lehetőség végett emailt is kapunk a feliratkozókról, a *Webhook* lehetőség pedig az adatátvitelért felelős)

![Listamester - Útmutatók - Elementor űrlap - Beállítás 03](/sites/default/files/inline-images/elementor_urlap_beallitas05.jpeg)

A **Webhooknál** add meg **Beállítás a Listamesterben** részben létrehozott útvonalad (linked), és állítsd **IGEN** lehetőségre az **Advanced data** melletti checkboxot.

![Listamester - Útmutatók - Elementor űrlap - Beállítás 04](/sites/default/files/inline-images/elementor_urlap_beallitas06.jpeg)

Ezzel az összeköttetés el is készült. Ne felejtsd el **tesztelni!**