SApi űrlap formázás

Indulásként nézzünk egy egyszerű példát, a legáltalánosabb feladatot. Szeretnénk hogy beillesztett SalesAutopilot űrlapunk jól mutasson az oldalban, illeszkedjen a design-ba, és szeretnénk szűrni hogy mi jelenjen meg. Pl. ha egy termékünk van, akkor nincs sok szükségünk az összesítésre, és most eltüntetjük a megjelenő szálítási költséget is, mert az jelenleg nulla. Nézzük hogy mutat az oldalunkon az alap űrlap amit a rendszer generált nekünk:

Porszívó rendelés űrlap

Rendelje meg ma, és porszívózzon holnap!

HEPA porszívó (HG-001)

63 500 Ft
Legalább egy terméket rendelnie kell!
Szállítási és fizetési mód
Adja meg a szállítási módot!
Szállítási költség:
0 Ft
Bruttó végösszeg:
0 Ft

Személyes adatok

Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!

Postázási cím

Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!

Ha ízléses weboldalt készítünk, akkor nem feldobni akarjuk az űrlapot, hanem a design-hoz igazítani, hogy ne úgy nézzen ki mintha egy másik bolygóról pottyant volna ide. Mutasson úgy mint ami az oldalunk része, biztonságot sugalljon hogy ez egy rendelési űrlap ami a mi weboldalunkhoz tartozik. Mit fogunk rajta átalakítani?
-szürke hátteret meghagyom, de teszek rá egy kék keretet,
-ne használjon külön betűtipust,
-nem kell szállítási költség, és bruttó végösszeg,
-bankkártya logo a fizetési opciók mellé kerüljön,
-“Személyes adatok” és “Postázási cím” kiemelése, megjelenítés tagolóként,
-cím, megrendelem gomb is legyen csinosabb
-kék színnek használjuk azt ami eddig is szerepelt az oldalon, amit a sablon a címsorokhoz használ

Porszívó rendelés űrlap

Rendelje meg ma, és porszívózzon holnap!

HEPA porszívó (HG-001)

63 500 Ft
Legalább egy terméket rendelnie kell!
Szállítási és fizetési mód
Adja meg a szállítási módot!

Személyes adatok

Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!

Postázási cím

Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!
Kérjük, ezt a mezőt is legyen szíves kitölteni!

Megfigyelhetjük hogy az űrlapok ezen az oldalon nem függetlenek egymástól, pl a megrendelem gombra kattintva mindkettőnél megjelennek a hibaüzenetek. Természetesen meg tudjuk ldani hogy egy űrlap többször is beilleszthető legyen egy oldalra, és függetlenül működjenek, de ez nem célja ennek a leírásnak.

Egyszrű dolgokkal ilyen látványos változást érhetünk el, itt még nem nyúltunk a működéslogikához, a kinézethez is minimálisan. A következő oldalon láthatunk egy komolyabb átalakítást.