7 Sontact aspect setare formă
Popular Formular de contact 7 plugin-ul nu diferă de frumusețe specială a forma standard pe acest lucru pentru mulți utilizatori, întrebarea este cum de a schimba aspectul. Asta este ceea ce face acum, încerc să vă dau o opțiune de versatil, care este potrivit pentru orice site.
Mai devreme am vorbit despre cum să instalați și să configurați formularul de contact 7. Acum nu vom vorbi despre ea, și trece imediat la schimbările necesare în proiectare.
File start deschis pentru a face ajustări, pentru a începe un pic tweak formularul nostru.
Adăugarea claselor la formularul Formular de contact 7.
Când deschidem formularul de editare, vom vedea ceva de genul imaginea de mai jos:
Acest formular de feedback va arata astfel:
Plictisitor, nu este proporțională, sincer nu frumos.
Pentru a schimba aspectul formelor pe care trebuie să faci ceva de lucru cu stiluri, dar pentru a începe să adăugați mai multe clase într-un șablon de formular. Pentru această formă deschisă pentru editare (așa cum este arătat mai sus) și adaugă următoarele clase:
Scrie un pic, deci este dificil de a face greșeli. În rețea, veți găsi, probabil, sfaturi, fără adăugarea de aplicații și clase. Lucru este că, fără adăugarea de clase pot fi câteva probleme. De exemplu, poate doriți să adăugați mai multe forme pe site, acestea vor fi identice cu forma, și nu este întotdeauna convenabil, pentru aceasta este necesar să se folosească versiunea propusă de mine.
Clasele adăugat încă nimic nu sa schimbat, următorul pas este de a determina id-ul unui formular.
Determinați ID-ul formularului de pe pagina.
Mai întâi, trebuie să înțeleagă că aceeași formă va avea un cod de identificare diferit pe diferite pagini ale site-ului, astfel încât a făcut un plugin, se adaugă un parametru suplimentar pentru fiecare formă invocare. Acum vom analiza în detaliu.
În codul, în căutarea începutul formularului nostru, se pare ca acest lucru:
Aceasta este ceea ce va forma ID. Privind înapoi, voi arăta unele ID-ul are aceeași formă la o altă pagină.
După cum puteți vedea, identificatorul este diferit în doar câteva cifre. Pe aceasta trebuie mai întâi să decidă care pagină va fi amplasat sub formă, și numai apoi se trece la revizuirea stiluri.
Ei bine, se ia pasul următor, am definit id-ul, clasele noastre prescrise acum trece direct la o schimbare în aparență.
Styling formularul Formular de contact 7, fișierul style.css
Privind în perspectivă să spun că este puțin probabil ca opțiunea mă va găsi o propunere ideală. Faptul este că oricine citește acest lucru vrea să vadă forma sa este astfel ceea ce el reprezintă. Nu sunt un cititor de minte, și eu nu pot să placă tuturor, dar voi încerca să vă dau un sfat în cazul în care și în cazul în care să se uite și ce să se schimbe. Deci, iartă imediat posibil dezamăgire, nu există nici un panaceu, și trebuie să lucreze un pic.
Schimba culoarea de fundal, marjele, forma fontului.
După această lucrare du-te la stilurile. Prima schimbare (dacă este cazul), culoarea de fond a formei, ajustarea marjelor noastre, vom alege fontul și text culoarea dorită. Toate aceste setări vor fi efectuate știind ID-ul. Cum să-l, ne-am uitat la mai sus.
În primul rând se uite la fișierul style.css, adăugați primele reguli pentru forma ID-ul (trebuie să adăugați la partea de jos a fișierului), în cazul meu wpcf7-f172-P34-O1, de asemenea, aveți nevoie pentru a substitui identitatea:
# Wpcf7-f172-P34-O1 margin: 5px;
padding: 10px;
fundal: # B3AFAF;
font-family: Georgia, «Times New Roman», Times, serif;
color: # 000;
>
Considerăm acum toate detaliile:
- La început, s-au retras credite. Marjele exterioare (margine pentru a forma început) - margin: 5px, padding (de la început la elementele de formă interioare) -padding: 10px.
- Die turnare sau ei de fundal este determinată de un fond de proprietate: # B3AFAF, culoarea poate alege orice, pur și simplu înlocuiți valoarea.
- Noi determina familia de fonturi, dacă nu vreau să se înregistreze, nu se poate exclude (font-family: Georgia, «Times New Roman», Times, serif).
- Culoarea textului definește proprietatea de culoare, care se află acum în negru (culoare: # 000).
Cu acești parametri pot experimenta pentru tine, pentru a alege umplutură, culori și fonturi. Pentru a face acest lucru, aveți nevoie doar de a schimba valoarea, salvați noua opțiune pentru a actualiza pagina și pentru a vedea modificările. Nu-ți fie frică să experimentați, atunci nu se va rupe nimic, la cele mai multe stiluri, pur și simplu nu funcționează și puteți rezolva cu ușurință așa cum era.
Definim marginile dintre câmpurile, schimbarea cadrului.
Ne întoarcem la câmpurile noastre, adăugați padding:
# Wpcf7-f172-p34-o1 p margin: 5px;
>
Această umplutură în jurul marginilor câmpurilor care ar fi textul și blocurile nu sunt unite într-una singură.
Următorul pas va fi cadrul, voi da propria sa versiune, și puteți găsi pe net o mulțime de opțiuni pe care le plac și să le înlocuiască.
# Wpcf7-f172-P34-O1 de intrare, de frontieră textarea: 3px dublu # 000;
>
Pe partea de un pic mai în detaliu. Valoarea din această lățime 3px a cadrului, utilizarea dublu, dublu (dacă nu aveți nevoie, puteți șterge cuvântul), # 000 cadre de culori pot alege, de asemenea, propriul.
Poți salva modificările și uita-te la ceea ce ai. Apoi, trece direct la câmpurile și modifica dimensiunea și locația lor.
Schimbarea marginilor și locația acestora.
Anterior, ne-am schimbat formularul nostru și se adaugă o clasă, chiar acum este veni la îndemână. Lățimea implicită a câmpurilor este aceeași și nu este foarte frumos și confortabil. vom repara asta chiar acum. Adăugăm la dosarul nostru, următoarele reguli de stil:
nume-cf float: left;
padding: 2px;
>
.nume-cf lățime de intrare: 270px;
>
.thems-cf lățime de intrare: 100%;
>
.clar-cf clar: ambele;
>
.text-cf lățime textarea: 100%;
>
Acum analizează totul în detaliu:
- Prima clasa la care ne întoarcem numele-cf el face parte din câmpurile cu numele și e-mail. Pentru ei, liniuța din 2PX (padding: 2px) și înfășurați (float: stânga), care ar alinia cele două câmpuri într-un rând.
- În continuare vom modifica marjele optime, cerandu-le (pentru șablonul meu) dimensiunea 270px (intrare-.name cf
- Câmpul cu numele temei se va face pe întreaga lățime a formei, ca textul nu poate fi mai mult decât (intrare .thems-cf
- Blocul următor pe care am adăugat la formularul este de a anula fluxul (intrare .thems-cf).
- La fel ca în cazul precedent, un câmp cu mesaje text face întreaga lățime (text-cf textarea).
Puteți actualiza un fișier de stiluri si uita-te la schimbările, dacă este necesar, ajustați dimensiunea pentru a se potrivi nevoilor dumneavoastră.
Aliniați butonul „Trimite“ în mijloc, schimba fundalul și lat.
Ne întoarcem la butonul nostru, aliniați centrul și adăugați fundal:
submit-cf lățime: 200px; / * Lățime bloc * /
înălțime: 25px; / * Inaltime * /
margin: 0 auto; / * Indentați la stânga și la dreapta * /
>
.submit-cf lățime de intrare: 200px;
fundal: # 96B195;
>
In mod traditional explica ce este ceea ce:
- Prima regulă definim lățimea și înălțimea unității în care va fi postat cheia și pune-l în centrul formei.
- A doua regulă a culorii de fond butoanele specificate (fundal: # 96B195, dacă nu specificați va fi aceeași culoare ca și restul câmpului), setați lățimea butoanelor (lățime :. 200px este de dorit ca ar avea aceeași dimensiune ca și lățimea blocului, ceea ce ar fi butonul nu este Sa mișcat lateral).
Ne salva setările și să vedem ce avem:
Sunt de acord nu este șic, dar se pare în mod adecvat, în general, sub formă implicită, cred că efectul este evident. În orice caz, ne-am învățat să schimbe aspectul formularului Formular de contact 7.