Cum să stilizezi formularele în Contact Form 7 folosind CSS în WordPress
Vrei ca formularele tale WordPress să arate la fel de bine ca restul site-ului? Cu Contact Form 7, ai control total asupra aspectului formularului folosind CSS. Acest ghid te conduce pas cu pas prin procesul de stilizare a formularelor Contact Form 7, permițându-ți să creezi o experiență coerentă și de brand pentru vizitatorii tăi.
De ce să stilizezi formularele Contact Form 7?
Contact Form 7 este unul dintre cele mai populare pluginuri WordPress pentru crearea de formulare—dar aspectul său implicit este simplu. Stilizarea personalizată în temele clasice WordPress îți permite să:
Potrivește brandingul site-ului tău
Îmbunătățește utilizabilitatea și accesibilitatea
Fă formularele mai atractive și mai profesionale
Pasul 1: Identifică selectorii CSS ai formularului tău
Înainte să începi stilizarea, trebuie să știi ce selectori CSS vizează elementele formularului tău.
Fiecare formular Contact Form 7 este încadrat într-o clasă unică: .wpcf7
Elementele individuale precum câmpurile input, textarea și butoanele de trimitere folosesc taguri HTML standard
Pasul 2: Adaugă CSS personalizat pe site-ul tău WordPress
Poți adăuga CSS în două moduri principale:
Prin intermediul Customizer-ului:
Mergi la Aspect > Personalizează > CSS suplimentar și lipește stilurile tale.
NOTĂ: Adaugă CSS-ul tău în fișierul style.css al temei copil pentru personalizări avansate.
Pasul 3: Scrie CSS-ul tău personalizat
Iată câteva exemple comune pentru a începe, folosind componentele „text” și „submit” ale formularului ca exemplu:
Stilizează toate formularele Contact Form 7
.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;
}
Pseudoclasele în CSS, precum :hover, îți permit să stilizezi elementele în funcție de starea lor sau de interacțiunea utilizatorului. De exemplu, pseudoclasa :hover aplică stiluri când utilizatorul mută cursorul peste un buton sau un câmp. Aceasta este folosită frecvent pentru a evidenția butoanele sau pentru a le schimba culoarea la trecerea mouse-ului, făcând formularele mai interactive și mai atractive vizual. Alte pseudoclase utile includ :focus (când un input este selectat) și :active (când un element este apăsat). Folosirea pseudoclasei ajută la îmbunătățirea experienței utilizatorului, oferind feedback imediat pe măsură ce vizitatorii interacționează cu formularul tău.
Vizează un formular specific
Fiecare formular are un ID unic, precum #wpcf7-f123-o1. Folosește-l pentru a stiliza doar acel formular:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
Înlocuiește f123-o1 cu ID-ul real al formularului tău. Poți găsi ID-ul unic al formularului vizualizând pagina unde este integrat formularul Contact Form 7, făcând clic dreapta pe formular și selectând „Inspectează” (sau „Inspectează elementul”) în browser. Caută <div>-ul cu clasa .wpcf7—ID-ul va apărea ca id="wpcf7-f123-o1" în codul HTML. Folosește acest ID în selectorul CSS pentru a viza doar acel formular specific.
Pasul 4: Folosește clasele integrate ale Contact Form 7
Contact Form 7 adaugă automat clase elementelor, făcând țintirea și mai ușoară. De exemplu:
.wpcf7-form-control – Toate controalele formularului
.wpcf7-submit – Butonul de trimitere
Poți adăuga și propriile tale clase în editorul de formulare pentru și mai mult control.
Exemplu
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Pasul 5: Previzualizează și ajustează
După ce ai salvat CSS-ul, reîncarcă site-ul pentru a vedea modificările. Folosește instrumentul de inspecție al browserului pentru a ajusta stilurile în timp real înainte de a le copia pe site. Asigură-te că golești cache-ul site-ului după modificări pentru ca actualizările să fie vizibile vizitatorilor.
Iată exemple înainte și după ale unui formular pe un site demo, unde am folosit codul CSS din Pasul 3 pentru a face chenarul fiecărui câmp de formular albastru.
Sfaturi rapide pentru o stilizare mai bună a formularelor
Fă-l accesibil: Asigură un contrast bun de culori și dimensiuni lizibile ale fontului
Folosește spațierea: Adaugă padding și margini pentru un aspect curat și aerisit
Evidențiază erorile: Stilizează mesajele de eroare cu o culoare clară (precum roșu) pentru a ajuta utilizatorii să corecteze greșelile
Testează pe mobil: Asigură-te că formularele tale arată bine pe toate dispozitivele
Depanare
Dacă stilurile tale nu apar, încearcă acești pași:
Golește cache-ul browserului și al site-ului – Uneori fișierele din cache împiedică afișarea noului CSS. Dacă folosești un plugin de cache sau găzduire administrată, golește și acele cache-uri.
Verifică problemele de specificitate CSS – Dacă stilurile tale nu se aplică, încearcă să faci selectorii mai specifici pentru a suprascrie stilurile existente.
Asigură-te că editezi fișierul sau secțiunea CSS corectă – Verifică de două ori că adaugi codul în locul potrivit, cum ar fi panoul CSS suplimentar, style.css al temei copil sau un plugin CSS personalizat.
Verifică clasele CSS pentru greșeli de scriere sau erori – Caută denumiri de clase scrise greșit, spații inutile sau utilizarea accidentală a unei clase greșite. De asemenea, verifică dacă clasa pe care o vizezi există efectiv în HTML-ul formularului tău.
Verifică clasele duplicate sau conflictuale – Asigură-te că clasa pe care o folosești nu este deja aplicată în altă parte cu stiluri diferite care ar putea suprascrie modificările tale.
Urmează bunele practici generale – Folosește denumiri clare și consecvente pentru clase, termină fiecare regulă CSS cu punct și virgulă și închide întotdeauna corect blocurile de cod cu acoladă (}).
Revizuirea atentă a codului pentru aceste probleme comune te va ajuta să te asiguri că stilurile personalizate apar corect pe site-ul tău.
Exemplu: CSS personalizat complet pentru un formular Contact Form 7
.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;
}
Iată un exemplu de formular stilizat cu codul CSS de mai sus. Acest cod CSS personalizează aspectul mai multor elemente cheie din formularul tău Contact Form 7. Vizează toate câmpurile text, câmpurile email și zonele de text, oferindu-le o margine gri deschis, colțuri rotunjite, padding confortabil și lățime constantă pentru un aspect curat și modern.
Codul stilizează și butonul de trimitere cu fundal verde, text alb, margini rotunjite și font îngroșat, ușor de citit. Când utilizatorii trec cu mouse-ul peste butonul de trimitere, culoarea de fundal devine un verde mai închis, oferind feedback interactiv.
Adăugarea CSS: teme clasice vs teme pe blocuri
Pașii din acest ghid pentru stilizarea formularelor Contact Form 7 cu CSS sunt concepuți pentru temele clasice din WordPress. Temele clasice, precum popularul Astra, folosesc Customizer-ul, unde poți adăuga ușor CSS personalizat în secțiunea „CSS suplimentar”. Astfel, poți stiliza formularele și vedea modificările în timp real.
Totuși, dacă site-ul tău folosește o temă pe blocuri (numită uneori Full Site Editing sau temă FSE), procesul este diferit. Temele pe blocuri nu includ întotdeauna Customizer-ul sau câmpul „CSS suplimentar” în mod implicit. În schimb, folosești Editorul de site pentru a face modificări de design. Deși poți ajusta stilurile globale pentru culori, tipografie și layout, adăugarea de CSS personalizat nu este întotdeauna disponibilă în interfață.
Ce să faci dacă folosești o temă pe blocuri
Deschide panoul de administrare WordPress și mergi la Aspect > Editor (Editorul de site).
În Editorul de site, caută panoul Stiluri (pictograma cerc pe jumătate umbrită).
Unele teme pe blocuri oferă acum o opțiune „CSS suplimentar” în panoul Stiluri, dar acest lucru depinde de temă și de versiunea WordPress.
Dacă nu vezi o opțiune de a adăuga CSS personalizat, poți folosi un plugin precum WPCode pentru a adăuga CSS personalizat pe tot site-ul. WPCode este ușor de folosit pentru începători și funcționează cu orice temă, asigurându-te că poți stiliza formularele chiar dacă tema nu permite editarea directă a CSS-ului din interfață. Ține cont că instalarea acestui plugin poate afecta stilul altor formulare deja existente pe site-ul tău.
Resurse suplimentare
Stilizarea formularelor Contact Form 7 este o modalitate simplă, dar puternică, de a îmbunătăți experiența utilizatorului pe site-ul tău. Cu doar câteva linii de CSS, poți face ca formularele să arate și să se simtă ca o parte naturală a brandului tău.