Modele de formulare de contact 7.

Din lista derulantă, selectați elementul „Câmp text”.

Dacă este necesară orice funcție pe care o adăugați, bifați caseta 1 și nu uitați să scrieți acest lucru în descriere.

Puteți adăuga informații suplimentare în câmpul de introducere pentru a ușura completarea formularului. Bifați caseta 2 „Folosiți ca substituent?” și introduceți un indiciu în câmpul de lângă el. Când completați acest câmp din formular, textul indicativ va dispărea. Apoi urmați instrucțiunile pluginului. Rezultatul va fi un câmp ca acesta în forma finală:

Asigurați-vă că lipiți codul în șablonul de e-mail, altfel datele din acest câmp nu vor fi trimise pe e-mail! Acest lucru se aplică nu numai câmpurilor de text, ci și oricăror alte elemente.

E-mail

Folosit pentru a transfera adresa căsuței poștale a expeditorului în formular

URL

Vă permite să adăugați o adresă de site web în formular.

Număr de telefon

În acest câmp pot fi introduse numai numere

Număr (cutie rotativă)

Un câmp în care puteți seta cantitatea de ceva, de exemplu un produs. Cantitatea este setată folosind săgețile sus/jos.

Data

Inserează un calendar în formular cu posibilitatea de a selecta o dată. De exemplu, folosit pentru a rezerva camere de hotel. Data sosirii, data plecarii.

Câmp text

Da, nu fi surprins :) Un alt câmp de text. De data aceasta, acest câmp este mare și vă permite să scrieți mult text în el. De exemplu recenzii, comentarii.

Meniu derulant

Când există multe opțiuni pentru ceva și trebuie să selectați un articol dintr-o listă mare, de exemplu o listă de orașe, străzi, bunuri.

Lista trebuie plasată în câmpul Selecție, fiecare articol pe un rând nou.

Casete de selectare

O casetă de selectare sau casetă de selectare în jargonul dezvoltatorului este un element care creează un câmp pentru bifarea unei casete. Acest câmp are două stări - bifat sau nebifat. Posibilă selecție multiplă. Ele pot fi aranjate doar pe rând dacă bifați caseta de selectare „Face casetele de selectare mutual exclusive?”. atunci poate fi selectat un singur parametru.

Butoane radio

Comutatoarele (în jargon: butoane radio) sunt folosite atunci când este necesar să selectați o singură opțiune dintre mai multe oferite. Bifând caseta „Plasați mai întâi o etichetă și apoi o casetă de selectare?” Locația etichetei și câmpul de selecție modifică, în mod implicit, mai întâi selecția, apoi eticheta.

Acceptare

Confirmarea a ceva. Să presupunem un acord de acceptare a condițiilor descrise mai sus.

Întrebare

Aceasta este prima linie de apărare împotriva spamului, cea mai elementară. În setări, scrieți o întrebare, poate cu cifre, poate cu litere sau ambele, și indicați răspunsul corect. Dacă răspunsul la completarea formularului este corect, formularul va fi depus. Verdele indică ce parte a acestei formule va fi afișată pe site înainte de câmpul de introducere a răspunsului, roșu indică răspunsul. Răspunsul corect în formulă se scrie după semnul | (bară verticală)

Adaugă protecție anti-spam formularului.

Este necesar un alt plugin pentru ca această caracteristică să funcționeze. Descărcați, instalați, activați pluginul.

Nu trebuie să modificați setările, doar copiați și lipiți 2 rânduri înainte de butonul de trimitere.

Trimiterea unui fișier

Puteți atașa un fișier la formularul de trimitere a mesajului. În setări puteți specifica dimensiunea maximă în octeți și formatele permise pentru descărcare, de exemplu.jpg .tiff .doc

Buton de trimitere

Trimiterea formularului. În setări, în secțiunea „Shortcut”, poți da numele butonului (Trimite, răspunde, trimite :)

Personalizarea aspectului formularului de contact 7

Deoarece pluginurile au capacitatea de a fi actualizate, modificările aspectului formularului vor fi făcute în fișierul de stil al temei site-ului web style.css

Codul este responsabil pentru afișarea formularului, a câmpurilor acestuia și a altor elemente:

Wpcf7 (culoarea fundalului:#ddd; ) /*culoarea fundalului formularului */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px; înălțime linie: 20px; chenar: 1px solid #C7C7C7; umbră casetă: inserție 2px 2px 8px #F9F9F9; -webkit-transition: toate 0,2s ease; -moz-transition: toate 0,2s ease; -o-transition : toate 0,2 s ușurință; tranziție: toate 0,2 s ușurință; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item input( chenar: niciunul; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input: hover, .wpcf7 input:focus, .wpcf7 input:activ, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:activ ( fundal: #FDFDFD; contur: niciunul; )

Ce e ce?

.wpcf7 intrare, .wpcf7 textarea — stilul câmpului de introducere (câmp text)

1. căptușeală- setează indentarea de la conținut la marginea elementului. Iată indentarea de la textul introdus în câmp până la marginea câmpului. Setează valoarea în pixeli Xpx, unde X este numărul de pixeli. Exemplu: umplutură: 5px 3px 6px 8px;
2. culoare- culoarea textului.
3. familie de fonturi- fontul câmpurilor de intrare.
4. marimea fontului- marimea fontului
5. inaltimea liniei- inaltimea liniei
6. frontieră- cadru în jurul câmpului de intrare
7. cutie-umbră- blocați umbra. medalion indică faptul că umbra este internă. Dacă doriți o umbră exterioară, omiteți această valoare. A doua și a treia valoare de 2px 2px indică deplasarea umbrei pe orizontală și, respectiv, pe verticală. A patra valoare, 8px, stabilește raza de estompare a umbrei. A cincea - #F9F9F9 - culoarea umbrei.

Personalizarea butonului Formular de contact 7

Stilul de notificare Formular de contact 7

Este responsabil pentru mesajele de eroare sau trimise cu succes

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( border:none; background-color:#7ad33f; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px ; -moz-border-radius: 10px; border-radius: 10px; culoare: alb; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color:#349622; padding:5px; padding- stânga: 5px; padding-right: 5px; chenar-radius:10px; lățime: 290px; culoare: alb; /* Umbră */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

Și acum, pentru comoditate, întregul cod cu comentarii:

Wpcf7 ( culoarea fundalului:#ddd; ) /*culoarea fundalului formularului */ .wpcf7 intrare, .wpcf7 textarea( /* Această parte a codului este responsabilă pentru stilul câmpurilor de introducere, zonelor de text */ padding:5px; / * Setează umplutura din elementul fields înaintea conținutului său, puteți pune orice valoare, de exemplu 10px */ color:#1D1D1D; /* Culoarea textului în câmpurile de introducere */ font-family:Arial, Helvetica, sans-serif; / * Font text în câmpurile de introducere */ font -size:16px; /* Dimensiunea textului în câmpurile de introducere */ line-height: 20px; /* Înălțimea câmpurilor de introducere */ chenar: 1px solid #C7C7C7; /* Cadru în jurul câmpurilor . Prima valoare este lățimea în pixeli, a doua - stilul cadrului, a treia - culoarea acestuia */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Umbra din câmpurile de introducere. 2px - offset de-a lungul axa x, 2px - offset de-a lungul axei y, 8px - raza de estompare a umbrei, #F9F9F9 - culoarea umbrei */ -webkit-transition: toate 0.2s ease; -moz-transition: toate 0.2s ease; -o-transition : toate 0,2 s ușurință; tranziție: toate 0,2 s ușurință; ) .wpcf7 .wpcf7-list- item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item intrare( chenar: niciunul; umplutură-stânga: 0; margine-stânga: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:activ, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Această parte este responsabilă pentru stilul câmpurilor de introducere când cursorul mouse-ului trece peste ele */ fundal: #FDFDFD; /* Fundalul câmpului de introducere când cursorul mouse-ului trece peste el */ outline : none; /* Chenarul exterior al câmpului de introducere a textului */ ) .wpcf7 input.wpcf7-submit(/* Această parte a codului este responsabilă pentru stilul butonului Trimitere în formularul * / -webkit-tranziție: 0; -moz-tranziție: 0; - o-tranziție: 0; tranziție: 0; chenar: niciunul; /* Cadru în jurul butonului */ poziție: relativă; culoare: #fff; /* Text culoare */ text-transform: majuscule; /* Transformare text (majusculă înseamnă că textul de pe buton va fi afișat cu majuscule) */ /* Rotunjește colțurile butonului Valorile următoarelor trei proprietăți ar trebui să fie la fel, deoarece sunt același lucru, doar pentru browsere diferite */ -webkit-border-radius: 6px; /* Colțuri rotunjite pentru Chrome */ -moz-border-radius: 6px; /* Colțuri rotunjite pentru Mozilla FireFox */ border-radius: 6px; /* Colțuri rotunjite pentru toate celelalte browsere, inclusiv cele mobile */ font-size: 14px; /* Dimensiunea textului butonului */ font-weight: bold; /* Stil text (bold înseamnă bold) */ padding-top: 11px; /* Umplutură de sus de la marginea elementului până la conținutul său */ padding-bottom: 10px; /* Umplutură de jos de la marginea elementului până la conținutul său */ padding-left: 35px; /* Umplutură din stânga de la marginea elementului până la conținutul său */ padding-right: 35px; /* Indentare la dreapta de la marginea elementului până la conținutul său */ /* Gradient background - Gradient de fundal al butonului */ background-color: #000000; /* Culoarea de fundal a butonului dacă gradientul nu este acceptat de browser */ /* În următoarele proprietăți, culorile ar trebui specificate la fel, deoarece sunt același lucru, doar pentru browsere diferite. Să ne uităm la prima proprietate. Partea de la (#676767), la (#3B3B3B) înseamnă că trebuie să afișați un gradient, unde de la culoarea #676767) există o tranziție la culoarea #3B3B3B */ fundal: -webkit-gradient(liniar, stânga sus, stânga jos, de la (#676767), la (#3B3B3B)); fundal: -moz-linear-gradient(sus, #349622, #246416); filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: „progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)”; /* Drop Shadow - Umbră buton. Culoarea umbrei este specificată în RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); ) /* La trecerea cu mouse-ul - Stilați butonul când treceți cursorul mouse-ului. Totul este aproape la fel ca în blocul anterior */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(liniar, stânga sus) , stânga jos, de la(#246416), la(#349622)); fundal: -moz-linear-gradient(sus, #246416, #349622); filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416) ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* La clic - stilul butonului când faceți clic pe este aproape la fel ca în blocul anterior */ .wpcf7 input.wpcf7-submit:active( sus: 1px; culoare: #d8c6e2; /* Culoarea textului butonului când se face clic */ background-color: #000000; fundal: -webkit -gradient(liniar, stânga sus, stânga jos, de la(#FF0000), la(#246416)); fundal: -moz-linear-gradient(sus, #FF0000, #246416); filtru: progid:DXImageTransform .Microsoft. gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: niciuna; -moz-box-shadow: niciuna; caseta-umbra: niciuna; ) /* CF7 Messages - Stil de mesaje despre trimiterea cu succes, erori etc. */ .wpcf7 .wpcf7-validation-errors( /* Stil mesaj pentru erori de validare */ border:none; /* Cadrul bloc de mesaje */ background-color:#246416; /* Fundal */ color:#fff; /* Culoare text */ margin:0; /* Umplutură exterioară */ padding:20px; /* Umplutură interioară */ /* Colțuri rotunjite pentru diferite browsere - următoarele 3 proprietăți */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Stilul mesajelor reușite */ border:none; /* Cadrul blocului de mesaje */ background-color:#7ad33f; /* Fundal */ margin:0; /* Umplutură exterioară */ padding:20px; /* Umplutură interioară */ /* Colțuri rotunjite pentru diferite browsere - următoarele 3 proprietăți */ -webkit-border-radius: 10px; -moz - chenar-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius : 10px; -moz-border-radius: 10px; border-radius: 10px; culoare: alb; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color:#349622; umplutură: 5px; padding-stânga: 5px; padding-dreapta: 5px; chenar-raza:10px; latime: 290px; culoare albă; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: stânga; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: ambii; )

Aproape fiecare blog creat pe platforma WordPress folosește Contact Form 7. Este foarte popular în domeniul său, mai ales că dezvoltatorii îl dezvoltă constant. Are o serie de avantaje față de alte sub-module, în special ușurința setărilor, localizarea, adăugarea și gestionarea tuturor elementelor de formular posibile.

Și astăzi ne vom uita la plugin Formular de contact 7 Style, care este conceput pentru a crea vizual stiluri pentru Formularul de contact 7. Inițial, pe lângă designul său, pluginul are stiluri de formulare gata făcute sub formă de șabloane. Unde pur și simplu selectați o opțiune de șablon și bifați caseta pentru care formularul ați creat mai devreme pentru a aplica acest design. Să ne uităm la asta în acțiune.

Configurarea pluginului Contact Form 7 Style

Omitem partea de explicație și crearea formularelor, deoarece subiectul revizuirii vizează în mod special stilizarea formularului. Pentru a face acest lucru, așa cum am menționat mai sus, vom folosi un plugin special. După instalare, o secțiune „ Stiluri de contact” cu cinci subsecțiuni.

În prima secțiune " Toate Stilurile» există deja șabloane de stil de formular gata făcute, iar stilurile pe care le creați vor fi salvate imediat. Când treceți mouse-ul peste unul dintre șabloane, apar butoane de control suplimentare: Editare, Proprietăți, Ștergere. Când faceți clic pe butonul „Proprietăți”, vor fi afișate toate formele de comunicare disponibile pe site-ul dvs. Unde trebuie doar să bifați caseta de lângă formularul dorit și să salvați modificările.

la capitolul " Adăuga nou„Puteți crea propriul șablon pentru formular cu propriile stiluri, așa cum se arată în videoclipul de mai sus. Comutarea între elementele de formular și proiectarea vizuală a tuturor câmpurilor atât în ​​stare normală, cât și în efectul de hover.

Aveam nevoie să obțin un formular frumos pentru un plugin, formularele necesare ieri, dar este destul de dificil să stai și să scrii stiluri manual, iar pentru multe proiecte pur și simplu nu se încadrează în buget. Prin urmare, am plecat în căutarea unor plugin-uri interesante pentru configurarea rapidă a formularelor de contact CSS.

Toată lumea în unanimitate (aceasta se aplică motoarele de căutare) a recomandat - au spus oamenii înțelepți - editați css-ul și nu păcăliți pe nimeni, ridicați Notepad și mergeți mai departe. Privind înainte, înțelepții aveau dreptate.

Totuși, curiozitatea a predominat și s-a hotărât testarea mai detaliată a pluginului.Încercasem deja, dar mi s-a părut extrem de plictisitor și incomod. Pluginul nu a fost actualizat de 11 luni, ceea ce este trist. Puțin mai mult de 6K webmasteri au riscat să-i încredințeze formularele lor, ceea ce nu este nici un număr mare (din care l-am descărcat de patru sau cinci ori).

După instalare, creează o secțiune „Stil de contact” în rădăcina meniului de administrare. În această secțiune există două articole care conțin șabloane pentru Ziua Îndrăgostiților și Crăciun și „Stil personalizat” unde puteți personaliza complet ieșirea formularului. De fapt, secțiunea „Stil personalizat” este ceea ce vă interesează cel mai mult; mai multe detalii despre setările disponibile:

„SETĂRI GENERALE” - puteți defini culoarea de fundal, lățimea formei (setată în px, % nu au încercat), grosimea marginii, forma (punctată, solidă etc.), culoarea, rotunjirea.

„SETĂRI INTRARI ȘI ETICHETE” - fundalul câmpurilor de intrare, culoarea fontului de intrare, fontul (lista nu este mare și aproape că nu există nimic în chirilic) și dimensiunea acestuia. Culoarea marginii câmpului, stil (linie punctată continuă etc.), grosime, rotunjire. Introduceți fontul și dimensiunea acestuia. Parametrii de marjă în px - înălțime/lățime, umplutură. Eticheta font, stil, dimensiune, culoare.

„SUBMIT BUTTON SETTINGS” – setări pentru butonul de trimitere a formularului. Setările disponibile sunt dimensiunea butonului, rotunjirea, culoarea, tipul chenarului și culoarea chenarului.

Probleme la utilizare.

După ce ați revizuit setările, puteți ajunge la concluzia că totul este foarte bine - practica a arătat contrariul. Există într-adevăr o mulțime de setări, dar nu sunt suficiente - nu există setări de indentare în interiorul formularului, astfel încât toate blocurile sunt colectate pe marginea din stânga aproape de marginea formularului. Setări „implicite” ciudate - unde câmpul de introducere este 100*100 px. Dacă setați corect dimensiunile câmpurilor, acest lucru nu va afecta lista derulantă și va prelua stilul temei principale. Nu a fost posibilă resetarea la setările originale înainte de a dezinstala pluginul...

Până acum, în afară de schimbarea manuală a stilurilor, nu a ieșit mai mult sau mai puțin decent... Nu s-a întâmplat un miracol.

Notă importantă! Plugin-ul a fost actualizat recent și ceva s-a schimbat în setări destul de semnificativ, așa că trebuie să căutați și să testați.