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

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.

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

Vi har tilføjet en effekt når musen kører over felterne med Listen – til en blå farve

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