Cum să ajustați formularul de contact CSS 7

Conţinut

• instrucțiuni de ghidare
• sfaturi
• avertisment
• Ce ai nevoie

Formularul de contact 7 este un plugin pentru platforma de publicare WordPress, care permite utilizatorilor să creeze rapid formulare de contact personalizate. Deși formele sunt ușor de creat și implementate, câmpurile lor sunt foarte puțin personalizate, permițând integrarea cu orice site. Creați stilurile personalizate și implementați-le în câmpurile de formulare generate de acest plugin.

instrucțiuni de ghidare

Personalizați stilul câmpurilor formularului de contact 7 utilizând CSS (Comstock / Comstock / Getty Images)

1. Deschideți foaia de stil a WordPress și derulați până la capăt. Creați o zonă adnotată, astfel încât să puteți localiza cu ușurință codul. exemplu:

   / Aici începe codul CF7 personalizat /

2. Personalizați stilurile câmpurilor și ariilor de text. Pentru aceasta, creați o intrare în foaia de stil. exemplu:

   .wpcf7 de intrare [type = "text"], .wpcf7 areadotexto {}

   Adăugați margini, fundaluri, elemente de umplutură și dimensiuni ale elementelor de text. Exemple:

   .wpcf7 input [type = "text"] {fundal: nici o repetare scroll 0 0 # F9F9F9; frontieră: 1px solid # 8E9BA9; padding: 5px; lățime: 200px; }

   
   

3. Personalizați stilurile meniurilor drop-down și ale selecției.Pentru aceasta, creați o intrare în foaia de stil. exemplu:

   .wpcf7 input [type = "select"] {

   }

   Personalizați câmpurile de selecție similare câmpurilor de text. Câmpurile de selecție nu sunt la fel de largi ca câmpurile de text, deci adăugați câțiva pixeli în plus la lățimea dvs. exemplu:

   .wpcf7 de intrare [type = "selectat"] {fundal: nici o repetare scroll 0 0 # F9F9F9; frontieră: 1px solid # 8E9BA9; padding: 5px; lățime: 210px; }

4. Personalizați stilul butonului dvs. de trimitere. Pentru aceasta, creați o intrare în foaia de stil. exemplu:

   .wpcf7 input [type = "submission"] {

   }

   Personalizați butonul de trimitere pentru a completa aspectul și aspectul site-ului dvs. (ar trebui să continue să se evidențieze din fundal). Exemplu de buton roșu de trimitere:

   .wpcf7 de intrare [type = "submission"] {background-color: # 990000; frontieră: 4px solid # B34040; culoare: #FFFFFF; }

   
   

5. Salvați modificările din foaia de stil și transferați datele în dosarul tematic.

sfaturi

• Încercați diferite stiluri și diferite culori de margine.
• Faceți o verificare nouă a formularelor din Firefox, Safari și Internet Explorer, deoarece fiecare browser oferă câmpuri de intrare ușor diferite.

avertisment

• Adăugați CSS personalizat în foaia de stil a temei și nu în foaia de stil a pluginului. Dacă faceți acest lucru, atunci când pluginul este actualizat, personalizarea fișierelor din folderul dvs. poate fi pierdută.

Ce ai nevoie

• Accesați foaia de stil WordPress