Cum să personalizați stilul formularului de contact 7 pentru a se potrivi site-ului dvs. web

Cu peste un milion de instalări active, Formularul de contact 7 este de departe unul dintre cele mai populare pluginuri WordPress vreodată. Popularitatea sa are probabil mult de-a face cu adevărul din spatele descrierii sale: „Simplu, dar flexibil”.

Formularul de contact 7 vă permite să creați mai multe formulare de contact folosind altceva decât un simplu markup HTML (pe care îl generează pentru dvs.). Odată creat, fiecare formular poate fi implementat rapid prin plasarea codului scurt corespunzător unde doriți să apară formularul; în pagina, postarea sau zona widgetului. Mesajele trimise prin intermediul formularelor sunt trimise la adresa de e-mail furnizată în setările pluginului, iar spamul este combătut prin asistență pentru CAPTCHA și Akismet.

Formularul de contact 7 este atât de simplu încât pare literalmente că oricine îl poate folosi în mod eficient. Și stilul este destinat să fie simplu. Dar poate prea simplu pentru unii. În mod implicit, pluginul Formular de contact 7 nu își modelează formularele. Orice stil pe care îl au este un rezultat al stilurilor implicite prezente în foaia de stil a unei teme WordPress.

De obicei, rezultă ceva destul de simplu, ca acesta:

Din păcate, acest tip de formular, deși simplu și flexibil, poate să nu fie la fel de frumos conceput ca celelalte elemente de pe site-ul web. Lăsând mulți utilizatori altfel fericiți care caută alternative la Formularul de contact 7 cu mai multe opțiuni de stil. Din fericire, însă, cu doar un pic de CSS, nu este necesară nicio alternativă pentru plugin.

În postarea de astăzi voi împărtăși o serie de sfaturi care vor deschide o gamă largă de posibilități de stilare a Formularului de contact 7 pentru oricine, folosind orice temă.

Cum să personalizați stilul formularului de contact 7 pentru a se potrivi site-ului dvs. web

Abonați-vă la canalul nostru Youtube

Unde să vă editați formularul de contact 7 CSS (și de ce)

Este important ca atunci când adăugați CSS personalizat să nu îl adăugați la foaia de stil a Formularului de contact 7 sau a temei părinte. Orice modificări sau adăugiri pe care le faceți acolo vor fi suprascrise de îndată ce tema și / sau pluginul sunt actualizate.

În schimb, veți dori să adăugați CSS de mai jos la CSS-ul temei copilului dvs. Puteți utiliza, de asemenea, caracteristica CSS personalizată pe Jetpack sau, dacă tema dvs. oferă o secțiune în panoul său de administrare pentru CSS personalizat, o puteți utiliza și pe aceasta.

Ok, acum că știm unde să plasăm stilurile pe care le vom trece mai jos, să începem!

Cum se creează stiluri de formulare pe site

Să începem prin a face câteva editări generale care se vor aplica la întregul formular. Putem face acest lucru folosind selectorul de clasă .wpcf7 și apoi adăugând stiluri sub el.

(Aș dori, de asemenea, să vă sugerez cu insistență să plasați titlul comentat pe care l-am scris mai jos în foaia de stil pentru a indica de unde încep stilurile dvs. Formular de contact 7).

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

După adăugarea codului de mai sus în foaia de stil, fiecare formular pe care îl creați cu formularul de contact 7 va avea fundalul și stilurile de margine pe care tocmai le-ați definit. Mai jos este un exemplu.

După cum puteți vedea, există câteva probleme de spațiere. Pentru a remedia acest lucru, veți dori să reglați marginile dintre margine și elementele de formă interioare. Puteți face acest lucru cu codul de mai jos.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

Pe site-ul meu de testare, a rezultat următoarele:

Notă: aceste stiluri pot afecta formularele dvs. în moduri ușor diferite datorită faptului că cel mai probabil lucrăm cu teme diferite. Asta nu înseamnă că acest cod nu va funcționa pentru dvs., ci doar că este posibil să trebuiască să modificați puțin numerele pentru a face lucrurile potrivite pentru site-ul dvs.

Cum se creează stiluri de câmp pentru formularul pe site

Una dintre cele mai frecvente solicitări pe care oamenii le au atunci când vine vorba de stilul Formularului de contact 7 este modul în care pot ajusta lățimea câmpurilor. În special zona de mesaje care nu se extinde foarte departe.

Codul de mai jos va extinde zona mesajului la lățimea dorită (atunci când este ajustată). Eu l-am setat pe al meu în exemplu pentru 95%, deoarece asta arăta cel mai bine în cazul meu de utilizare imaginat. Îl puteți seta și pentru a se potrivi nevoilor dvs. - folosind un procent sau un număr fix de pixeli.

.wpcf7-textarea {

width: 85%;

}

Puteți regla și lățimea celorlalte câmpuri reglând selectorul clasei de intrare .

.wpcf7 input {

width: 50%;

}

Dacă nu doriți să vă ajustați toate câmpurile de introducere cu aceleași criterii, puteți descrie un pic selectând doar pe cei care vă interesează. În exemplul de mai jos, am ales să-mi schimb câmpurile de text, astfel încât butonul meu de trimitere nu este, de asemenea, afectat.

.wpcf7-text {
width: 50%;
}

După toate modificările de mai sus, am putut să modelez formularul pe care îl vedeți mai jos.

Personal, nu am vrut să-mi schimb culoarea butonului, dar cred că este cel mai probabil o altă dorință comună. Deci, dacă doriți să modificați culoarea butonului, puteți utiliza CSS de mai jos pentru a experimenta.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Cu aceste biți de CSS la locul lor, fiecare formular creat cu Formularul de contact 7 va arăta ca imaginea finală de mai sus. Dar ce se întâmplă atunci când vrei ca o formă în special să arate diferit de toate celelalte?

Cum să stilizați un formular specific

Obținerea ID-ului CSS specific necesar pentru a face editări de stil într-un anumit formular poate fi un pic deranjant, dar este posibil cu o mică aranjare.

Primul lucru pe care vrei să îl faci este să adaugi codul scurt al formularului pe site-ul tău și să îl previzualizezi. (Veți observa că în cadrul acestui shortcode există un număr pentru ID - dar acesta nu este de fapt ID-ul complet de care veți avea nevoie.)

Apoi, utilizând funcția de inspectare a elementelor Google Chrome sau ceva similar într-un alt browser, aruncați o privire asupra codului formularului. Folosind aceasta veți găsi ID-ul formularului complet.

În cazul meu, numărul de identificare din codul meu scurt era 4407 . ID-ul complet s-a dovedit a fi wpcf7-f4407-p4405-o1 . Ceea ce însemna că aș putea face modificări suplimentare, doar la acel formular specific, folosind codul de mai jos cu diferite criterii care diferă de setările mele la nivel de site.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Cum să stilizați câmpuri specifice

Puteți face același lucru cu câmpuri specifice. În loc să urmăriți o anumită clasă CSS sau un ID în browserul dvs., tot ce trebuie să faceți este să îl adăugați în generatorul de formulare.

Când generați o etichetă pentru a o plasa în generatorul de formulare, veți observa că există două opțiuni pentru crearea unui ID, o clasă sau ambele.

În acest exemplu, am ales să creez o clasă numită custom-field . Dacă faceți același lucru (sau ceva similar), veți putea să stilizați doar acel câmp folosind noul dvs. ID (sau clasă) așa cum am mai jos.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Cum se creează machete de formular personalizate pentru casetele de selectare și butoanele radiale

În mod implicit, casetele de selectare și razele se afișează de la stânga la dreapta.

Dar, din cauza preferinței personale sau a unui caz de utilizare specific, în care afișarea lor de sus în jos ar putea fi preferabilă, puteți utiliza una dintre cele două opțiuni de mai jos.

Pentru a afișa casetele de selectare sau butoanele radiale de sus în jos și în stânga, utilizați acest lucru.

.wpcf7-list-item {
display: block;
}

Pentru a afișa casetele de selectare și butoanele radiale de sus în jos și în dreapta, utilizați acest lucru. De asemenea, asigurați-vă că, atunci când generați eticheta pentru această opțiune, alegeți caseta de selectare „etichetați mai întâi”.

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Sfat bonus: Cum să eliminați titlurile de câmp și să utilizați textul substituent

Acest sfat nu necesită utilizarea CSS ca celelalte de mai sus, ci mai degrabă o simplă modificare a marcajului utilizat în formularul de formular 7 de contact.

Uneori nu este necesar să aveți titluri de câmp, mai ales atunci când puteți introduce text substituent în câmpurile în sine, care să explice ce informații aparțin acolo.

Dacă acesta este cazul pe site-ul dvs., tot ce trebuie să faceți este să ștergeți titlurile din formatorul de formulare și să adăugați text de substituție, așa cum am făcut în exemplul de mai jos.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Rezultatul este o formă mai curată, cu mai puțin dezordine.

In concluzie

Sper că am arătat în exemplele de mai sus că pluginul Formular de contact 7 este foarte personalizabil. Este adevărat, necesită un pic de joc, dar pentru un plugin gratuit care ar putea fi de așteptat.

Cred că lipsa opțiunilor de stil în mod implicit este o mare parte din motivul pentru care pluginul funcționează atât de bine pentru atât de mulți. Deci, este corect ca oricine să obțină multă valoare de la acesta, care dorește mai mult stil să se angajeze câteva minute să introducă o versiune a unuia dintre exemplele de cod de mai sus.

Aveți propriile sfaturi despre stilul formularului de contact 7? Ați dori să distribuiți preferințele pe care le-ați folosit? Trimite-ne o linie în comentariile de mai jos!

Miniatură articol prin Dmitry Lemon5ky // shutterstock.com