Feliratkozási űrlapok létrehozása és beágyazása

Published: 2026. július 16. · Last updated: 2026. július 21. · By Marcus Biel

A beágyazott űrlap közvetlenül a webhely egy meglévő oldalán belül jelenik meg. A körülötte lévő tartalom részét képezi, nem pedig annak fölött jelenik meg.

A beágyazott űrlapok jól használhatók blogcikkekben, a saját webhelyén létrehozott céloldalakon, hírlevél-szekciókban, oldalsávokban és láblécekben. Az űrlapkód elhelyezési helye határozza meg, hol jelenik meg az űrlap.

Ez az útmutató a beágyazott űrlapokra jellemző lépéseket ismerteti. A közös vizuális szerkesztési funkciókat a fő Feliratkozási űrlapépítő útmutató mutatja be.

Beágyazott űrlap létrehozása

Nyissa meg a „Feliratkozási űrlapok” menüt, kattintson az „Űrlap létrehozása” lehetőségre, majd válassza a „Beágyazott űrlap” lehetőséget. Adjon meg egy egyértelmű belső nevet, majd lépjen tovább az építőfelületre.

Meglévő űrlapot is szerkeszthet a nevére kattintva a Feliratkozási űrlapok áttekintésében.

A belső név nem jelenik meg automatikusan a látogatók számára. Nevezze el az űrlapot az elhelyezkedése vagy célja alapján, például „Kezdőlap hírlevele”, „Blog lábléce” vagy „Termékfrissítések”.

Kezdődesign kiválasztása

A beágyazott űrlapok üres űrlapot, standard űrlapot és négy megtervezett sablont kínálnak:

• Nyugodt jegyzet
• Kuponsáv
• Sötét szerkesztőségi
• Minimalista kék

Válassza azt a designt, amely leginkább illik ahhoz a webhelyhez, ahol az űrlap megjelenik, valamint annak hangvételéhez. Minden kezdődesign teljesen módosítható a kiválasztás után.

A beágyazott űrlap megtervezése

A „Elrendezés” és a „Tartalom” segítségével rendezheti el az űrlapot. A beágyazott űrlap a feliratkozási űrlap mellett kiegészítő szöveget, képeket, listákat, gombokat, közösségi linkeket, feliratkozószámlálót, térközöket vagy elválasztókat is tartalmazhat.

Keskeny oldalsáv vagy lábléc esetén az egyoszlopos kialakítás általában könnyebben olvasható. Szélesebb oldalszekcióban a kétoszlopos elrendezés lehetővé teszi, hogy a mezők mellett rövid magyarázat vagy kép jelenjen meg.

Válassza ki a feliratkozási űrlap blokkot a feliratkozói mezők, a kötelező mezők, a címkék, a rejtett címkék, a folyamatjelző és az opcionális feliratkozószámláló beállításához. Ezután külön-külön formázhatja az űrlap konténerét, a mezőket és a küldés gombját.

A beágyazott űrlap vásznának hátterét és általános designbeállításait az „Oldalbeállítások” megnyitásával módosíthatja. Vegye figyelembe a körülötte lévő webhelyet. Az átlátszó vagy egyszerű háttér gyakran természetesebben illeszkedik, míg a kontrasztos háttér segít kiemelni a feliratkozási ajánlatot.

Az elrendezésekkel, tartalmakkal, rétegekkel, mezőkkel, címkékkel, tipográfiával és megjelenéssel kapcsolatos teljes útmutatót a Feliratkozási űrlapépítő használata című leírásban találja.

A feliratkozási folyamat összekapcsolása

Az építő fejlécében található feliratkozási folyamat vezérlőjével áttekintheti, mi történik a beküldés után, melyik Double Opt-in e-mailt küldi a rendszer, és mit lát a látogató a megerősítés után.

Választhat meglévő folyamatot, szerkesztheti a hozzárendelt folyamatot, vagy létrehozhat újat. Ha a kiválasztott folyamatot más űrlapok is használják, ne feledje, hogy a szerkesztése azokat az űrlapokat is érintheti.

Előnézet megtekintése és mentés

Kattintson az „Előnézet” gombra, hogy áttekintse a teljes űrlapot, mielőtt elhelyezné a webhelyén. Ellenőrizze a mezők sorrendjét, a címkéket, a hibák számára fenntartott helyet, a gomb szövegét és a kiegészítő tartalom mennyiségét.

Kattintson a „Módosítások mentése” gombra az aktuális verzió mentéséhez. Amikor készen áll a beágyazásra, térjen vissza a Feliratkozási űrlapok áttekintéséhez.

Az űrlap aktiválása

A beágyazott űrlapnak aktívnak kell lennie, mielőtt a nyilvános kód használhatóvá válik.

Ha az űrlap inaktív, nyissa meg a hárompontos műveleti menüt a Feliratkozási űrlapok áttekintésében, majd válassza az „Aktiválás” lehetőséget. Az aktív űrlapnál megjelenik a „Kódrészlet megjelenítése” művelet.

Deaktiválja az űrlapot, amikor már nem szeretné elérhetővé tenni a webhelyén. A deaktiválás offline állapotba helyezi az űrlapot, de nem törli a designját és a korábbi jelentésadatokat.

A JavaScript-kód kimásolása

Kattintson a „Kódrészlet megjelenítése” lehetőségre, majd nyissa meg a „JavaScript” lapot. A Maildroppa egy rövid szkriptet biztosít, amely tartalmazza az egyedi űrlapazonosítót.

A kód szerkezete a következő:

<script async src="https://form.maildroppa.com/md-form-loader.js" data-md-form="[form-id]"></script>

Másolja ki a teljes kódot a szkript címének és az űrlapazonosítónak a módosítása nélkül.

A JavaScript-beállítás a Maildroppa űrlapfuttatókörnyezetén keresztül tölti be az aktuális, mentett űrlapot. Ha később ugyanazt az űrlapot szerkeszti és menti a Maildroppában, a meglévő kódrészlet továbbra is az adott űrlapazonosítóra hivatkozik. Nem kell új űrlapot létrehoznia pusztán a szöveg vagy a design módosításához.

Az űrlap hozzáadása a webhelyhez

Illessze be a szkriptet arra az oldalrészre, ahol a beágyazott űrlapnak meg kell jelennie.

A pontos lépések az Ön webhelyrendszerétől függenek. Oldalépítőben vagy tartalomkezelő rendszerben használjon egyéni HTML- vagy szkriptkódot elfogadó blokkot. Egyedi webhely esetén adja hozzá a szkriptet a megfelelő sablonhoz vagy oldaljelöléshez.

Egyes webhelyszerkesztők biztonsági okokból eltávolítják a szkriptcímkéket. Ha az oldal közzététele után nem jelenik meg az űrlap, először ellenőrizze, hogy a szerkesztő megőrizte-e a teljes Maildroppa-szkriptet. Előfordulhat, hogy a rendszer külön egyéni kódterületét kell használnia, vagy segítséget kell kérnie a webhely kezelőjétől.

Ne illessze be ugyanazt a beágyazott űrlapkódrészletet többször egy oldalon, kivéve, ha szándékosan ugyanazt az űrlapot több helyen szeretné megjeleníteni, és ezt a beállítást tesztelte.

A HTML lap használata

A „HTML” lap a létrehozott űrlapjelölést biztosítja. Ez a lehetőség olyan egyedi megvalósításokhoz készült, amelyekben közvetlenül a megjelenített HTML-lel szeretne dolgozni.

Ha ezt a módszert választja, másolja ki a teljes jelölést. Mivel egy egyedi HTML-integrációt befolyásolhatnak a webhely stílusai és megvalósítása, alaposan tesztelje a mezőket, az ellenőrzést, a beküldést és a megerősítési folyamatot.

A normál, Maildroppa által kezelt űrlap esetén a JavaScript-kódrészlet rövidebb integrációt biztosít, és az azonosító alapján tölti be az aktuális nyilvános űrlapkonfigurációt.

A beágyazott űrlap tesztelése

Tegye közzé vagy tekintse meg előnézetben a kódot tartalmazó webhelyoldalt. Ezután tesztelje az űrlapot úgy, ahogyan egy látogató tenné:

1. Ellenőrizze, hogy az űrlap a megfelelő helyen jelenik-e meg.
2. Tekintse meg az oldalt széles és keskeny képernyőn is.
3. Töltse ki az összes kötelező mezőt.
4. Küldje be az űrlapot, és ellenőrizze a választ.
5. Nyissa meg a Double Opt-in e-mailt.
6. Erősítse meg a címet, és ellenőrizze a végső választ.
7. Ellenőrizze, hogy a feliratkozó és az esetleges rejtett címkék megfelelően megjelennek-e a Maildroppában.

Ha az űrlap szélesebb a webhely konténerénél, módosítsa az űrlap szélességét, az oszlopelrendezést, a belső margót vagy a mobilnézeti egymás alá rendezés beállításait az építőben. Az elrendezési problémákat ne a létrehozott Maildroppa-kód módosításával próbálja megoldani.

Beágyazott űrlap frissítése

Nyissa meg ugyanazt az űrlapot a Maildroppában, végezze el a módosításokat, tekintse meg az előnézetet, majd kattintson a „Módosítások mentése” gombra. A webhelyén található JavaScript-kódrészlet továbbra is ugyanazt az űrlapazonosítót használja, és betölti a mentett nyilvános konfigurációt.

Ha az űrlapot ideiglenesen el szeretné távolítani, deaktiválja a Feliratkozási űrlapok áttekintésében. Ha már nincs rá szükség, távolítsa el a kódrészletet a webhelyről is, hogy az oldal ne tartalmazzon felesleges kódot.