Ebben a videóban megmutatom, hogyan hozhatod létre a kvíz funnel első kérdés oldalát. Mutatom, hogyan készítsd el a kvíz űrlapot tartó landinget, hogy milyen sajátosságai vannak egy kvíz feliratkozó listának egy alap listához képest, de azt is itt mutatom meg, hogy milyen mezőkre lesz szükséged az űrlapon.
Olyan technikai részletekbe megyünk bele, amikkel biztosan órákat spórolsz meg az építés során.
A videó tartalma
A videó tartalmának összefoglalása
[0:00] Ebben a videóban a kvíz funnel első kérdés oldalának a létrehozásáról fogunk beszélni, úgyhogy vágjunk is bele. Sok apró tippet és trükköt fogsz hallani, érdemes figyelni, érdemes akár kétszer nézni, igyekszem nem kapkodni, de azért a figyelmedre szükséged lesz. Itt vagyunk ebben a kvíz funnel nevű projektmappában, ebben van egy lista. Megmutatom, hogy miket hoztam már létre. Ez az űrlap maga. Ez egy több lépéses űrlap. Itt a második adag kérdés. Itt vannak a szűrő kérdések, és itt az űrlap köszönő oldala. Ja, nem, nincs itt, mert az más van beállítva a köszönő oldalnak. Ezekre még vissza fogunk térni, amit szerettem volna, hogy lásd, hogy ez maga az űrlap, ezzel fogunk dolgozni. De ahhoz, hogy ez kulturáltan jelenjen meg, rossz fele mentem, ahhoz ezt így kéne kinézni, és ha megláttad, az űrlap az kb. innentől idáig tart, tehát ami körülötte látható, az valójában egy landing page. Ez az, amit úgy neveztem el, hogy kvíz űrlaptartó landing page. Így néz ki végeredményben. És akkor mutatom, hogy ezt hogyan hoztam létre.
A kvíz lista, mezőcsoportok és mezők létrehozása
[1:28] Én először a kvíz listát hoztam létre, és utána a kvíz űrlapot. Úgyhogy beszéljünk először a kvíz listáról egy picit. A kvíz listát azt úgy hoztam létre, hogy mint bármilyen másik listát, mondom a specialitásokat ahhoz képest, hogy létrehozol egy egyszerű listát. Természetesen hozzáadtam a kérdéseket, a kérdések azok rádiógomb típusú kérdések, és itt vannak a kalkuláció típusú kalkulációmezők, személyes adatok. Elképzelhető, hogy nálad másképp néz ki. Eredetileg itt a kékben volt egy lenyíló, oké, mutatom másképp.
[2:32] Ha csinálnánk egy új listát, akkor nem akkor azt így, tehát oké, ajánlatkérés típusú lista kell, hogy legyen, hogy az e-mail címet ne kelljen az elején bekérnünk. Tehát, ha csinálnánk egy új listát, az így nézne ki. Valamiért nem megy tovább. Túl gyorsan kattintottam vissza a listaszerkesztéshez, tehát így néz ki. Itt nem tudok mezőcsoportokat létrehozni, de ha ide rákattintasz, ez egy ilyen huncut, elrejtett dolog, mezők haladó beállítása, akkor itt már lehet mezőcsoportokat létrehozni. Ezt az egy dolgot akartam megmutatni, és itt vissza is lehet váltani mindaddig, amíg nem hozol létre mezőcsoportokat, de amint már vannak mezőcsoportok, már nem tudsz visszaváltani a nem haladó opcióra. Jó, én ezt most el se mentem, nekem ez nem kell, csak azt akartam megmutatni neked, hogy én mezőcsoportokat is létrehoztam, ez azért lesz klassz, mert mind a feliratkozóknál, mind a listázásnál ezek áttekinthetőbbé teszik az adatokat.
[3:31] Nyilván a lista létrehozásánál már kitaláltam, hogy milyen személyes adatok kellenek, hozzáadtam ezt az adatkezelési hozzájáruló jelölőnégyzetet. Ez nem egy sima jelölőnégyzet, hanem ez egy hozzájárulás kérő, tehát ha új mezőt hoznék létre, akkor az egy hozzájárulás kérő mező lenne, de nem hozok most újabbat létre, csak meg akartam neked mutatni. Ez azért hasznos, mert ez egy icipicit másképp működik, GDPR funkciók vannak ráaggatva, nyugodtan utána tudsz nézni a tudásbázisban, csak fel akartam ráhívni a figyelmed.
[4:13] A következő, ugye itt vannak a kérdések, és már most a kalkulációt lehetővé tevő mezőket létrehoztam, ezek mind számbeviteli mezők, ezt is az új mezőnél ezt a típust kell kiválasztanod, és csináltam részeredményt az első három kérdésre, második háromra, összeredményre, és csináltam százalékot az első három kérdésre, második háromra és összesenre. Tehát ezeket a mezőket hoztam létre, ez a kvíz lista. És a kvíz listához hoztam létre ezt a több lépéses űrlapot.
Több lépéses űrlap létrehozása
[4:55] Több lépéses űrlapot úgy hozol létre, hogy először létrehozod az első lépését, mint bármilyen hétköznapi űrlapnak, majd itt az új űrlap lépés hozzáadása a folyamathoz gombra kattintasz, és ezzel létrejön a második lépés, aztán a harmadik, negyedik, ötödik, hatodik, satöbbi. És aztán ezeknek akár a sorrendjét is meg tudod változtatni, ha összekutyultad véletlenül. Megint csak nem hozok létre a nulláról egyet. Űrlapot tudsz létrehozni, tehát az első lépést létrehozod, nem rakod rá az e-mail cím mezőt, személyes, stb. csak a kérdés mezőket, vagy akár csak az első kérdés mezőt, és utána jössz majd ide, hogy új űrlap lépés hozzáadása a folyamathoz. Ezt megcsináltam, és így jöttek létre ezek a lépések. Jó?
Az űrlap tartó landing létrehozása
[5:49] Tehát ez az alap, hogy megvan az űrlap, először én az űrlapot hoztam létre, és utána a landing page-et új landing page létrehozásnál a SalesAutopilot sablonok közül én ezt az opciót választottam, és ebből dobáltam ki különböző részeket. Megint most csinálok egy demó lépést. Úgy állítottam be, hogy nekem már itt be van állítva egy aldomain, ez azért fontos, hogy ne ezen a rusnya aldomainen legyen, de ha te most rögtön nem tudod beállítani, semmi gond. Ezen elkezdheted a kísérletezést, de szerintem élesre állítás előtt majd azért állítsatok be egy aldomaint és rakd arra, valamint általam megadott URL-t raktam, ez demó mondjuk 240201, csak hogy biztos ne legyen még ilyen.
[6:48] Oké, és amit csináltam, ugye ez a landing page, ez egy nagyon széles landing page, tehát egy kicsit nehéz vele dolgozni, menüt becsukom, még így is nehéz vele dolgozni. Nyilván én normál esetben csak áthúzom a nagy monitoromra, a 27 inch-es monitorra, de ahogy ezt ki tudod küszöbölni, egyrészt itt ezt be tudod csukni, és akkor így is tudsz dolgozni, és így ki tudod törölni azokat a sorokat, amik nem szükségesek. Például ezt a sort, ezt a sort, bármelyiket, hogy eljuss oda, hogy tényleg csak alja teteje legyen meg, de azt is tudod csinálni, hogy ideiglenesen átállítod a szélességét keskenységre, és akkor megint csak egy kicsit jobb.
[7:41] Itt eredetileg a videót mi HTML-el ágyaztuk be, mert az univerzálisabb, mert bármilyen videónál működhet, viszont ha Youtube-ot vagy videót használsz, akkor a tartalmi elemek között nem szükséges a HTML-t, használhatod a videót. Én kidobtam ezt az eredeti HTML-t, és behúztam így a Youtube videót, mert így csak az URL-jét kell megadni, míg ebben az esetben. Na várjunk, ez hogy mitől fog megjelenni. Na igen, ez a másik baj ezzel, hogy ugye egy HTML blokk az úgy működik, hogy rákattintok, és akkor itt jobb oldalt megjelenik, de ezt lehet, hogy ki kell dobni a csudába úgy ahogy van. Oké, erre kell kattintani. Na jó, mire erre rájössz. És akkor itt tudod a kódot átírni. Szerintem dobd ki, és rakj bele egy videó elemet. Ha majd már ott tartasz a Sales page-nél, de most még nem tartunk ott, most még az elején tartunk, jó? Most én nem fogom itt az összes elemet kidobni, hanem megmutatom magát az én saját landing-emet. Jaj, bocsánat, az űrlapra mentem.
[9:24] Kvíz-űrlaptartó, ezt akarom mutatni. Itt van ez a klikkeljide.salesautopilot.hu aldomain tartozik ehhez a fiókhoz, kvíz tartó landing, és így néz ki. Akár itt is vehetném kicsit keskenyebbre, de most nem fogom. Inkább mutatom, hogy odáig csupaszítottam azt a Zsoltos sales page-et, hogy megmaradt a teteje, megmaradt az alja, és utána még egy nagyon egyszerű dolgot csináltam, ezt itt új ablakban megnyitottam az űrlapot. Kiválasztottam a szerintem nem is tudom, hogy csináltam, talán így előnézettel. Ide kattintottam, bocsánat, ez egy haladó dolog, inspekt, és akkor, ha jó helyre kattintottam, mutatom a másik monitoromon. Itt a kód jelenik meg, bocsánat. Ha jó helyre kattintottam, akkor itt megjelenik a színkódja az űrlap háttérszínének, mert arra lesz szükségünk, hogy az űrlap háttérszíne, meg ez a szín, ez ugyanaz legyen. És ugye ez itt sorokból áll, ezt becsukom, ezt kinyitom. Egyik sor, másik sor, harmadik sor, és a sor háttérszínének mindenhova beadtam ezt a színkódot, és ez itt fönt egy olyan tartalomelemet tartalmaz, ami egy elválasztó, ez itt van, ez egy elválasztó, tízes magassággal és egy kis külső margóval, és ebben a sorban is egy elválasztó van. Ez ugye úgy néz ki, hogy ha nincs, akkor egyszerűen fogod és behúzod, és utána átállítod átlátszóra, és beállítod a magasságát. Ennyi.
Az űrlap beillesztése az űrlap tartó landingbe
[11:42] És aztán ez az utolsó, ez a tartalomelem, ez egy bekezdés, de amúgy HTML-t is használhatsz, tök mindegy melyiket használod. És ide raktam be az űrlapnak a kódját, azt meg honnan? Itt a kvíz űrlapom, itt az űrlap, kód, és ez az. Ez a Ctrl C és Ctrl W ide. És ez fogja megjeleníteni az űrlapot nekünk. Jó? Tehát ebben az a fontos, hogy nem ezt a kódot jeleníted meg, meg nem sorolom fel az összes verziót, amit nem, hanem ez az űrlap iframe behelyettesítő kód, ebben a behelyettesítő kód a lényeg. Úgyhogy ezt raktam be, és gyakorlatilag ezzel készen is vagyunk, mert ha ezt elmentem, akkor ha itt előnézetet használsz, akkor ezt a verziót látod, ez az előnézet, ahogy te látod, a tényleges tartalma, ha viszont akár ezt, akár ezt a publikus verziót nézed, akkor ott már az űrlapos verzió jelenik meg. És amivel lehet, hogy picit kísérletezni kell, hogy itt mekkora lesz a hely, itt mekkora lesz, meg hogy ez tényleg középen legyen, és kitöltse a rendelkezésre álló részt. Ezt is megmutatom, hogy ennek érdekében mit csináltam.
[13:20] Azért szeretnénk, ha normálisan nézne ki. Egyrészt itt ebben a tartalomban ezt középre igazítottam, az elválasztókat már elmagyaráztam neked az előbb, de van még egy fontos dolog, amit megtettem, ez pedig a kvíznél, a kvíz űrlapnál, a mezők szerkesztésénél, azt megcsináltam. Egyrészt ezt a szöveget is középre igazítottam, hol láthatjuk? Én úgy érzem, hogy ez itt jobban néz ki, de akár lehetne balra is. De a másik, ami ennél sokkal fontosabb, hogy itt tudod kiválasztani az űrlap dizájnokat. Én kiválasztottam a legelsőt, tehát nem akartam itt vacakolni, akartam mutatni, hogy egyszer, és az űrlapszélességre nagyon fontos, hogy az eredeti verzió az valahány pixel, és ezt fontos átállítani 100 százalékra. Az azt jelenti, hogy kitölti a rendelkezésre álló helyet. És ennek lesz az az eredménye, hogy az előnézetben is kitölti, de itt is kitölti a rendelkezésre álló helyet, de ebben az esetben a rendelkezésre álló hely az ez a hely, ez így, aminek ez meg van definiálva. És ugye ez a sor, nézzük, ez egy oszlopos struktúra, és fölötte van harminc hely, balra, jobbra, semmi. És ez a tartalom az, aminél jobbra-balra van tíz-tíz hely. Tehát ez így néz ki. Ha a sor maga több többhasábos lenne, akkor azzal is lehet még egy kicsit az űrlap szélességét befolyásolni, mert akkor ezt a helyet tölti ki száz százalékosan, de ezt én most nem szeretném, mert ez így nekem megfelelő volt. Jó? Tehát, hogy ezt a helyet fogja 100 százalékosan kitölteni.
[15:40] Amit még fontos megcsinálni, hogy ha már itt vagyunk, de egy másik videóban is lesz erről szó, hogy az űrlaplépésnél beállítjuk, hogy ugyanabban az ablakban jelenjen meg a köszönőoldal, vagy a következő űrlap lépés, ugyanabban az ablakban, iframe esetén azon belül. Mit értünk ez alatt? Ez itt egy iframes megoldással van beszúrva, és ez azt jelenti, hogy a következő lépés az ugyanebbe a belső keretbe, az iframe az egy ilyen belső keret. Ebben fog megjelenni, ha itt figyeled a landingnek az URL-jét, ez nem változik meg. Tehát így gyakorlatilag a landing, a kvíztartó landing az ugyanaz marad, és ha mind az 1, 2, 3, 4, 123 lépésed, jó 123-at nem javaslok, az ugyanebben fog megjelenni, és az első pont, ahol kilépünk ebből, az a kiértékelés landing lesz. Tehát a kiértékelés landing, azt már az előző lépésnél úgy fogjuk beállítani, hogy így. Tehát a kiértékelés landing előtti oldal, ami a személyes adatbekérés, azt ezzel fogjuk beállítani, de itt még így állítjuk be, hogy végig ebben a kvíztartó landingben maradjunk. Jó, ezek ilyen nagyon technikai részletkérdések, de pont ezeken lehet órákat szöszmötölni, ha az ember nem tudja, hogy hogy kell csinálni, és ezt szerettem volna neked mindenképpen megspórolni. Úgyhogy köszönöm a figyelmedet és folytatjuk a következő videóban.
Kapcsolódó bejegyzések:
- Kvíz funnel építés - a kvíz építési folyamat felépítése és áttekintése
- Kvíz funnel építés - 2. lépés - A kvíz kérdések elkészítése
- Kvíz funnel építés - 3. lépés - A szűrőkérdések elkészítése
- Kvíz funnel építés - 4. lépés - Kiértékelés műveletekkel és a kiértékelés megjelenítése
- Hogyan tudok új mezőt hozzáadni az e-mail listához?
- Mezők csoportosítása, áttekinthetővé tétele
- Több lépéses űrlap készítése
- Saját domain-es köszönőoldal beállítása
- Űrlap köszönőoldala iframe-n belül nyíljon
Hozzászólások
0 hozzászólás
A cikkhez nem írhatók újabb hozzászólások.