Käytit viikkoja verkkosivustosi värien, fonttien ja välien viimeistelyyn. Sitten pudotit sivulle lomakkeen, joka näyttää tulleen aivan toiselta verkkosivustolta. Eri fontti, eri painikkeen väri, eri reunatyyli. Kävijät huomaavat epäsuhdan, vaikka eivät osaisi nimetä, mikä tuntuu oudolta.
Lomakkeen tyylittely on tapa sulkea tuo kuilu. Se kattaa kaiken visuaalisen lomakkeessasi: kenttien koot, nimikkeiden fontit, painikkeiden värit, kulmien pyöristyksen, elementtien väliset etäisyydet ja sen, miten lomake reagoi eri näyttökokoihin. Kun se on kunnossa, lomake tuntuu sivustosi omalta. Kun se on pielessä, täyttöaste kärsii.
Tässä kerrotaan, miten tyylittelet lomakkeita visuaalisilla työkaluilla ja CSS:llä ja mihin kannattaa keskittyä, jotta vaikutus on suurin.
Mitä lomakkeen tyylittely on?
Lomakkeen tyylittely on joukko visuaalisia suunnitteluvalintoja, joita sovelletaan verkkolomakkeen elementteihin. Siihen kuuluvat nimikkeiden ja syöttötekstin typografia, kenttien ja painikkeiden värit, lomakeryhmien väliset etäisyydet, reunatyylit, kohdistustilat ja virheilmoitusten ulkoasu.
Jokaista lomakkeen elementtiä voi tyylitellä: tekstikenttiä, pudotusvalikoita, valintaruutuja, valintanappeja, tiedoston latausalueita ja lähetyspainikkeita. Yhtenäinen tyylittely kaikissa näissä tekee lomakkeesta eheän ja ammattimaisen.
Lomakkeen tyylittely on eri asia kuin lomakkeen rakenne. Voit tehdä hyvin järjestetyn lomakkeen kamalalla tyylittelyllä tai kauniisti tyylitellyn lomakkeen sekavalla kenttäjärjestyksellä. Molemmilla on väliä, mutta tyylittelyä kävijät arvioivat ensimmäisen sekunnin aikana.
Koodittomat lomakkeen tyylittelyvaihtoehdot
Useimmissa lomakerakentajissa on visuaalinen tyylieditori, jolla muokkaat ulkoasua koskematta CSS:ään. Valitset värit, fontit, kulmien pyöristyksen ja painiketyylit asetuspaneelissa. Muutokset näkyvät esikatselussa reaaliajassa.
Aloita sovittamalla lomake verkkosivustosi nykyiseen suunnittelujärjestelmään. Käytä samaa fonttiperhettä, lähetyspainikkeessa pääväriä ja kulmien pyöristystä, joka näkyy sivustosi muissa elementeissä kuten korteissa tai painikkeissa.
WEMASYn lomakerakentajassa on tyylityssäätimet Sivustonrakentajan sisällä, joten lomakkeesi perivät sivustosi suunnitteluasetukset automaattisesti. Säädä sieltä, kun jokin lomake tarvitsee erilaista käsittelyä.
CSS-muokkaus tarkempaan hallintaan
Kun visuaalinen editori ei tarjoa tarpeeksi hallintaa, CSS antaa sinulle täyden vallan jokaiseen visuaaliseen yksityiskohtaan. Oma CSS kohdistuu tiettyihin lomakkeen elementteihin lomakerakentajasi luomien luokkanimien tai tunnisteiden avulla.
Yleisiä CSS-muokkauksia ovat syöttökentän korkeuden ja täytteen muuttaminen, kohdistustilojen tyylittely värillisellä reunan hehkulla, paikkamerkkitekstin värin muokkaus, omien valintaruutujen ja valintanappien ulkoasujen suunnittelu sekä lähetyspainikkeen hover-efektien luominen.
Jos käytät omaa CSS:ää, säilytä varmuuskopio oletustyyleistäsi. CSS-ohitukset voivat rikkoutua, kun lomakerakentajat päivittävät HTML-rakenteensa. Kirjaa ylös, mitä tyylejä muutit ja miksi, jotta tulevat päivitykset eivät yllätä sinua.
Lomakkeen tyylittelyn parhaat käytännöt
Sovita lomake verkkosivustoosi, ei trendiin. Pyöristetyt kentät ja liukuvärilliset painikkeet näyttävät modernilta, mutta vain jos ne sopivat nykyiseen suunnitteluusi. Lakitoimiston verkkosivusto leikkisällä, värikkäällä lomaketyylittelyllä luo töksähtävän kokemuksen.
Tee lähetyspainikkeesta erottuva. Sen pitäisi olla lomakkeen visuaalisesti näkyvin elementti. Käytä brändisi pääväriä, tee siitä mobiilissa täysleveä ja anna sille tarpeeksi täytettä, jotta sitä on helppo napauttaa.
Pidä nimikkeet näkyvissä. Paikkamerkkiteksti ei korvaa nimikkeitä. Tyylitellyt nimikkeet jokaisen kentän yläpuolella parantavat saavutettavuutta ja vähentävät virheitä. Jos käytät leijuvia nimikkeitä, testaa, että ne pysyvät luettavina, kun kenttä on kohdistettu ja täytetty.
Tyylittele virhetilat selvästi. Punaiset reunat, punainen teksti tai kuvake virheellisten kenttien vieressä auttavat kävijöitä korjaamaan virheet nopeasti. Hienovarainen virhetyylittely jää huomaamatta, ja kävijät keskeyttävät lomakkeen turhautuneina.
Testaa mobiilissa. Tietokoneella viimeistellyltä näyttävä lomake voi hajota puhelimella, jos kenttien leveydet, fonttikoot tai painikkeiden sijoittelu eivät ole responsiivisia. Tyylittele mobiili ensisijaisena alustana, ei jälkikäteisenä ajatuksena.
Yleisiä lomakkeen tyylittelyn virheitä
Lomakerakentajan oletustyylien käyttö ilman muokkausta on yleisin virhe. Oletustyylit on suunniteltu yleisiksi, mikä tarkoittaa, että ne harvoin sopivat brändiisi. Käytä kymmenen minuuttia tyyliasetuksissa, niin lomake näyttää heti ammattimaisemmalta.
Myös liiallinen tyylittely haittaa. Liialliset varjot, animaatiot ja koristeelliset elementit häiritsevät lomakkeen tarkoitusta. Kävijät ovat täällä lähettämässä tietoja, eivät ihailemassa suunnittelun koukeroita. Siisti ja selkeä voittaa fiksun ja sotkuisen.
Kohdistustilojen huomiotta jättäminen aiheuttaa saavutettavuusongelmia. Näppäimistöllä liikkuvat kävijät tarvitsevat näkyvät kohdistusilmaisimet jokaiseen kenttään. Poista selaimen oletusreunus vain, jos korvaat sen omalla kohdistustyylillä.
Lomakkeen tyylittely on nopein tapa parantaa sitä, miten kävijät kokevat lomakkeesi. Sovita brändiisi, korosta lähetyspainike ja testaa kaikilla näyttökooilla. Visuaalinen viimeistely viestii, että yrityksesi kiinnittää huomiota yksityiskohtiin.
Usein kysyttyä
Pitääkö minun osata CSS:ää lomakkeiden tyylittelyyn?
Ei. Nykyaikaisissa lomakerakentajissa on visuaaliset tyylieditorit, jotka hoitavat värit, fontit, välit ja painikkeiden ulkoasun ilman koodia. CSS on käytettävissä, kun tarvitset pikselitarkkaa hallintaa, mutta useimmat yritykset saavuttavat ammattimaisen tuloksen pelkillä visuaalisilla asetuksilla.
Rikkooko oma CSS lomakkeeni toimintaa?
CSS muuttaa vain ulkoasua eikä vaikuta siihen, miten lomake kerää tai lähettää tietoja. Riski on visuaalinen: liian rajut CSS-muutokset voivat piilottaa kenttiä, rikkoa asetteluja mobiilissa tai tehdä virheilmoituksista näkymättömiä. Testaa jokaisen CSS-muutoksen jälkeen useilla näyttökooilla.
Miten sovitan lomakkeeni verkkosivustoni brändiin?
Ota brändisi värit, fonttiperhe ja kulmien pyöristys verkkosivustosi nykyisistä tyyleistä. Käytä niitä lomakekenttiin, nimikkeisiin ja lähetyspainikkeeseen. WEMASYn Sivustonrakentaja soveltaa koko sivuston suunnitteluasetukset lomakkeisiin automaattisesti, mikä antaa yhtenäisen lähtökohdan.
Pitäisikö lomakekentillä olla reunat vai reunaton ulkoasu?
Molemmat toimivat, kun ne toteutetaan johdonmukaisesti. Reunalliset kentät ovat turvallisempi oletus, koska ne määrittävät selvästi, minne kirjoitetaan. Reunattomat kentät pelkällä alaviivalla näyttävät modernilta, mutta voivat hämmentää kävijöitä siitä, missä syöttöalueet alkavat. Valitse yksi tyyli ja käytä sitä jokaiseen kenttään.
Miten lomakkeen tyylittely vaikuttaa konversioprosentteihin?
Ammattimaisen näköinen lomake rakentaa luottamusta ja kannustaa täyttämään sen. Epäsopiva tai vanhentuneen näköinen lomakesuunnittelu herättää epäilyn siitä, onko lähetys turvallinen tai vastaako kukaan. Tyylittely yksin ei korjaa huonoa lomakerakennetta, mutta huono tyylittely voi heikentää hyvin tehtyä lomaketta.
Voinko käyttää eri tyylejä eri lomakkeille samalla sivustolla?
Voit, mutta pidä keskeiset elementit yhdenmukaisina. Sama fontti, painikkeen väri ja kenttätyyli pitäisi näkyä kaikissa lomakkeissa. Voit säätää lähetyspainikkeen tekstiä tai lomakkeen leveyttä tiettyihin käyttötarkoituksiin, mutta visuaalisen kielen pitäisi tuntua yhdeltä brändiltä.