Du har brugt uger på at få farver, skrifttyper og afstande på din hjemmeside helt rigtige. Så sætter du en formular ind, der ser ud, som om den kommer fra en helt anden hjemmeside. Anden skrifttype, anden farve på knappen, anden kant. Besøgende lægger mærke til forskellen, selv om de ikke kan sige, hvad der er galt.
Design af formularen er sådan, du lukker det hul. Det dækker alt det visuelle i formularen: størrelsen på felter, skrifttype i labels, farver på knapper, afrundede hjørner, afstand mellem elementerne og hvordan formularen tilpasser sig forskellige skærmstørrelser. Er det rigtigt, føles formularen som en del af din side. Er det forkert, falder andelen, der udfylder den.
Her får du at vide, hvordan du designer formularer med visuelle værktøjer og CSS, og hvad du skal prioritere for at få mest ud af det.
Hvad er formulardesign?
Formulardesign er de visuelle valg, du tager for en webformulars elementer. Det omfatter skrifttyper i labels og tekst i felter, farver på felter og knapper, afstand mellem grupper, kanter, hvordan et felt ser ud, når det er valgt, og hvordan fejlbeskeder ser ud.
Alle formularelementer kan designes: tekstfelter, rullemenuer, afkrydsningsfelter, valgknapper, felter til upload af filer og indsend-knapper. Et ensartet design på alle elementer får formularen til at fremstå samlet og professionel.
Design af formularen er noget andet end formularens opbygning. Du kan have en velordnet formular med elendigt design, eller en flot formular med forvirrende rækkefølge af felter. Begge dele tæller, men designet er det, de besøgende bedømmer på det første sekund.
Design af formularer uden kode
De fleste formularbyggere har en visuel designeditor, hvor du kan tilpasse udseendet uden at røre CSS. Du vælger farver, skrifttyper, afrunding og knapstil i et indstillingspanel. Ændringerne kan ses med det samme.
Start med at få formularen til at passe til dit websteds eksisterende design. Brug samme skrifttype, hovedfarven til indsend-knappen og samme afrunding, som du bruger på andre elementer som kort eller knapper på din side.
WEMASYs formularbygger har designindstillinger i hjemmesidebyggeren, så dine formularer automatisk følger din hjemmesides designindstillinger. Justér derfra, når en bestemt formular skal se anderledes ud.
Tilpasning med CSS til avanceret kontrol
Når den visuelle editor ikke giver nok kontrol, giver CSS dig fuld magt over hver eneste visuelle detalje. Din egen CSS rammer bestemte formularelementer med de klassenavne eller id'er, som din formularbygger laver.
Almindelige tilpasninger med CSS er at ændre højde og padding på inputfelter, give valgte felter en farvet kant, ændre farven på pladsholdertekst, designe egne afkrydsningsfelter og valgknapper og lave effekter, når man holder musen over indsend-knappen.
Bruger du din egen CSS, så gem en sikkerhedskopi af dine standardstile. CSS-ændringer kan gå i stykker, når formularbyggere opdaterer deres HTML-opbygning. Skriv ned, hvilke stile du har ændret, og hvorfor, så fremtidige opdateringer ikke overrasker dig.
God praksis for formulardesign
Tilpas formularen til din hjemmeside, ikke til en trend. Afrundede felter og knapper med farveovergang ser moderne ud, men kun hvis de passer til dit eksisterende design. Et advokatfirma med legende, farverige formularer giver en brat oplevelse.
Få indsend-knappen til at stikke ud. Den skal være det mest synlige element i formularen. Brug din primære brandfarve, gør den i fuld bredde på mobil, og giv den nok padding til, at den er let at trykke på.
Lad labels være synlige. Pladsholdertekst er ikke en erstatning for labels. Labels over hvert felt gør formularen mere tilgængelig og giver færre fejl. Bruger du flydende labels, så test, at de stadig kan læses, når feltet er valgt og udfyldt.
Gør fejl tydelige. Røde kanter, rød tekst eller et ikon ved ugyldige felter hjælper de besøgende med hurtigt at rette fejl. Svage fejlmarkeringer bliver overset, og så dropper de besøgende formularen i frustration.
Test på mobil. En formular, der ser flot ud på computer, kan gå i stykker på en telefon, hvis bredden på felter, skriftstørrelser eller placeringen af knapper ikke er responsive. Design med mobilen som det primære lærred, ikke som en eftertanke.
Almindelige fejl i formulardesign
Den mest almindelige fejl er at bruge formularbyggerens standarddesign uden at tilpasse noget. Standardstile er lavet til at være generiske, og derfor passer de sjældent til dit brand. Brug ti minutter i designindstillingerne, og formularen ser straks mere professionel ud.
For meget design skader også. For mange skygger, animationer og pynt tager fokus fra formularens formål. De besøgende er her for at sende oplysninger, ikke for at beundre krusseduller. Rent og tydeligt slår smart og rodet.
Hvis du ignorerer markeringen af det valgte felt, skaber du problemer med tilgængelighed. Besøgende, der bruger tastatur, har brug for en synlig markering af hvert felt. Fjern kun browserens standardramme, hvis du erstatter den med en egen markering.
Formulardesign er den hurtigste måde at forbedre, hvordan de besøgende ser dine formularer. Få dem til at passe til dit brand, fremhæv indsend-knappen, og test på alle skærmstørrelser. Det flotte udtryk viser, at din virksomhed holder øje med detaljerne.
Ofte stillede spørgsmål
Skal jeg kunne CSS for at designe formularer?
Nej. Moderne formularbyggere har visuelle designeditorer, der klarer farver, skrifttyper, afstande og knapper uden kode. CSS kan bruges, når du har brug for kontrol ned til den enkelte pixel, men de fleste virksomheder får et professionelt resultat alene med de visuelle indstillinger.
Går formularen i stykker, hvis jeg bruger min egen CSS?
CSS ændrer kun udseendet og påvirker ikke, hvordan formularen samler eller sender data. Risikoen er visuel: for hård CSS kan skjule felter, ødelægge layoutet på mobil eller gøre fejlbeskeder usynlige. Test efter hver ændring af CSS på flere skærmstørrelser.
Hvordan får jeg formularen til at passe til min hjemmesides brand?
Tag dine brandfarver, skrifttype og afrunding fra din hjemmesides eksisterende stile. Brug dem på felter, labels og indsend-knappen. WEMASYs hjemmesidebygger bruger designindstillingerne for hele din hjemmeside på formularer automatisk, så du har et ensartet udgangspunkt.
Skal formularfelter have kanter, eller skal de være uden?
Begge dele virker, hvis det gøres ensartet. Felter med kant er det sikreste valg, fordi de tydeligt viser, hvor man skal skrive. Felter uden kant og kun med en linje i bunden ser moderne ud, men kan forvirre de besøgende om, hvor feltet starter. Vælg én stil, og brug den i alle felter.
Hvordan påvirker formulardesign konverteringen?
En formular, der ser professionel ud, skaber tillid og får flere til at gøre den færdig. En formular med et design, der ikke passer, eller som ser gammeldags ud, skaber tvivl om, om indsendelsen er sikker, og om nogen svarer. Design alene kan ikke rette en dårlig opbygning, men dårligt design kan ødelægge en velbygget formular.
Kan jeg bruge forskellige designs til forskellige formularer på samme hjemmeside?
Du kan, men hold de vigtigste elementer ens. Samme skrifttype, farve på knapper og stil på felter bør gå igen i alle formularer. Du kan justere teksten på indsend-knappen eller formularens bredde til bestemte formål, men det visuelle sprog skal føles som ét brand.