A következő tanfolyam indul

2017. október 19.
kiemelt_kep

Megrendelő űrlap és egyéb form tuning CSS- ben

Alapvetően elmondható, hogy a sima HTML kódokat CSS-el fogjuk formázni, mégpedig úgy, hogy új CSS-kiválasztókat adunk meg, és azoknak a style.css-ben stílusdefiníciókat írunk. Vagyis ID-kiválasztókat készítünk a form részeiről.
Az alábbi formot használhatjátok kiindulónak, illetve a hozzá tartozó css-t is felhasználhatjátok. Én általában a css-t egy az egyben bemásolom a style.css-be, és azután formázom meg vele az űrlapot, mindig az adott  esetnek megfelelően. A formot pedig egy kódszerkesztőben, pl. PSpadban szerkesztem át.
Első lépésként itt van az eredeti HTML kód, amit a mi esetünkben a Webgalamb generált:

Ezt kell átírni a következő módon:

A lényeg, hogy mint látjátok külön megadunk egy “cimke” id-t  (ez a sorok megnevezése), lesz “beviteli” id, (ezek a boxok, és jelölök, amikbe beírunk és amiket pipálunk) és ezen belül van a “mezo” id, amik a téglalap mezőket jelölik. Van még “gombtarto” és “gomb” id, amivel a (mi esetünkben ) a megrendelés gombot formázzuk meg.

Az input type=”radio” a választó mezőket jelöli (csak egy választás van, a mi esetünkben a körök)

A select-ek a lenyíló füles mezők, ahol lehet választani.

Az input type=”checkbox” pedig az a választási lehetőség, ahol több lehetőség is kipipálható.

A textarea pedig a tetszőleges szövegbeviteli mező, ez amúgy ugyanúgy “mezo” id-vel is el van látva, tehát azokkal a téglalap szövegbeviteli mezőkkel együtt formázható, mint például a név, cím megadása.


átírt-form

 

És itt a CSS, amit pedig a style.css-be kell bemásolni például legalulra:

css-leírás

Itt tudjuk formázni, mindig az adott űrlapnak megfelelően a sorközöket, betűméreteket, paddingeket…stb. Illetve itt tudjuk belinkelni a backgroundot. Én a hátteret Photosopban készítem el, általában úgy, hogy a nagyjából formázott formról képernyőfotót készítek, azt megnyitom a Photoshopban, és akkor annak segítségével meg lehet csinálni a hátteret. Az ilyen hátterek, mint a példánkban is szerepel elég sokszor kell módosítani, illetve a css-est állítva felváltva formázni, mire jók lesznek az arányok, de a végeredmény megéri, mert igazán egyedi űrlap születik így 😀

Íme:

végeredmény

Egy fontos pont még: én mindig készítek egy PSpad mentést az eredeti formról, illetve az átírt formról is, illetve a weboldalon egy megrendelés teszt oldalon próbálom ki. Ha működik, és minden rendben, akkor másolom be eredeti helyére. A teszt oldalt is meghagyom vésztartaléknak. Hogy erre miért van szükség? Mert sajnos a WordPress hajlamos “rosszul feldarabolni” a kódot, ezért nagyon fontos, hogy mindig HTML nézetben nyissuk meg ezeket az oldalakat szerkesztésre a wp-adminban, mert ha normál nézetben nyitjuk meg, elcsúszhat az egész. Ezért van nekem mindíg egy tartalék oldalam, ahonnan, ha ne adj ég ilyen történik egy mozdulattal átmásolom a jól tagolt kódot és a probléma meg is van oldva :)

A képernyőfotókon látható form kódok letölthetők txt- ben és onnan kimásolva Te is tudod alkalmazni. Letöltés innen: Letöltés: form_css

 

Hozzászólások

  • Attila

    Nagyon hasznos leírás, köszönöm! Gondoltam gyakorlásként használom az általad is használt kódokat, de nem másolhatók a kép formátum miatt. :/

    • Cziráki Barbara

      Kedves Attila!
      Köszönöm az észrevételt, hamarosan fel fogom tenni letölthető txt fájlban a kódokat, hogy ki tudd másolni őket.
      Köszönettel és üdvözlettel,
      Cziráki Barbara