• Dansk Dansk Dansk da
  • English English English en
Kontakt os: +45 29 72 61 17

Microsoft Dynamics 365

For A Fact
  • Udfordringer?
  • Løsninger!
  • Services
    • Generelle services
    • Strategi
    • Eksekvering
    • Dataanalyse
  • Systemer
    • Systemer generelt
    • ClickDimensions
    • Dynamics 365 Marketing
  • Support
  • Kontakt os
  • Menu Menu

Style webform i ClickDimensions

Formål – Hvad vil det sige at style webforms i ClickDimensions?

Når du opretter en helt ny webfom i ClickDimensions, så er den visuelt opsat til at se ud, som ClickDimensions har bestemt på forhånd.
Hvis du gerne vil have en webform til at passe ind i jeres eget design, så har du mulighed for at opdatere det CSS der bruges til det.

For at style en webform i ClickDimensions skal du bruge disse elementer:

Webform

CSS

Start med at se vores eksempel:

Sådan ser en helt almindelig webform ud i ClickDimensions hvis du blot bruger standard design

CSS-ClickDimensions-webform-standard-For a Fact

Via Code Editor kan du ændre alle elementer.
På billedet ovenover kan du se, hvordan teksten i felterne står helt ud til kanten og submit knappen er lidt anonym.

Dette billede viser en webform, hvor vi har opdateret alle elementer med CSS, både de som ClickDimensions har med fra start,
men vi har også tilføjet helt nye CSS koder.

CSS-ClickDimensions-webform-new-For a Fact

Teksten er rykket lidt væk fra kanten

Vi har tilføjet en grøn baggrundsfarve samt bestemt hvor bred formen skal være

Der er kommet runde kanter på alle hjørner

Submit knappen er gjort større og fået farve

Vi har opdateret den røde stjerne ved påkrævet felter – samt ændret skriftfarven der kommer frem + Font typen

CSS-ClickDimensions-webform-Required-For a Fact

Vi har tilføjet en effekt når musen kører over felterne med Listen – til en blå farve
CSS-ClickDimensions-webform-hover-For a Fact

Guide til at style webforms i ClickDimensions

Her vises en masse forskellige CSS koder du kan bruge. Både en forklaring og så selve koden.
Du kan downloade alle forklaringer her i PDF format.

CSS kode + forklaring

/*— STYLE FOR FORM BG, BORDER, SHADOW—*/

form{
/*— Bredden på selve formen —*/
width: 300px !important;

/*— Afstand til venstre kanten —*/
padding-left: 7px;

/*— Afstand til top kanten —*/
padding-top: 7px;

/*— Sætter tykkelsen af kanten + farven på kanten —*/
border:1px solid rgb(200,200,200) !important;

/*— Baggrundsfarven på formen —*/
background: #7BBB3B !important;

/*— Box skygge – giver kanten på alle 4 sider. Prøv eks at gange alle tal med 10 for at se ændring —*/
box-shadow: ;
border-top:1px solid #7c7c7c;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-bottom:1px solid #ddd;

/*— Sætter hvor afrundet hjørnet skal være – 0 er firkantet —*/
border-radius:6px;
}

/*— BODY STYLE —*/
body
{
/*— Sætter udvendig afstand fra formen til hvor den er placeret —*/
margin:0px;

/*— Sætter indvendig afstand fra formen til hvor den er placeret —*/
padding:0px;
}

/*— FOR A FACT – INSERT IMAGE TO INPUT FIELD —*/
Kan benyttes hvis I vil indsætte et billede sammen med feltet på formen.
Læs dette blogindlæg

/*— TEXT STYLE —*/
span{
/*— Opdater Font typen —*/
font-family:helvetica, arial !important;

/*— Sætter afstanden fra tekst til kant ovenover. BEMÆRK: Påvirker alle felter! —*/
padding-top: 5px;

/*— Opdater Font størrelsen —*/
font-size: 14px !important;

/*— Opdater Font farven —*/
color: #ffffff !important;
}

/*— FORM CONTAINER STYLE —*/
.mainDiv{
margin:auto;
float:left;
}
/*— FIELD INPUT STYLE – Opdater feltet der tastes i —*/
.clickdform input[type=’text’],
.clickdform textarea,
.clickdform select{
/*— Opdater Font typen —*/
font-family:”Verdana” !important;

/*— Opdater Font størrelsen —*/
font-size:13px !important;

/*— Opdater Font farven —*/
color:#333;

/*— Opdater afstanden til kanten —*/
margin:0px;

/*— Opdater afstanden til kanten. BEMÆRK: Hvis I skriver 4px 2px Det først tal 4px sætter afstand top og bund mens 2px sætter afstand venstre og højre —*/
padding:2px 3px;

/*— Afstand fra skrive feltet til Label (teksten) ovenover —*/
margin-top: 3px;

/*— Felt skygge – giver kanten på alle 4 sider. Prøv eks at gange alle tal med 10 for at se ændring —*/
border-top:1px solid #7c7c7c;
border-left:1px solid #c3c3c3;
border-right:1px solid #c3c3c3;
border-bottom:1px solid #ddd;

/*— Sætter hvor afrundet hjørnet skal være – 0 er firkantet —*/
border-radius:6px;
}

/*— FIELD INPUT STYLE – Påvirker feltet når musen køres henover – Ikke alle felter! —*/
.clickdform input[type=’text’]:hover,
.clickdform textarea:hover,
.clickdform select:hover{
/*— Opdater baggrundsfarven —*/
background: #00A1F1;
box-shadow: 0px 0px 12px rgba(0,200,0,0.8);
}

/*— Opdater farve på stjernen ved påkrævet felt —*/
.requiredStar {
color: #ffffff !important;
padding-left: 3px !important;
}

/*— Opdater teksten der vises ved påkrævet felt —*/
.requiredInfo div{
/*— Sætter font størrelsen —*/
font-size: 14px;

/*— Sætter font farven —*/
color: #000000;

/*— Sætter font typen —*/
font-family: roboto !important;
}

/*— LIST DROPDOWN STYLE —*/
.clickdform select{
/*— Sætter højden på feltet hvis I bruger en Drop-down liste —*/
height:26px;
}

/*— SUBMIT BUTTON STYLE —*/
#btnSubmit{
/*— Opdater afstanden til kanten. BEMÆRK: Første tal er afstanden til top, næste er afstand til højre, næste er afstand til bunden og sidste tal er venstre. Husk der skal stå px efter hvor andet en 0 —*/
margin: 15px 0 0 0;

/*— Opdater Font typen —*/
font-family:Verdana;

/*— Opdater Font størrelsen —*/
font-size:13px;

clear:both;

/*— Sætter bredden på Submit knappen —*/
width:200px !important;

/*— Sætter baggrundsfarven på Submit knappen —*/
background: #00A1F1 !important;

/*— Sætter om der skal være en kant Submit knappen? —*/
border:none;

/*— Tekst afstand til top BEMÆRK: Sætte begge til det samme! —*/
border-radius: 5px;
-moz-border-radius: 5px;

/*— Sætter hvor afrundet hjørnet skal være – 0 er firkantet —*/
-webkit-border-radius: 5px;

/*— Sætter tykkelse af border —*/
border: 4px solid #00A1F1;

/*— Tekst afstand til top —*/
padding-top:5px;

/*— Tekst afstand til bund —*/
padding-bottom:5px;

/*— Tekst farve —*/
color: white !important;
}

/*—PREVIOUS BUTTON STYLE – er kun synlige hvis du har flere sider! —*/
.clickdform .WizardPrevButton{
/*— Opdater afstanden til kanten. BEMÆRK: Første tal er afstanden til top, næste er afstand til højre, næste er afstand til bunden og sidste tal er venstre. Husk der skal stå px efter hvor andet en 0 —*/
margin: 15px 10px 0 0;

/*— Opdater Font typen —*/
font-family:Verdana;

/*— Opdater Font størrelsen —*/
font-size:13px;

float:left;
}

Ønsker du at downloade denne side som PDF guide?

Udfyld formen, så har du den i din indbakke når du skal igang med at lave din egen webform.

Betingelser

Seneste indlæg

  • ClickDimensions Academy
  • Gør kunderejsen til omdrejningspunkt for marketing og salg
  • Subscription center
  • Conditional Logic Form
  • Style webform i ClickDimensions

Kategorier

  • ClickDimensions
  • For A Fact
  • Generelt
  • Inspiration
  • Samarbejdspartner
ClickDimensions.DK
ClickDimensions Danmark LinkedIn
ClickDimensions Usergroup FaceBook

KONTAKT

FOR A FACT ApS
Gammel Køge Landevej 55
2500 Valby
Tlf.: +45 29 72 61 17
E-mail: Info@Forafact.dk
CVR: 40584943

EKSTRA INFO

Om For A Fact
Referencer
Persondatapolitik
Viden og Inspiration
Samarbejdspartnere

TOOLS VI ANBEFALER

LeadsBridge
Leadfeeder
SkillerBee

FØLG MED

For A Fact (LinkedIn)
ClickDimensions Danmark (LinkedIn) 
ClickDimensions UG (Facebook)

 

© 2020 Copyright For A Fact
  • LinkedIn
Scroll to top
Cookie - Vi tracker din adfærd
Som besøgende på dette website har du sikkert en interesse i hvordan du kan bruge datadrevet marketing sammen med Dynamics 365?
Derfor bruger vi cookies så vi kan vise dig hvordan det virker, hvordan du går fra at være anonym til kendt og hvordan indsigt kan analyseres til viden, som I kan træffe faktabaseret beslutninger ud fra.

Udfyld en form på websitet om at kontakte dig - så kan du få indsigt i din egen data og se hvordan det virker.

Klik OK for accept eller ændre under indstillinger.
Cookie indstillingerOK
Læs vores data persondatapolitik
Privacy & Cookies Policy

Introduktion

Når du besøger vores website indsamles der oplysninger om dig, som bruges til at tilpasse og forbedre vores indhold og til at øge værdien af de annoncer, der vises på siden. Hvis du ikke ønsker, at der indsamles oplysninger, bør du slette dine cookies (se vejledning her) og undlade videre brug af websitet. Nedenfor har vi uddybet, hvilke informationer der indsamles, deres formål og hvilke tredjeparter, der har adgang til dem.

Cookies

For A Fact anvender ”cookies”, der er en tekstfil, som gemmes på din computer, mobil el. tilsvarende med det formål at genkende den, huske indstillinger, udføre statistik og målrette annoncer. Cookies kan ikke indeholde skadelig kode som f.eks. virus.

Det er muligt at slette eller blokere for cookies. Se vejledning her.

Du kan slette eller blokere for cookies. Hvis du vælger at slette eller blokere for cookies, vil annoncer kunne blive mindre relevante for dig og optræde hyppigere. Du kan desuden risikere at websitet ikke fungerer optimalt samt at der er indhold, du ikke kan få adgang til.
Nødvendige
Altid slået til

Påkrævede cookies De påkrævede cookies er nødvendige for, at websitet kan levere de ydelser du efterspørger. Disse cookies sættes af websitet og bruges for eksempel til at genkende dig, når du bevæger dig rundt på siden. Denne type af cookies slettes automatisk, når du lukker din browser.

Ikke nødvendige

Præference cookies Præference cookies bruges til at huske dine præferencer på websitet, såsom sprog eller valg, der gør navigationen nemmere. Disse cookies sættes af websitet og deres formål er at forbedre brugeroplevelsen på websitet. Præference cookies gemmes på din computer og udløber på en given dato/tidsinterval. Analyse cookies Google Analytics cookies bruges til indsamling af besøgsstatistik. Disse cookies indsamler informationer om din brug af websitet, herunder din IP-adresse. Vil du vide mere om Google Analytics og dine data, så besøg denne Google webside. Markedsføring cookies Facebook: Vi bruger Facebook pixel for bedre at kunne målrette relevant information til besøgende, der har en Facebook-konto. I de fleste webbrowsere kan du styre brugen af cookies gennem browserens indstillinger. Du skal imidlertid være opmærksom på, at det kan påvirke din brugeroplevelse, hvis du reducerer et websites adgang til at placere cookies.