Űrlap sablonok használata és készítése

Az űrlap sablonok olyan előre elkészített sablonok, amelyek előre 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 Ön is készíthet / készíttethet saját, a weboldalához és céges arculatához illeszkedő űrlap sablonokat. Így amikor egy új űrlapot hoz létre a SalesAutopilot, azonnal olyan űrlapot kap eredményül amely tökéletesen illeszkedik a weboldalába.

Csak akkor kezdjen hozzá űrlap sablon készítéshez, ha Ön a HTML és CSS technológiához jól értő szakember. Ellenkező esetben mindenképpen bízza rá ezt a feladatot ilyen szakemberre.

Sablonok használata

A Sablonválasztó eléréséhez kattintson az egyik űrlapjára (1), majd a Szerkesztés mellett lévő lenyíló menüből (2) válassza ki a Mezők szerkesztése (3) opciót.

Ezután a megnyíló felület közepére görgetve megtekintheti a választható Sablonokat.

Az űrlap sablon definiálja az űrlap színvilágát és elrendezését. Ha meg akarja nézni hogyan fog megjelenni az űrlap valamely sablon alapján, akkor kattintson 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 kattintson a bal oldali kék menüsávban látható fogaskerék ikonra (1) majd a Sablonok menüből (2) válassza ki az Űrlap sablonok opciót (3). Itt megjelennek a beépített űrlap sablonok illetve az Ön saját űrlap sablonjai, ha korábban már létrehozott ilyet.

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 fogjuk bemutatni.

Sablont létrehozhat valamely már beépített sablon használatával, de felépítheti saját sablonját a nulláról is. Javasoljuk, hogy saját sablon létrehozásakor legalább az első néhány alkalommal egy már meglévő SalesAutopilot sablonból induljon ki, mivel azok tartalmaznak olyan speciális kódokat, amelyek szükségesek az űrlap megfelelő működéséhez és a SalesAutopilottal történő kommunikációjához.

Modern és Hagyományos űrlap sablon létrehozása

Első lépésként az Űrlap sablonok képernyőn kattintson 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 elsőként nevezze el Sablonját egy jól megkülönböztethető névvel, majd ismerkedjen meg az Űrlap sablon szerkesztése funkciókkal.

1. Egyedi színvilág beállítása

Van lehetősége az űrlap színvilágát testre szabni ezzel a funkcióval.

• Háttér szín: Az űrlap mögött elhelyezkedő felület színét tudja vele állítani. A Gradiens jelölőnégyzet bepipálásával pedig színátmenetet tud beállítani egy másik szín kiválasztásával.
• Űrlap háttérszíne: Az űrlap felületének színét tudja vele módosítani. Itt is van lehetősége színátmenetet alkalmazni.
• Szöveg színe: Az űrlapon elhelyezkedő minden szöveg, beleértve a mezők mellett elhelyezkedő elnevezések színét tudja vele változtatni.
• Űrlap címének színe: Az űrlap címének színét tudja vele változtatni.
• Gomb színe: Az űrlapon lévő gomb színét tudja vele megváltoztatni, itt is van lehetősége színátmenetet beállítani.
• Gomb aktív színe: Ez a szín akkor látszik az űrlap kitöltője számára, amikor a gombra vezérli az egeret.
• Gomb szövegének színe: A gomb szövegének színét külön tudja módosítani az űrlapon elhelyezkedő többi szövegtől.
  

2. Sablon HTML és CSS szerkesztése

A HTML forráskódban vannak speciális szögletes zárójelek között lévő mezőkódok. Az űrlap létrehozásakor a SalesAutopilot ezeket különböző, az űrlap működéséhez szükséges tartalmakra cseréli le. Az Ön által 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és képernyőn lévő CSS forrásban megadott CSS definíciókat fogja itt automatikusan belinkelni a szoftver.
• 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ó tag és a szükséges rejtett mezők.
• form-title: az űrlap neve, amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatja ha nincs rá szüksége.
• form-desc: az űrlaphoz tartozó rövid bevezető szöveg amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatja ha nincs rá szüksége.
• form-content: az űrlap mezői. Ezek megjelenését csak CSS-el tudja módosítani.
• submit-text: az űrlap elküldés gombjának felirata, amelyet az űrlap varázslóban megadott. Ezt a mezőkódot kihagyhatja ha nincs rá szüksége.

FONTOS megjegyzések:

• ha az űrlap sablonban használ Javascriptet, akkor azt tegye a {literal} {/literal} tag-ek közé.
• a beépített űrlap sablonok nem tartalmazzák az egész HTML weboldal forráskódját, csak és kizárólag magát az űrlap kódot. Amennyiben olyan beillesztési módot választ majd, amelynél szükséges, hogy az űrlap forráskódja körül az egész HTML oldal forráskódja is szerepeljen, a rendszer ezt automatikusan fogja szolgáltatatni.

Az űrlap sablon CSS-ének átalakításához javasoljuk, hogy hozzon létre egy űrlapot az eredeti sablonnal, majd azon próbálja ki a saját CSS definícióit.

3. Köszönőoldal sablon szerkesztése

A Köszönőoldalt hasonlóan feltöltheti HTML forráskóddal vagy feltöltheti egy már kész köszönőoldalt.

4. Szövegelem Sablonok

5. Előnézet

Az előnézet gombra kattintva megtekintheti a módosított űrlap kinézetét.

Több zónás űrlap sablon alapok

A több zónás űrlap sablon valójában egy mini landing page szerkesztő szerű alkalmazás, amellyel könnyedén alakíthat ki teljes megrendelési oldalakat, varázsló oldalakat, stb. A több zónás űrlap sablonok használatának az alábbi fő előnyei vannak:

• Az űrlap maga ugyanazzal a pár lépéses varázslóval alakítható ki, mint amit már megszokott az űrlap varázslónál.
• Az oldal űrlapon kívüli része WYSIWYG editorral szerkeszthető, így HTML tudás nélkül bárki tudja szerkeszteni az ilyen oldalakat.
• Majdnem teljesen tetszőleges oldal és űrlap elrendezés alakítható ki a több zónás űrlap sablonnal.

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.

Az űrlap sablonban látható szögletes zárójelben szereplő mezőkódok is azonosak ([css-file], [form-javascript], stb.).

Az igazi különbség megértéséhez első lépésként hadd mutassunk meg egy beépített több zónás sablonnal készített űrlapot...

…majd hadd mutassuk meg, hogy milyen lépésekben készült el ez az űrlap.

Az első és második lépés ugyanaz, mint a hagyományos űrlap varázslóban.

Az igazi különbség a harmadik lépés, ahol az űrlap körüli elemeket lehet személyre szabni a szerkeszteni kívánt elemre kattinva megjelenő WYSIWYG editorral.

Íme a varázsló 3. lépése:

Több zónás űrlap sablon létrehozása

A több zónás űrlap sablon működésének lelkét, a varázsló harmadik oldalán látható WYSIWYG szerkesztővel való szerkeszthetőséget a sablon forrásban a megfelelő tag-ek elhelyezésével tudja elérni.

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, az adott sablonon belül egyedinek kell lennie. Kötelező megadni.
• mm_copy: ha a div rendelkezik ezzel az attribútummal, akkor a zóna másolható lesz. Opcionális.
• mm_delete: ha a div rendelkezik ezzel az attribútummal, akkor a zóna törölhető lesz. Opcionális.

Fontos, hogy a zónák jelenleg nem egymásba ágyazhatók.

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-je) kell adni egy mmsortable-x class paramétert, ahol az x rendezési blokkonnként egyedi kell legyen. Tehát ha van egy jobb oldali része az űrlapnak, ahol több zóna vagy legalább egy másolható zóna található, illetve van egy lábléce, ahol több zóna vagy legalább egy másolható zóna található, akkor mindkét esetben a befoglaló div-nek kell adni eg-egy mmsortable-x class attribútumot, az elsőnek pl. mmsortable-1, a másodiknak mmsortable-2.

Annak érdekében, hogy teljesen megértse a fenti szabályokat, javasoljuk, hogy készítsen egy másolatot valamelyik beépített több zónás űrlapot, majd tanulmányozza át annak 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 "kötöttsége" van: Valid HTML kódot kell készítenie, különben előfordulhat, hogy szerkesztéskor a WYSIWYG szerkesztő elrontja a köszönőoldal tartalmát.