Jer der enten har eller stadig arbejder med formularer i ClickDimensions, ved godt, at styling-mulighederne og funktionaliteten er begrænset, hvis man arbejder med formularen, som den er ud af boksen.

Vil man gerne have tilføjet funktionalitet og/eller style formularen til at matche indholdet på f.eks. en hjemmeside, kræver det, at man har kendskab til CSS og/eller JavaScript. Flere af vores kunder har haft et ønske om at ændre layoutet på deres formularer, eller få en specifik funktion, som ikke kunne lade sig gøre ud af boksen. Mange af opgaverne har vi løst ved brug af CSS, JavaScript eller en kombination af begge.

Vi vil i dette indlæg vise nogle enkelte eksempler, som I kan finde inspiration fra, og for at gøre det mere håndgribeligt, har vi lavet en test-formular, der indeholder flere funktionaliteter og designmæssige designforslag, som I kan klikke rundt i (I kan finde de to links længere nede i indlægget).

Kun fantasien sætter grænser

Vi gør opmærksom på, at mulighederne ikke er begrænset til de eksempler I ser i dette indlæg, så har I nogle specifikke ønsker, skal I ikke tøve med at kontakte os – så kan vi sammen finde en løsning, der matcher jeres behov.

ClickDimensions’ udgangspunkt

Nedenfor har vi vedhæftet to billeder af en ClickDimensions form, som ikke er blevet stylet. Formen er en kopi af den, som vi linker til længere nede i en stylet version, så I kan se forskellen på de konkrete formularer.

Kontaktformular / Side 1

Link til live kontaktformular uden styling

Subscription Page / Side 2

Link til live Subscription Page uden styling (denne ser man også, hvis man trykker “Næste form” på den første side)

Konkrete eksempler

Låst bjælke i toppen

Har man en meget lang formular, vil man risikere, at topbanneret med logo i forsvinder, når man scroller ned af siden. Vil man gerne undgå dette, og sørge for, at banneret og logoet er synligt hele tiden, kan det gøres ved at ”låse” bjælken til toppen, så formularen forsvinder op bagved bjælken, efterhånden som man scroller nedad. 

En bonus er, at logoet hentes direkte fra ClickDimensions’ mediebibliotek, så man behøver ikke at uploade logoet som en ny fil, hver gang man opretter en ny formular.

Generel styling

Når der er tale om generel styling, snakker vi mulighederne for at tilpasse alle elementerne som f.eks. teksttype, og -størrelse, spacing, farver og felternes udseende blandt mange andre ting. Formularens udseende kan helt enkelt designes efter jeres ønsker.

Eksempel på en formular:

Eksempel på en subscription Page:

Knap som billede

Vil man selv have 100% kontrol over knappens udseende, kan dette gøres ved at lave sine knapper som billeder. Man kan sagtens stadig tilføje en hover-funktion – så skal man simpelthen bare lave to forskellige udgaver af den samme knap.

Knap lavet som et billede:

Hover-udseende:

Folde-ud-menuer

Menuer, der som udgangspunkt er ”foldet sammen”, kan ikke lade sig gøre ud af boksen i ClickDimensions, men de kan være smarte, hvis man har rigtig mange felter, som fylder en del. Med folde-ud-menuer kan man sikre, at mulighederne blive mere overskuelige for brugeren, hvilket i sidste ende vil føre til en mere positiv brugeroplevelse. 

Ikonerne, som skal vise, at en menu er foldet sammen, laves som PNG-filer, hvorfor I kan få dem designet lige præcis som I vil have dem. Man kan ligeledes tilføje en hover-funktion samt et ikon, der viser, at menuen er åben – så skal man bare sørge for at lave de forskellige udgaver af ”knapperne”.

Lukket folde-ud-menu:

Folde-ud-menu hover:

Åben folde-ud-menu:

$Email I post redirect

Helt kort, så sørger $Email-funktionen for at den e-mailadresse, som bliver udfyldt i den første formular (den vi kalder for side 1), bliver ført med over til den anden formular (den vi kalder for side 2), hvor man vælger præferencer (det er den side, man bliver ført til, når man trykker ”Tilmeld mig” i vores eksempel). Når man bruger denne funktion, skal brugeren altså ikke indtaste sin e-mailadresse igen, når de først har valgt deres foretrukne præferencer, hvilket endnu engang kan være med til at optimere brugeroplevelsen.

Denne funktion er ikke synlig i selve formularen, idet e-mailfeltet er blevet skjult på side to i formularen.

Links til formularens to sider

Vi har nedenfor linket til de to sider i vores tilmeldingsformular-eksempel, hvor I selv har mulighed for at klikke rundt og se eksemplerne, som vi har beskrevet kort i dette indlæg. De to ”sider” er to separate formularer, men er sat sådan op, at når man har udfyldt den første formular, så bliver man redirected til den anden side, som er en Subscription Page.

Link til første side i formularen / Kontaktformular

Link til anden side i formularen / Subscription Page (denne ser man også, hvis man trykker “Tilmeld mig” på den første side)

Andre eksempler

EKF – styling af tilmeldingsform

Kromann Reumert – Styling af tilmeldingsform