Hoe je formulieren in Contact Form 7 kunt stijlen met CSS in WordPress
Wil je dat je WordPress-formulieren er net zo strak uitzien als de rest van je site? Met Contact Form 7 heb je volledige controle over het uiterlijk van je formulier met behulp van CSS. Deze gids begeleidt je stap voor stap bij het stylen van Contact Form 7-formulieren, zodat je een naadloze, herkenbare ervaring voor je bezoekers kunt creëren.
Waarom Contact Form 7-formulieren stylen?
Contact Form 7 is een van de populairste WordPress-plugins voor het maken van formulieren—maar de standaarduitstraling is eenvoudig. Met aangepaste styling in klassieke WordPress-thema's kun je:
Laat je site aansluiten bij je huisstijl
Verbeter bruikbaarheid en toegankelijkheid
Maak formulieren uitnodigender en professioneler
Stap 1: Bepaal de CSS-selectors van je formulier
Voordat je begint met stylen, moet je weten welke CSS-selectors je formelementen targeten.
Elk Contact Form 7-formulier is omgeven door een unieke klasse: .wpcf7
Individuele elementen zoals invoervelden, tekstgebieden en verzendknoppen gebruiken standaard HTML-tags
Stap 2: Voeg aangepaste CSS toe aan je WordPress-site
Je kunt op twee hoofdmanieren CSS toevoegen:
Via de Customizer:
Ga naar Weergave > Customizer > Extra CSS en plak je stijlen.
LET OP: Voeg je CSS toe aan het style.css-bestand van je child theme voor meer geavanceerde aanpassingen.
Stap 3: Schrijf je eigen CSS
Hier zijn enkele veelvoorkomende voorbeelden om je op weg te helpen, met de "text"- en "submit"-formulierelementen als voorbeeld:
Style alle Contact Form 7-formulieren
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
Pseudo-klassen in CSS, zoals :hover, stellen je in staat elementen te stylen op basis van hun status of gebruikersinteractie. De pseudo-klasse :hover bijvoorbeeld past stijlen toe wanneer een gebruiker met de muis over een knop of veld beweegt. Dit wordt vaak gebruikt om knoppen te accentueren of van kleur te laten veranderen bij hoveren, waardoor je formulieren interactiever en visueel aantrekkelijker worden. Andere nuttige pseudo-klassen zijn :focus (wanneer een invoerveld geselecteerd is) en :active (wanneer een element wordt aangeklikt). Door pseudo-klassen te gebruiken verbeter je de gebruikerservaring door directe feedback te geven terwijl bezoekers met je formulier werken.
Richt je op een specifiek formulier
Elk formulier heeft een unieke ID, zoals #wpcf7-f123-o1. Gebruik deze om alleen dat formulier te stylen:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Vervang f123-o1 door de daadwerkelijke ID van je formulier. Je vindt de unieke ID van je formulier door de pagina te bekijken waar je Contact Form 7-formulier is ingevoegd, met de rechtermuisknop op het formulier te klikken en "Inspecteren" (of "Element inspecteren") in je browser te selecteren. Zoek naar de <div> met de klasse .wpcf7—de ID verschijnt als iets als id="wpcf7-f123-o1" in de HTML-code. Gebruik deze ID in je CSS-selector om alleen dat specifieke formulier te targeten.
Stap 4: Gebruik de ingebouwde klassen van Contact Form 7
Contact Form 7 voegt automatisch klassen toe aan elementen, waardoor targeten nog eenvoudiger wordt. Bijvoorbeeld:
.wpcf7-form-control – Alle formuliervelden
.wpcf7-submit – De verzendknop
Je kunt ook je eigen klassen toevoegen in de formuliereditor voor nog meer controle.
Voorbeeld
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Stap 5: Voorbeeld en aanpassen
Nadat je je CSS hebt opgeslagen, vernieuw je je site om de wijzigingen te zien. Gebruik de inspectietool van je browser om stijlen in realtime aan te passen voordat je ze in je site plakt. Vergeet niet je websitecache te legen na het aanbrengen van wijzigingen, zodat de updates zichtbaar zijn voor bezoekers.
Hier zijn voorbeelden van voor en na van een formulier op een demo-website, waarbij we de CSS-code uit Stap 3 hebben gebruikt om de randen rond elk formulierveld blauw te maken.
Snelle tips voor betere formulieropmaak
Houd het toegankelijk: Zorg voor goed kleurcontrast en leesbare lettergroottes
Gebruik witruimte: Voeg padding en marges toe voor een nette, overzichtelijke uitstraling
Markeer fouten: Style foutmeldingen met een duidelijke kleur (zoals rood) om gebruikers te helpen fouten te herstellen
Test op mobiel: Zorg dat je formulieren er op alle apparaten goed uitzien
Probleemoplossing
Als je stijlen niet zichtbaar zijn, probeer dan deze stappen:
Leeg je browser- en sitecache – Soms voorkomen gecachte bestanden dat nieuwe CSS zichtbaar wordt. Gebruik je een caching-plugin of managed hosting, leeg dan ook die caches.
Controleer op CSS-specificiteitsproblemen – Als je stijlen niet worden toegepast, probeer dan je selectors specifieker te maken om bestaande stijlen te overschrijven.
Zorg dat je het juiste CSS-bestand of de juiste sectie bewerkt – Controleer goed of je je code op de juiste plek toevoegt, zoals het Extra CSS-paneel, het style.css-bestand van je child theme of een aangepaste CSS-plugin.
Controleer CSS-klassen op typefouten of fouten – Zoek naar verkeerd gespelde klassennamen, onnodige spaties of per ongeluk het gebruik van de verkeerde klasse. Controleer ook of de klasse die je target daadwerkelijk in de HTML van je formulier voorkomt.
Controleer op dubbele of conflicterende klassen – Zorg dat de klasse die je gebruikt niet al elders wordt toegepast met andere stijlen die je wijzigingen kunnen overschrijven.
Volg algemene best practices – Gebruik duidelijke en consistente namen voor je klassen, sluit elke CSS-regel af met een puntkomma en sluit codeblokken altijd correct af met een accolade (}).
Door je code zorgvuldig te controleren op deze veelvoorkomende problemen, zorg je ervoor dat je aangepaste stijlen correct op je site verschijnen.
Voorbeeld: Complete aangepaste CSS voor een Contact Form 7-formulier
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Hier is een voorbeeld van een formulier dat is gestyled met bovenstaande CSS-code. Deze CSS-code past het uiterlijk aan van verschillende belangrijke elementen in je Contact Form 7-formulier. Het target alle tekstvelden, e-mailvelden en tekstgebieden, en geeft ze een lichtgrijze rand, afgeronde hoeken, comfortabele padding en een consistente breedte voor een frisse, moderne uitstraling.
De code stijlt ook de verzendknop met een groene achtergrond, witte tekst, afgeronde randen en een vet, goed leesbaar lettertype. Wanneer gebruikers over de verzendknop bewegen, wordt de achtergrondkleur donkerder groen, wat interactieve feedback geeft.
CSS toevoegen: klassieke thema's versus blokthema's
De stappen in deze gids voor het stylen van Contact Form 7-formulieren met CSS zijn bedoeld voor klassieke thema's in WordPress. Klassieke thema's, zoals het populaire Astra, gebruiken de Customizer, waar je eenvoudig aangepaste CSS kunt toevoegen onder het gedeelte "Extra CSS". Dit maakt het eenvoudig om je formulieren te stylen en wijzigingen direct te zien.
Als je site echter een blokthema gebruikt (soms ook wel een Full Site Editing- of FSE-thema genoemd), is het proces anders. Blokthema's bevatten niet altijd standaard de Customizer of het veld "Extra CSS". In plaats daarvan gebruik je de Site Editor om ontwerpwijzigingen aan te brengen. Je kunt globale stijlen voor kleuren, typografie en lay-out aanpassen, maar het toevoegen van willekeurige aangepaste CSS is niet altijd beschikbaar in de gebruikersinterface.
Wat te doen als je een blokthema gebruikt
Open je WordPress-dashboard en ga naar Weergave > Editor (de Site Editor).
Zoek in de Site Editor naar het paneel Stijlen (het half-gevulde cirkelpictogram).
Sommige blokthema's bieden nu een optie "Extra CSS" in het paneel Stijlen, maar dit hangt af van je thema en WordPress-versie.
Zie je geen optie om aangepaste CSS toe te voegen, dan kun je een plugin zoals WPCode gebruiken om sitebreed aangepaste CSS toe te voegen. WPCode is gebruiksvriendelijk voor beginners en werkt met elk thema, zodat je je formulieren toch kunt stylen, zelfs als je thema geen directe CSS-bewerking in de gebruikersinterface ondersteunt. Houd er wel rekening mee dat het installeren van deze plugin invloed kan hebben op de stijl van andere reeds bestaande formulieren op je website.
Aanvullende bronnen
Het stylen van je Contact Form 7-formulieren is een eenvoudige maar krachtige manier om de gebruikerservaring van je site te verbeteren. Met slechts een paar regels CSS kun je je formulieren eruit laten zien en aan laten voelen als een natuurlijk onderdeel van je merk.