A sablonok HTML és/vagy CSS kódjának módosítása, szerkesztése esetén az űrlapok esetleges működési sajátosságaival kapcsolatban nem tudunk támogatást nyújtani, és ügyfélszolgálatunk nem tud segíteni az egyedi kódok használatából eredő problémák megoldásában. Azt javasoljuk, hogy elakadásoddal kapcsolatban fordulj webmesteredhez vagy CSS-ben jártas szakemberhez.
Az űrlap sablonok előre elkészített sablonok, amelyek meghatározzák a SalesAutopilot-tal létrehozott űrlap megjelenését. A szoftverben vannak előre létrehozott, ízléses megjelenésű sablonok, de te is készíthetsz vagy készíttethetsz saját, a weboldaladhoz és céges arculatodhoz illeszkedő űrlap sablonokat. Így amikor új űrlapot hozol létre, azonnal olyan űrlapot kapsz, amely illeszkedik a weboldaladba.
Ebből a cikkből megtudod, hogyan választasz sablont az űrlapodhoz, hol találod a sablonok azonosítóját, és hogyan készítesz saját Modern, Hagyományos vagy Több zónás sablont.
Csak akkor kezdj hozzá űrlap sablon készítéséhez, ha a HTML és CSS technológiához jól értő szakember vagy. Ellenkező esetben bízd rá ezt a feladatot ilyen szakemberre.
Sablonok használata
A Sablonválasztó eléréséhez kattints az egyik űrlapodra (1), majd a Szerkesztés ikon mellett lévő lenyíló menüből (2) válaszd ki a Mezők szerkesztése (3) opciót.
Ezután a megnyíló felület közepére görgetve megtekintheted a választható sablonokat.
Minden sablonkártya jobb felső sarkában látod a sablon azonosítóját (például ID 2318). Ha rákattintasz, a SalesAutopilot a vágólapra másolja – a sablon kiválasztása ettől nem változik. Az azonosítóval MCP-n keresztül (például Claude-ban vagy ChatGPT-ben) pontosan megnevezheted, melyik sablonnal készüljön az űrlap. Ha csak a sablon nevét adod meg, az AI asszisztens név alapján is kikeresi.
Az űrlap sablon határozza meg az űrlap színvilágát és elrendezését. Ha meg szeretnéd nézni, hogyan jelenik meg az űrlap egy adott sablonnal, kattints az oldal alján az Űrlap előnézetének megtekintése gombra.
Sablon létrehozása
A saját sablon létrehozásához kattints a bal oldali kék menüsávban látható fogaskerék ikonra (1), majd a Sablonok csoportban (2) válaszd ki az Űrlap sablonok opciót (3). Itt megjelennek a beépített űrlap sablonok, illetve a saját űrlap sablonjaid, ha korábban már létrehoztál ilyet.
Minden sablonkártya bal felső sarkában látod a sablon azonosítóját; kattintással kimásolhatod. Saját sablon szerkesztésekor az azonosító az Űrlap sablon szerkesztése cím mellett is megjelenik (Sablon ID).
A Modern és a Hagyományos űrlap sablonok azonos technikai háttérrel rendelkeznek. A Több zónás sablonok valamelyest összetettebbek, ezért ezeket külön mutatjuk be.
Sablont létrehozhatsz egy beépített sablon másolásával, de felépítheted a saját sablonodat a nulláról is. Javasoljuk, hogy legalább az első néhány alkalommal egy meglévő SalesAutopilot sablonból indulj ki, mert ezek tartalmazzák azokat a speciális kódokat, amelyek az űrlap működéséhez és a SalesAutopilottal való kommunikációjához szükségesek.
Modern és Hagyományos űrlap sablon létrehozása
Első lépésként az Űrlap sablonok képernyőn kattints a kiválasztott sablon jobb felső sarkában látható fogaskerék ikonra (1), majd a megjelenő Másolás (2) gombra.
A megjelenő felületen először nevezd el a sablonodat egy jól megkülönböztethető névvel, majd ismerkedj meg az Űrlap sablon szerkesztése funkcióival.
1. Egyedi színvilág beállítása
Ezzel a funkcióval az űrlap színvilágát szabhatod testre.
Háttér szín: az űrlap mögötti felület színe. A Gradiens jelölőnégyzet bepipálásával egy második szín kiválasztásával színátmenetet állíthatsz be.
Űrlap háttérszíne: az űrlap felületének színe. Itt is alkalmazhatsz színátmenetet.
Szöveg színe: az űrlapon lévő összes szöveg színe, beleértve a mezők elnevezéseit.
Űrlap címének színe: az űrlap címének színe.
Gomb színe: az űrlapon lévő gomb színe, itt is beállíthatsz színátmenetet.
Gomb aktív színe: ez a szín akkor látszik, amikor az űrlap kitöltője a gomb fölé viszi az egeret.
Gomb szövegének színe: a gomb szövegének színe, az űrlap többi szövegétől függetlenül.
2. Sablon HTML és CSS szerkesztése
A HTML forráskódban szögletes zárójelek között speciális mezőkódok vannak. Az űrlap létrehozásakor a SalesAutopilot ezeket az űrlap működéséhez szükséges tartalmakra cseréli. Az általad létrehozott űrlap sablonnak is tartalmaznia kell ezeket a kódokat. A mezőkódok az alábbi tartalmakat generálják a végleges űrlapba:
[css-file]: az űrlap CSS fájljának hivatkozása. A szerkesztőképernyő CSS forrásában megadott CSS-definíciókat a szoftver automatikusan ide linkeli.
[form-javascript]: az űrlap működéséhez és hibaellenőrzéséhez szükséges JavaScript kód.
[form-action-header]: a form HTML nyitó tagje és a szükséges rejtett mezők.
[form-title]: az űrlap neve, amelyet az űrlap varázslóban megadtál. Ha nincs rá szükséged, kihagyhatod.
[form-desc]: az űrlaphoz tartozó rövid bevezető szöveg, amelyet az űrlap varázslóban megadtál. Ha nincs rá szükséged, kihagyhatod.
[form-content]: az űrlap mezői. Ezek megjelenését csak CSS-sel tudod módosítani.
[submit-text]: az űrlap elküldés gombjának felirata, amelyet az űrlap varázslóban megadtál. Ha nincs rá szükséged, kihagyhatod.
Fontos:
Ha az űrlap sablonban JavaScriptet használsz, tedd a {literal} és {/literal} tagek közé.
A beépített űrlap sablonok nem tartalmazzák a teljes HTML weboldal forráskódját, csak magát az űrlap kódját. Ha olyan beillesztési módot választasz, amelyhez a teljes HTML oldal forráskódja is kell, a rendszer ezt automatikusan hozzáadja.
Az űrlap sablon CSS-ének átalakításához javasoljuk, hogy hozz létre egy űrlapot az eredeti sablonnal, és azon próbáld ki a saját CSS-definícióidat.
3. Köszönőoldal sablon szerkesztése
A köszönőoldalt hasonlóan feltöltheted HTML forráskóddal, vagy feltölthetsz egy már kész köszönőoldalt.
4. Előnézet
Az Előnézet gombra kattintva megnézheted a módosított űrlap kinézetét.
Több zónás űrlap sablon alapok
A több zónás űrlap sablon egy mini landing page szerkesztőhöz hasonló alkalmazás, amellyel teljes megrendelési oldalakat, varázsló oldalakat és hasonlókat alakíthatsz ki. A fő előnyei:
Az űrlapot ugyanazzal a néhány lépéses varázslóval alakítod ki, amit az űrlap varázslónál már megszoktál.
Az oldal űrlapon kívüli része WYSIWYG szerkesztővel szerkeszthető, így HTML-tudás nélkül bárki szerkesztheti.
Szinte tetszőleges oldal- és űrlapelrendezés kialakítható vele.
A több zónás űrlap sablon készítésének kezdeti lépései megegyeznek a Modern és a Hagyományos űrlap sablon készítésének lépéseivel. A sablonban szereplő szögletes zárójeles mezőkódok is azonosak ([css-file], [form-javascript] stb.).
A különbség megértéséhez nézz meg egy beépített több zónás sablonnal készült űrlapot:
Az űrlap első és második lépése ugyanaz, mint a hagyományos űrlap varázslóban. A különbség a harmadik lépésben van: itt az űrlap körüli zónákra kattintva a megjelenő WYSIWYG szerkesztővel módosíthatod a tartalmat.
Több zónás űrlap sablon létrehozása
A több zónás űrlap sablon lényegét – hogy a varázsló harmadik oldalán WYSIWYG szerkesztővel szerkeszthető – a sablon forrásában elhelyezett tagekkel éred el.
A szerkeszthető zónákat ehhez hasonló div-ekkel kell körbefogni:
<div mm_editable="mmsection3" mm_copy mm_delete>
A div a következő attribútumokkal rendelkezhet:
mmsection3: a szerkeszthető zóna egyedi azonosítója, a sablonon belül egyedinek kell lennie. Kötelező megadni.
mm_copy: ha a div rendelkezik ezzel az attribútummal, a zóna másolható lesz. Opcionális.
mm_delete: ha a div rendelkezik ezzel az attribútummal, a zóna törölhető lesz. Opcionális.
Fontos: a zónák jelenleg nem ágyazhatók egymásba.
Zónák rendezhetővé tétele
Az egymás után következő zónák drag&drop módszerrel rendezhetővé tehetők. Ehhez a zónát definiáló div-et befoglaló div elemnek (a zóna szülő div-jének) kell adni egy mmsortable-x class paramétert, ahol az x rendezési blokkonként egyedi. Ha például az űrlapnak van egy jobb oldali része és egy lábléce, ahol több zóna vagy legalább egy másolható zóna van, akkor mindkét befoglaló div kap egy-egy ilyen class attribútumot: az első például mmsortable-1, a második mmsortable-2.
A szabályok megértéséhez javasoljuk, hogy készíts másolatot valamelyik beépített több zónás űrlap sablonról, és tanulmányozd át a forrását.
Köszönőoldal HTML forrásának elkészítése
A köszönőoldal HTML forrásának elkészítésekor egyetlen megkötés van: valid HTML kódot kell készítened, különben a WYSIWYG szerkesztő szerkesztéskor elronthatja a köszönőoldal tartalmát.