Blog

Contact Form 7 CSS stijling tips

Contact Form 7 is een populaire WordPress plugin om formulieren te maken en te beheren op je website. Maar soms wil je misschien de standaard layout van de formulieren aanpassen, bijvoorbeeld om invoervelden op dezelfde rij te tonen. Hoe kun je dat doen met CSS?

In dit artikel leg ik je uit hoe je Contact Form 7 formulieren kunt stijlen met CSS, zodat je meer controle hebt over het uiterlijk en de indeling van je formulieren. Ik geef je ook een paar simpele voorbeelden van CSS code die je kunt gebruiken om invoervelden op dezelfde rij te zetten en responsive kunt maken.

Hoe werkt Contact Form 7?

contact form 7 wordpreess voorbeeld

Contact Form 7 maakt gebruik van shortcodes om formulieren te genereren. Elke shortcode komt overeen met een invoerveld of een ander element van het formulier, zoals een label, een knop of een bericht. Je kunt de shortcodes aanpassen met verschillende opties, zoals de naam, het type, de waarde, de klasse of de id van het invoerveld.

Als je een Contact Form 7 formulier toevoegt aan een pagina of een bericht, wordt de shortcode vervangen door HTML code die het formulier weergeeft. De HTML code bevat ook de klasse of de id die je hebt opgegeven in de shortcode, zodat je deze kunt gebruiken om het invoerveld te stijlen met CSS.

Hoe kun je Contact Form 7 formulieren stijlen met CSS?

contact form 7 voorbeeld formulier

Om Contact Form 7 formulieren te stijlen met CSS, heb je drie opties:

In alle gevallen moet je de juiste selectors gebruiken om de invoervelden of andere elementen van het formulier te targeten. Je kunt hiervoor de klasse of de id gebruiken die je hebt opgegeven in de shortcode, of de standaard selectors die Contact Form 7 gebruikt, zoals .wpcf7-form, .wpcf7-text, .wpcf7-submit, etc.

Welke actions moet je instellen?

Om Contact Form 7 formulieren te stijlen met CSS, hoef je in principe geen speciale actions in te stellen. Je hoeft alleen maar de CSS code toe te voegen aan het bestand. Echter Contact Form 7 voegt zelf ook HTML tags toe die in conflict kunnen komen met jouw CSS oplossing. Als dit gebeurd kun je de HTML tags van CF7 uitzetten met door in je thema de volgende action toe te voegen in je functions.php.

				
					add_filter( 'wpcf7_autop_or_not', '__return_false' );

				
			

Hoe kun je invoervelden stijlen met CSS?

Wil je ook de invoervelden in stijlen dan kun je dit via CSS doen om de velden aan te passen aan je ontwerp. De belangrijkste velden zijn bij een formulier een invoerveld, een button en een dropdown. De CSS-code hieronder is een simpel voorbeeld hoe je deze velden kun stijlen.

				
					/*tekst boven het formulier*/
.wpcf7 .wpcf7-list-item-label{
	line-height: 1.4;
}
/*Algemene veld stijling */
.wpcf7 .wpcf7-form-control{
    font-family:inherit;
	font-weight:normal;
	color:inherit;
}
/*invoervelden standaard*/
 .wpcf7 input[type=text],
 .wpcf7 input[type=date],
 .wpcf7 input[type=email],
 .wpcf7 input[type=number],
 .wpcf7 input[type=password],
 .wpcf7 input[type=search],
 .wpcf7 input[type=tel],
 .wpcf7 input[type=url],
 .wpcf7 select,
 .wpcf7 textarea {
	 width: 100%;
	 border: solid 1px black;
	 border-radius: 3px;
	 padding: 0.5rem 1rem;
 }
 /*dropdown*/
 .wpcf7 select.wpcf7-select{
	 background:none;
	 padding:10px;
 }
 /*textarea*/
 .wpcf7 textarea.wpcf7-textarea{
	 background:none;
	 padding:10px;
 }
 /*button*/
 .wpcf7 input[type=submit].wpcf7-submit {
	 border: 1px solid black;
	 background-color: white;
     color: black;
	 padding: 10px 50px;
	 border-radius: 5px;
 }
 .wpcf7 input[type=submit].wpcf7-submit:hover{
	 color: white;
	 background-color:black;
 }
				
			

Hoe kun je invoervelden op dezelfde rij zetten met CSS?

Om invoervelden op dezelfde rij te zetten met CSS, kun je gebruik maken van de eigenschap display: flex; ook wel flexbox genoemd. Meer informatie hierover vind je in dit artikel over flexbox. Deze eigenschap zorgt ervoor dat de elementen naast elkaar worden geplaatst, in plaats van onder elkaar. Je moet ook de breedte en de marge van de elementen aanpassen, zodat ze passen in de beschikbare ruimte.

Stap 1: De HTML in het formulier zelf

Maak een container tag aan (bijv. een div) en zet alle formulier velden die je op dezelfde rij wilt hebben binnen deze container tag. Zet om elke formulier tag een veld tag (bijv. span).  Dit ziet er dan als volgt uit:

				
					<div class="container">
<span>Aanhef * [select* keuze "Mevrouw" "De heer"]</span>
<span>Voornaam * [text* first-name placeholder "Uw voornaam"]</span>
<span>Achternaam * [text* last-name placeholder "Uw achternaam"]</span>
</div>

				
			

Stap 2: De Flexbox CSS

Maak nu de container tag flex. in je CSS en  zorg voor voldoende ruimte tussen de velden. Dit kun je doen met de volgende CSS.

				
					.wpcf7 .container{
    display:flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items:stretch;
	padding:10px 0;
}
.wpcf7 .container > span{
    padding-right:20px;
	display:inline-block;
	width:100%;
}
.wpcf7 .container > span:last-child{
    padding-right:0;
}
				
			

Speel met de padding om de ruimte tussen de rijen en velden naar jouw wensen te stijlen.

Stap 3: Maak de rijen geschikt voor mobiel.

Maak nu de container tag responsive. Dit kun je via een media-query en de flex direction van de flexbox aan te passen naar column. Op deze manier komen de velden onder elkaar te staan.  Zorg wel dat je de padding/marge tussen de rijen en velden ook mee stijlt.

				
					/* Optionele stijlen voor kleinere schermen */
@media only screen and (max-width: 768px) {
    .wpcf7 .container {
    	flex-direction: column;
    	margin: 0 10px;
    }
    
    .wpcf7 .container > span {
    	padding-right: 0;
    }
}
				
			

Conclusie

In dit artikel heb ik je laten zien hoe je Contact Form 7 formulieren kunt stijlen met CSS, zodat je meer controle hebt over het uiterlijk en de indeling van je formulieren. Ik heb je ook een paar voorbeelden gegeven van hoe je invoervelden op dezelfde rij kunt zetten met CSS.

Ik hoop dat je dit artikel nuttig hebt gevonden en dat je nu weet hoe je Contact Form 7 formulieren kunt aanpassen naar je eigen wensen. Als je nog vragen of opmerkingen hebt, laat het me dan weten in de reacties hieronder.

Gerelateerde artikelen