Kvíz űrlap képekkel SalesAutopilottal

A SalesAutopilot Cégautomatizálás Facebook csoportban merült fel a kérdés, hogy lehet-e a rendszer űrlapjain képeket használni a feliratkozási folyamat részeként.

A kérdés jogos, és nagyon hasznosnak is találom, hiszen ha az űrlapodat kvízként, tesztként használod, sokkal jobb fogadtatásban részesül, ha a válaszlehetőségek nem szöveg, hanem kép formájában jelennek meg. Ugyanez a helyzet akkor, ha választható ajándékkal kedveskedsz ügyfeleidnek, vagy a terméked többféle kivitelben érhető el, melyek közül a vásárlónak egy űrlapon kell választania.

Természetesen ez megoldható, hiszen a SAPIban mindent – is – lehet 😉

Mondom a lépéseket!

1.) Hozd létre a választási lehetőségeket egy rádiógomb opcióiként

Ez egy egyszerű rádiógomb típusú mező lesz, a szokásos módon add meg a választási lehetőségeket, és helyezd el a mezőt az űrlapon.

2.) Helyezd el ideiglenesen a képeket az űrlapszövege részben

Ehhez kattints a kép ikonra, a felugró ablakban töltsd fel a képet, ha eddig nem tetted, válaszd ki, add meg a kívánt méretet, és kattints  a „Rendben” gombra.
Miután az összes képet elhelyezted egymás alá, a válts html nézetbe, és a képekhez tartozó html kódot másold a megfelelő opciók címkéjébe,

Ellenőrizd az eredményt az előnézetben!

3.) Csinosítsd az űrlapodat!

Ha a fenti lépésekkel végeztél, akkor már képek jelennek meg az opciók helyén, tehát a feladatot teljesítettük. Sajnos ennél többet nem mondhatunk el, vagyis az eredmény ezen a ponton a legtöbb esetben még nem egy kifejezett eye-candy.

Az alábbi videóban bemutatom, én hogyan érem el, hogy csak a kattintható képek látszódjanak, mégis egyértelmű legyen, melyik van kiválasztva, hogy érem el, hogy ne tapadjanak egymáshoz a képek, szóval hogyan rázom gatyába az űrlapot.

Természetesen ez csak egy teszt űrlap, az alapvető beépített formázásokon nem változtattam, tehát semmilyen szinten nem illesztettem arculathoz az űrlapot. Amennyiben erre is szeretnél egy példát látni, kukkants bele ebbe a bejegyzésbe.

A videóban látható kód az alábbi

<style>
.horizontal-radio-element-container {
	padding: 10px;
}
.selected {
	border: 2px silver;
}
.horizontal-radio-element-container div:nth-child(2) {
	display: none !important;
}
.titlepart, .datafields {
	text-align: center;
}
</style>
<script>
mmjQuery(document).ready( function() {
	mmjQuery('input[name="keszulek:szine"]').change( function() {
		mmjQuery('input[name="keszulek:szine"]').closest('.horizontal-radio-element-container').removeClass('selected');
		mmjQuery('input[name="keszulek:szine"]:checked').closest('.horizontal-radio-element-container').addClass('selected');
	})
});
</script>