Sådan pifter du en drønkedelig WordPress-formular op

Hvordan får du din standard WordPress-formular til at ligne guld?
I denne blog viser Funnel Firsts Digitale Designer, Kasper Toft Kristensen, hvordan man med forholdsvis simple greb kan pifte sin formular op og undgå et template-look på sit website.

WordPress og Elementor er en gæv duo, når det kommer til at bygge websites, landing pages og sign-up sider uden brug af kodning. Der findes et hav af templates og blocks, som er designet på forhånd, og der er samtidig rig mulighed for at slå sig løs med den helt store designer-pensel og bygge det hele fra bunden.

Af Kasper Toft Kristensen

Digital Designer
Web Designer
Illustrator

Læsetid

3 minutter

I webdesign-verdenen findes udtrykket: “wordpressy”, som ofte bliver brugt til at beskrive hjemmesider med et decideret template-agtigt look. Disse sider er ofte resultatet af en designer, som har trukket en widget ud på lærredet og tænkt, at den er super fin, som den er. Elementors standard formular ser sådan her ud (jeg vil vædde på, at den ser bekendt ud):

Den er jo egentlig ikke forfærdelig. Brugbar, enkel – men ret uinspirerende.

En formular kan sjældent stå alene, da man er nødt til at fortælle folk, hvad de skriver sig op til, hvilket for eksempel kunne være et godt tilbud fra træningsstudiet InnerGym. Lad os endnu engang antage, at vi vil bygge den mest “wordpressy” sign-up side, vi overhovedet kan; så vi hiver nogle heading og tekstfelter ud på lærredet og går på weekend.

Skriv dig op til en 360° startpakke her

Begrænset tilbud: 299,-

Med vores 360° Startpakke får du en helt unik all-round træningsoplevelse til en eksklusiv pris.

Vi har teknisk set udført opgaven nu og lavet den mest generiske formular, WordPress og Elementor har at byde på. Vi opridser et tilbud og giver folk muligheden for at tilmelde sig. Udover at siden ikke er synderligt spændende at kigge på, har vi også designet os ind i en håndfuld problemer, der kunne resultere i en højere bounce rate end nødvendigt.

Vi stoler for meget på brugeren – Folk læser ikke hjemmesider – de skimmer dem. Med dette design (eller mangel på samme) stoler vi på, at brugeren læser siden fra ende til anden, da vi ikke har brugt energi på at gøre siden skimmevenlig. Vi har derfor ingen kontrol over, hvad folk skimmer først og risikoen for, at folk beslutter sig for at smutte bliver højere.

Information og funktion – Siden her har to formål: At informere brugeren om, hvad de kan få og give dem muligheden for at skrive sig op til det. Det vil derfor give god mening at opdele siden i to sektioner, hvilket samtidig vil gøre den meget mere indbydende at læse eller skimme.

Manglende visuelle elementer og kontrast – Det er svært at skabe en rød tråd i en kampagne, når man kun har tekst at arbejde med. Her er der ingen visuelle elementer at bruge i en evt. email bekræftelse, og stemningsmæssigt får man ingen indtryk om, hvad tilbuddet handler om. Det er man tvunget til at læse.

Lad os fixe de problemer og samtidig gøre siden mere visuelt spændende og indbydende:

Analysér opgaven, og læg en plan

Før man bekymrer sig om, hvordan siden skal se ud (skrifttyper, farver, effekter, brug af billeder), kan det være brugbart at lave en wireframe først. Her bryder man siden ned i sine overordnede elementer og fokuserer på informationshierakiet, kontrast og struktur.

Her har vi opdelt informationen i to overordnede sektioner og øget kontrasten drastisk på den sektion, vi gerne vil have, brugeren skimmer først. I dette tilfælde er det prisen og tilbuddets mange fordele, hvilket vi har gjort både ved hjælp af den sorte baggrundsfarve og skriftstørrelsen.

Vi har samtidig givet sidens funktion (formularen) en masse råderum og whitespace, hvilket får det til at virke som en mere overskuelig opgave, sammenlignet med vores “wordpressy” udgangspunkt, hvor hele siden virkede som én stor opgave, man skulle læse sig igennem.

Formularen har nu også sin egen dedikerede overskrift, der agerer som sekundært blikfang, efter brugeren har skimmet pris-sektionen. Når brugeren lander på en sign-up side, er det også vigtigt at huske på, at de lige er kommet fra en meget større sales page. De er allerede blevet udsat for tilbuddets indhold, og der er derfor ingen grund til at begrave formularen i slutningen af en lang tekst. Samtidig vil vi gerne opridse tilbuddet for at bekræfte brugeren i, hvad de helt præcist skriver sig op til. To sektioner, der gør brug af det gyldne snit, er derfor en super god løsning, som samtidig ser rigtig godt ud.

Nu til det sjove - design

Her kan vi udnytte den forstærkede kontrast i vores tilbudssektion til at indføre noget stemning, så folk ved et øjekast kan se, at det er et træningstilbud, det handler om.

Baggrundsbilledet har fået et mørkt overlay, så den hvide tekst stadig er fint læsbar. Dette er et element, der er oplagt at genbruge i email-bekræftelsen eller til SoMe-annoncering.

Vi gør samtidig brug af InnerGyms grønne farve til at koble visse informationer sammen, navnligt at tilbuddet er begrænset. Den grå baggrundsfarve indrammer sektionen, hvilket tillader os at lege med whitespace indenfor rammerne.

Hvis du kunne tænke dig at se, hvordan siden er lavet på den tekniske front, kan du se videoen nedenfor.

Læs en mere...

5.21.2021

Det gode case-interview:
Kildekontrakt og research

Hvordan afvikler du et case-interview, så du er sikker på at få de helt perfekte guldkorn til din artikel? Her får du en grundig guide til den helt rette afvikling af et caseinterview.

LÆS CASE >

5.21.2021

Performance garanti

– Hvis vi ikke leverer, betaler du ikke!

Så enkelt er det. Vi skaber en kontinuerlig strøm af leads og varme kundeemner til din virksomhed og dit salgsteam, og hvis vi ikke når det aftale mål, så betaler I ikke. Det sikrer jer en stabil og skalerbar fremtid uden bekymringer om, hvor den næste potentielle kunde skal findes.

Tag din virksomhed til nye højder

Marketing skal efterlade resultater. Book et strategisk opkald, og hør mere om, hvordan vi kan udvikle en datadreven, skalérbar leadgenereringskampagne og sikre en kontinuerligt fyldt salgspipeline I din virksomhed – så I aldrig mere skal bekymre jer om, hvor den næste kunde skal komme fra.