Hoe CSS-contactformulier aan te passen 7

Video: How To Add Custom CSS To Contact Form 7 In WordPress

Inhoud

routebeschrijving
tips
waarschuwing
Wat je nodig hebt

Contactformulier 7 is een plug-in voor WordPress-publicatieplatform waarmee gebruikers snel aangepaste contactformulieren kunnen maken. Hoewel formulieren eenvoudig kunnen worden gemaakt en geïmplementeerd, zijn hun velden minimaal aangepast, waardoor integratie met elke site mogelijk is. Maak uw aangepaste stijlen en voer ze uit in de formuliervelden die door deze plug-in worden gegenereerd.

routebeschrijving

Pas de stijl van de velden Contactformulier 7 aan met behulp van CSS (Comstock / Comstock / Getty Images)

Open het themastijlblad van je WordPress en scrol naar het einde. Maak een geannoteerd gebied, zodat u uw code eenvoudig kunt vinden. voorbeeld:

/ Dit is waar mijn aangepaste CF7-code start /
Pas de stijlen van uw velden en tekstgebieden aan. Hiertoe maakt u een item in uw stylesheet. voorbeeld:

.wpcf7 invoer [type = "tekst"], .wpcf7 areadotexto {}

Randen, achtergronden, opvulling en formaten van tekstelementen toevoegen. Voorbeelden:

.wpcf7 invoer [type = "tekst"] {background: none repeat scroll 0 0 # F9F9F9; rand: 1px vast # 8E9BA9; opvulling: 5px; breedte: 200 px; }
Pas de stijlen van vervolgkeuzemenu's en selectiemenu's aan.Hiertoe maakt u een item in uw stylesheet. voorbeeld:

.wpcf7 invoer [type = "select"] {

}

Pas de selectievelden aan die vergelijkbaar zijn met de tekstvelden. De selectievelden zijn niet zo breed als de tekstvelden, dus voeg een paar extra pixels toe aan uw breedte. voorbeeld:

.wpcf7 input [type = "selected"] {background: none repeat scroll 0 0 # F9F9F9; rand: 1px vast # 8E9BA9; opvulling: 5px; breedte: 210 px; }
Pas de stijl van uw verzendknop aan. Hiertoe maakt u een item in uw stylesheet. voorbeeld:

.wpcf7 invoer [type = "verzending"] {

}

Pas de verzendknop aan om het uiterlijk van uw site aan te vullen (deze moet blijven opvallen vanaf de achtergrond). Voorbeeld van een rode verzendknop:

.wpcf7 invoer [type = "verzending"] {achtergrondkleur: # 990000; rand: 4px vast # B34040; kleur: #FFFFFF; }
Sla de wijzigingen op in uw stylesheet en breng de gegevens over naar de themamap.

tips

Probeer verschillende stijlen en verschillende randkleuren uit.
Voer een nieuwe controle uit van de formulieren in Firefox, Safari en Internet Explorer, omdat elke browser iets verschillende invoervelden biedt.

waarschuwing

Voeg aangepaste CSS toe aan de stylesheet van uw thema en niet aan de stylesheet van de plug-in. Als u dit doet, kan de aanpassing van de bestanden in uw map verloren gaan wanneer de plug-in wordt bijgewerkt.