Så här justerar du CSS-kontaktformulär 7

Innehåll

vägbeskrivning
tips
varning
Vad du behöver

Kontaktformulär 7 är ett plugin för WordPress Publishing Platform som gör det möjligt för användare att snabbt skapa egna kontaktformulär. Även om formulär är lätta att skapa och distribuera, är deras fält minimal anpassade, vilket möjliggör integration med vilken webbplats som helst. Skapa dina anpassade stilar och implementera dem i formulärfälten som genereras av det här plugin.

vägbeskrivning

Anpassa stilen i kontaktformulär 7-fälten med hjälp av CSS (Comstock / Comstock / Getty Images)

Öppna temat stilarket på din WordPress och bläddra till slutet. Skapa ett annoterat område så att du enkelt kan hitta din kod. exempel:

/ Det är här min egen CF7-kod startar /
Anpassa stilen på dina fält och textområden. För att göra detta, skapa en post i ditt stilark. exempel:

.wpcf7 inmatning [typ = "text"], .wpcf7 areadotexto {}

Lägg till gränser, bakgrunder, vadderingar och storlekar av textelement. Exempel:

.wpcf7 inmatning [typ = "text"] {bakgrund: ingen upprepa bläddra 0 0 # F9F9F9; gräns: 1px fast # 8E9BA9; vaddering: 5px; bredd: 200px; }
Anpassa stilar i rullgardinsmenyerna och valmenyerna.För att göra detta, skapa en post i ditt stilark. exempel:

.wpcf7 input [type = "select"] {

}

Anpassa markeringsfälten som liknar textfälten. Urvalsfälten är inte lika stora som textfälten, så lägg till några extra pixlar till din bredd. exempel:

.wpcf7 input [typ = "selected"] {bakgrund: ingen upprepa bläddra 0 0 # F9F9F9; gräns: 1px fast # 8E9BA9; vaddering: 5px; bredd: 210px; }
Anpassa stilen på din inlämningsknapp. För att göra detta, skapa en post i ditt stilark. exempel:

.wpcf7 input [typ = "submission"] {

}

Anpassa inläggsknappen för att komplettera utseendet på din webbplats (det borde fortsätta att sticka ut från bakgrunden). Exempel på en röd sändningsknapp:

.wpcf7 input [type = "submission"] {bakgrundsfärg: # 990000; gräns: 4px fast # B34040; färg: #FFFFFF; }
Spara ändringarna i ditt stilark och överför data till temamappen.

tips

Prova olika stilar och olika kantfärger.
Gör en ny kontroll av formulären i Firefox, Safari och Internet Explorer, eftersom varje webbläsare ger lite olika inmatningsfält.

varning

Lägg till anpassad CSS till temat stilark och inte plugin stilark. Om du gör det, kan det hända att anpassningen av filerna i din mapp gå förlorad när plugin uppdateras.