Form Builder

Form Customization - Styling

Senest redigeret:

Denne guide hjælper dig til at komme i gang med at tilpasse din(e) formular(er) så de kan passe ind i jeres eksisterende design og brand. Ønsker du en generel introduktion til Customisation, anbefaler vi at du ser denne guide: Forstå Form Builder Customisation

Inden du går videre, anbefaler vi at du har kendskab til CSS.

Genvej i guiden 

 


 

General styling

Når du skal style formularer i OF, er det en god ide at starte med at style generelt, så alle formularer får den samme basis styling og derved få et klart og ensartet udtryk.
Denne ensartethed giver en fornemmelse af seriøsitet og trykhed, som er vigtig for brugeren, når det gælder om at skabe de bedste forudsætninger for en konvertering.

Denne styling angives her: Form Builder -> Customisation : Apply Styling - general to all forms.

mceclip0.png

 

Ram en unik formular

Hvis du ønsker at en specifik formular skal have sit eget unikke særpræg, kan du benytte dig af formularens unikke id, som er angivet som klasse på netop den formulars body element.

Vi anbefaler at styling til en specifik formular, angives i stylingsområdet for den enkelte formular og ikke i det generelle styling område. På den måde findes opsætning, unik styling og javascript for den specifikke formular samme sted, og gør det nemmere at få et overblik over formularen.

Formularens ID kan findes i oversigten over oprettede formularer.

mceclip1.png

/* Denne klasse vil fremgå på medlemsformularens body element */
.form-id-7 {
}

 

Denne styling angives her: Form Builder > Forms > "Navn på specifik formular" : Apply styling to this particular form.

mceclip2.png

 

Grid

Formularens generelle html struktur og layout bygger på et kolonne system.
Selv om html strukturen ikke er til at redigere, kan de fleste layout ønsker løses ved at justere eller overskrive de generelle kollonne bredder.

F.eks. kan der laves et layout, hvor labels flyttes ovenfor input felterne og felterne så optager den fulde formular bredde.

/* LABEL OVER INPUT */
.form-group > .control-label {
width:100%;
text-align:left;
}

.form-group > .control-input {
width:100%;
margin-left:0;
margin-right:0;
}

 

Google fonts

I opsætningen af en formular, har du mulighed for at benytte dig af google fonts.
Dette kan du gøre ved at indsætte det link, som du kan kopiere fra https://fonts.google.com/ i det område som giver dig mulighed for at tilføje links i HTML-head.

<!-- Google font - Example -->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Efter indsættelse af dette link, skal du angive font-family til formularen, enten generelt eller på et dybere niveau, alt efter om der skal benyttes flere fonte i formularen.

Dette link indsættes her: Form Builder > Customisation : Apply HTML in head - such as Google Fonts or Facebook Pixel tracking.

mceclip3.png

 

Body

Her angives den globale tekst farve, skrifttypen og generelle styles omkirng skriften, så som størrelse, linje afstand osv.
Hvis der ønskes en anden typografi i input felterne og for labels, kan dette specificeres.
Hvis der er ønske om at style området formularen befinder sig i kan baggrundsfarve, padding og hjørner styles på container elementet #body > .container.
Hvis det er kun er formularen og området med dennes felter, man ønsker at style, kan man ramme #form_submit.

#body {
color:#212121;
font-family:"Roboto", sans-serif;
font-size: 14px;
max-width: 420px;
margin-left:auto;
margin-right:auto;
}

#body.framed > .container {
background:#eee;
padding:30px;
border-radius: 4px;
}

 

Form groups

Formularen er bygget op af forskellige form-groups, baseret på den opsætning, som er lavet i kontrolpanelet.
Klasserne i hver form-group går fra et generelt scope mod høj specificitet, som giver mulighed for både at style bredt, men også mulighed for at specificere sin styling.

F.eks. er både bidrags frekvens og valg af betalingsmidler en form-group-radio, men de fleste vil gerne have at disse elementer ser forskellige ud.
Så her kan man benytte sig af henholdsvis .form-paymenttype og .form-paymentmethodtype til at differentiere.

 

Labels

For labels kan vi tale om at der er to slags labels, det overordnede, som vi kalder labels, og dem som står på række med en checkbox eller radio knap, som vi kalder nested labels.
Grunden til denne opdeling er at man ofte har behov for at style disse typer forskelligt.

Labes kan rammes med disse klasser:

// Labels
#body .control-label {
color:#212121;
font-size:13px;
font-weight:600;
letter-spacing:0.025em;
text-transform:uppercase;
}

// Nested labels
.checkbox label,
.radio label,
.form-check-label span{
color:#656565;
font-size:12px;
}

 

Inputs

Input felterne er en central del af formularen og det skal være nemt at få et overblik over felterne, hvilke skal udfyldes og hvordan.
Derfor er vigtigt at sørge for at felterne optræder i sammenhæng med enten et label eller en placeholder ( eller begge dele), så brugeren er klar over hvilke informationer der skal udfyldes.
Generelt giver det god mening at sørge for at felterne ser ensartet ud, for at give et godt helheds indtryk af formularen.

Dette kan gøres ved at sørge for at input felterne alle har samme border tykkelse, farve og radius.
Efter at disse er angivet til de tre elementer, kan der være behov for at se på hver enkelt input felt for at se om der kræves yderligere styling.

Select elementet ser per default forskelligt ud fra browser til browser. Men der er mulighed for at forcere en ensartethed på tværs.
Dette kræver dog noget specifik styling for at lave en "fake" dropdown pil.

input.form-control,
select.form-control,
textarea.form-control {
border: 1px solid #eee;
border-radius:50px;
line-height:40px;
height:40px;
padding:0px 24px;
}

.textarea.form-control {
border-radius:10px;
line-height:1.5;
padding:10px;
}

/* Fake select styles*/
select.form-control {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAA8CAYAAAGle1zPAAAAGXRFW…DVoDd4ulOjAK+6NL+cVogIr6oGj82E+IeScb4IIUKIEGe1AmZN7iVf8/K3AAAAAElFTkSuQmCC);
background-position: right 8px center;
background-size: 12px 8px;
-webkit-appearance: none;
}

 

Checkbox  og Radio

For checkboxes og radio kan der angives en bestemt farve og symbol ved valg.
Radio kan styles til at vises som knapper.
Ligesom input felterne for text, select og area er det en god ide at angive samme border tykkelse, farve og baggrundsfarve til checkbox og radio felterne.

/* farve på radio knap og check-symbol */
body:not(.is-firefox) input[type=checkbox],
body:not(.is-firefox) input[type=radio] {
color:blue;

}

Radio Button Styling 

Det er muligt at style radio knapperne til at se ud som knapper. Dette kan gøres ved at skjule input og style span elementet til at ligne en knap.

/* Skjul native input fra specificeret form-group */
.form-horizontal .form-group.form-method .radio label input{
display:none;
}

.form-horizontal .form-group.form-method .radio label {
display: block;
padding: 0;
}

/* Basis Radio-button style */
.form-group.form-method .radio label span {
background:#f6f6f6;
text-align: center;
display: block;
height: 40px;
line-height: 40px;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}

/* Button active/toggle style */
.form-horizontal .form-group.form-method .radio input:checked+span {
background: blue;
color:#fff;
}

/* Tving inline button bredde ud fra antal af children */
.form-group.form-method .radio-inner>.radio:first-child:nth-last-child(2),
.form-group.form-method .radio-inner>.radio:first-child:nth-last-child(2)~.radio
{
width: 50%; /* 2 buttons */
}

.form-group.form-method .radio-inner>.radio:first-child:nth-last-child(3),
.form-group.form-method .radio-inner>.radio:first-child:nth-last-child(3)~.radio
{
width: 33.3333%; /* 3 buttons */
}

.form-group.form-method .radio-inner>.radio:first-child:nth-last-child(4),
.form-group.form-method .radio-inner>.radio:first-child:nth-last-child(4)~.radio
{
width: 25%; /* 4 buttons */
}

/* Afstand imellem buttons: brug negativ-margin på parrent og almindelig margin på children */
.form-group.form-method .radio-inner {
border-top:none;
margin-left:-8px;
margin-right:-8px;
}

.form-group.form-method .radio label span {
margin-left:8px;
margin-right:8px;
}

 

Expanders

Denne bruges typisk til at vise betingelser for formularen.
Der kan styles på triggeren og på content, men også typografien i content området, hvis dette ønskes.

.expand-wrapper {
background:transparent;
}

.expand-trigger {
font-weight:600;
height:40px;
width:100%;
padding:0;
}

.expand-content{
padding:15px;
background:#eaeaea;
}

 

Submit - Støtte knap

Der er typisk et ønske om at Submit knappen skal skille sig ud, enten ved sin størrelse, form, farve eller justering.
Som default er knappen og dennes wrapper pakket ind i et element med en bredde på 6 kolonner. Hvis denne ønskes fuld bredde kan bredden ændres ved at ramme .form-group-submit .control-input.

Hvis du vil ændre knappens justering, kan du ramme .submit-wrapper og give denne en text-align: left, center, right, hviket vil få knappen til at justere sig som angivet.
Dette er dog ikke relevant for en knap med med fuld formular bredde.

For at ændre knappes udseende bruges denne klasse .btn-submit. Her kan der både angives tekst-styles, baggrundsfarve, højde og bredde.


mceclip5.png

.form-group-submit .control-input {
width:80%;
margin-left:auto;
margin-right:auto;
float:none;

}

.submit-wrapper {
text-align:center;
}

.btn-submit {
background:blue;
border-radius:4px;
color:#fff;
font-size:16px;
font-weight:600;
height:56px;
letter-spacing:0.05em;
line-height:56px;
text-transform:uppercase;
padding:0 24px;

}

 

Validators

Formularens felter bliver valideret løbende og giver valideringsfeedback tilbage til brugeren, så brugeren få en visuel indikation på om noget er tastet forkert.

mceclip4.png
Denne visuelle feedback kan også styles.

#body .form-control.error+.validator-icon::before, 
#body .form-control.error+input[type=hidden]+.validator-icon::before,
#body .form-control.error+label+.validator-icon::before,
#body .form-control.valid+.validator-icon::before,
#body .form-control.valid+input[type=hidden]+.validator-icon::before,
#body .form-control.valid+label+.validator-icon::before {
font-size:14px; /* specificeres hvis der ønskes en generel symbol størrelse som er større eller mindre end den generelle font størrelse */
height:40px; /* bør være samme højde som input feltet */
line-height:40px ; /* bør være samme line-height som input feltet */
border-radius:0 4px 4px 0; /* bør være samme border-radius som input feltet, typisk ønskes ingen radius på venstre side: border-radius: 0 4px 4px 0;*/
padding: 0; /* bruges til justering af symbol, hvis line-height ikke bruges. Brug padding: 0 hvis line-height bruges. */

}

//Success
#body .form-control.valid+.validator-icon::before,
#body .form-control.valid+input[type=hidden]+.validator-icon::before,
#body .form-control.valid+label+.validator-icon::before {
background:Green;
color:#fff;
}

// Error
#body .form-control.error+.validator-icon::before,
#body .form-control.error+input[type=hidden]+.validator-icon::before,
#body .form-control.error+label+.validator-icon::before {
background:red;
color:#fff;
}
// Error tekst
label.error {
color:red;
font-style:italic;
}


Reciept

Kvitteringssiden nedarver al den generelle styling for standard elementer, så som h1 - h6, p, a og andre elementer, derfor kan det være nødvendigt at benytte sig af klassen .is-reciept, hvis man gerne vil differentiere styling af disse elementer fra dem som bruges i formularen.

Her benyttes der også en tabel, som man sagtens kan style efter siden ønsker.

/* Style enten lige eller ulige table rows for bedre læselighed af tabellen */
.is-receipt table tr:nth-child(even)
{
background:#efefef;
}

.is-receipt table tr:nth-child(odd)
{
background:transparent;
}

 

Brug for hjælp?

Som nævnt i starten, anbefaler vi at du har kendskab til CSS inden du redigerer. Skulle du have brug for hjælp til at lave det efter en ny formular, kan du sende dit design til vores support afdeling: support@onlinefundraising.dk