Det er nemt at sætte forms op med CF7. Men formularens udseende er ærlig talt noget skuffende. Lidt CSS er hamrende nødvendigt, hvis din formular skal se godt ud.

Tilføj CSS i stil med dette:

/* Styling af Contact Forms 7 */
div.wpcf7 { 
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 1px solid #f28f27;
	padding:20px;
width:80%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	/*background:#725f4c;*/
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family:lora, sans-serif; 
	font-style:italic;
	width:80%;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
    /*background-color:#725f4c;*/
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	width:80%;
	text-align:center;
}

Læg mærke til CSS-variablernes navne, der er hentet fra farverne i kontrolpanelet. Twenty Twenty-five giver hver farve en slug, der kan bruges som en CSS-variabel. Sluggen tilføjes altid efter:

--wp--preset--color--

Derfor kommer en typisk baggrundsfarve til at se sådan ud:

background-color: var(--wp--preset--color--accent-1);

Sluggen “base” er typisk baggrundsfarven. Contrast giver en god kontrast – og dermed bliver tekst let at læse. Accent 1 .. 6 er forskellige farvenuancer, som man kan bruge rundt omkring.

På grund af denne stringente brug af farver er det muligt at farvesætte formularen efter de valgte styles. Hvis du vælger alternative styles, så burde farverne stadig fungere.

Når du tilføjer dine egne farver, kan du bruge dine egne slugs på en lignende måde.