De stijl van Contact form 7 aanpassen zodat deze past bij je website?

Met meer dan een miljoen actieve installaties is Contact Form 7 verreweg een van de populairste WordPress-plug-ins ooit. De populariteit heeft waarschijnlijk veel te maken met de waarheid achter de beschrijving: “Eenvoudig maar flexibel.” Het aanpassen van de stijl en vormgeving is dan ook heel ‘simpel’ gehouden volgens de makers. Alleen in deze simpelheid zit direct de uitdaging. De vormgeving kan je namelijk niet aanpassen met een editor of via de pagebuilder die je gebruikt. Dit kan alleen gedaan worden met CSS (Custom Style Sheets). En dat maakt dus meteen dat je verstand moet hebben van CSS voordat je iets kan aanpassen aan de vormgeving. Hieronder volgen een aantal mogelijkheden om specifieke onderdelen van Contact Form 7 aan te passen. Hierbij ga ik er voor nu wel vanuit dat je weet wat CSS is en waar je deze moet plaatsen binnen je gekozen Thema of Pagebuilder.

Aanpassingen die voor het gehele formulier gelden

Deze aanpassingen gelden voor het gehele contactformulier. hiervoor gebruiken we de class .wpcf7

(Let op: ik start met aangepaste CSS altijd met een opening tussen /* en */. Hiermee geef je structuur en overzicht aan je aangepaste CSS. Door de tekens wordt alles daartussen niet gezien als code. Hieronder volgen een aantal mogelijkheden om specifieke onderdelen van Contact Form 7 aan te passen. Hierbij ga ik er voor nu wel vanuit dat je weet wat CSS is en waar je deze moet plaatsen binnen je gekozen Thema of Pagebuilder.


/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Dit zal er nu ook voor zorgen dat de tekst tegen de rand geplakt zit. Dit kan je oplossen door middel van:


/* Contact Form 7 Styles
---------------------------------*/

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;
}

Let op: mocht dit niet meteen goed gaan of niet helaas zoals je verwacht had dan kan dat komen door het thema dat je gebruikt. Dit is waarschijnlijk anders dan mijn thema en ieder thema heeft zo zijn eigen manieren om hier mee om te gaan. Dat betekent zeker niet dat de code niet werkt voor je. Maar het kan wel zijn dat je iets meer moet tweaker wil het voor jou zo worden als de bedoeling is.

Aanpassingen die voor het specifieke veld gelden

De breedte van een veld

Een van de meest voorkomende verzoeken die mensen hebben als het gaat om het vormgeven van contactformulier 7, is hoe ze de breedte van de velden kunnen aanpassen. Met name het berichtgebied dat niet erg ver reikt.


/* Contact Form 7 Styles
---------------------------------*/

.wpcf7-textarea {

width: 85%;

}

Button vormgeving


/* Contact Form 7 Styles
---------------------------------*/

.wpcf7-submit {

padding: 0.3em 1em!important;
background:#FF0000;
color:#000000!important;
font-size: 16px;    
font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif!important;    cursor:pointer;
border-radius: 0px; 
border-width: 13px!important;
border-color: rgba(0,0,0,0);
letter-spacing: 5px;
font-weight: 500!important;
text-transform: uppercase!important;
background-color: rgba(0,0,0,0); 
}

Input velden vormgeving

Hieronder enkele CSS opties waarmee je alles volledig naar je hand kan zetten. Zo kan je zelf experimenteren met alle opties.


/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,

{

background-color: #fff;
color: #000;
border-bottom-width: 1px;
border-bottom-color: #000;
border-bottom-style: solid;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
font-family: 'Oswald',Helvetica,Arial,Lucida,sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
line-height: 1.8em;
width: 100%;
padding: 14px;

}

Contact Form 7 CSS Style Text Areas


/* Textarea Field CF7 CSS Styles */

.wpcf7 textarea {

width: 100%;

color: red;

font-size: 20px;

border-color:red;

}

Previous

Next