Sfaturi, hack-uri, secrete. Sfaturi, hack-uri, secrete Gata css pentru formularul de contact 7

După instalarea pluginului Contact Form 7 și afișarea formularului pe pagină, arată cam așa.

De acord, nu foarte expresiv. Dar aspectul său poate fi ușor corectat.

Dacă vă place să schimbați/adăugați stiluri CSS, probabil că veți dori să începeți cu stilizarea câmpului.

Intrare Wpcf7, intrare .wpcf7, zonă text .wpcf7 ( /* stiluri aici: culoare, fundal, font, dimensiune, chenare etc. */ )

Apoi puteți modifica stilurile pentru a îmbunătăți și mai mult potrivirea cu tema dvs. pentru întreaga formă.

Wpcf7 ( /* stiluri aici: culoare, fundal, font, dimensiune, chenare etc. */ )

Cum să setați un stil numai pentru un anumit câmp? Să presupunem că doriți să schimbați stilurile pentru un câmp opțional " Subiect‘, care este prezent în formular în mod implicit după activarea pluginului.

Trebuie doar să adăugați ID-ul câmpului dorit în șablonul de formular.

Subiect [ text id-ul subiectului tău: fb-subject ]

Apoi puteți adăuga propriile stiluri CSS.

#fb-subject ( /* stiluri aici: culoare, fundal, font, dimensiune, chenare etc. */ )

Nu trebuie să fii un programator web sau un pasionat de computere pentru a crea un formular de feedback simplu, dar frumos. Puteți găsi cu ușurință toate informațiile necesare pe Internet, împreună cu exemple și explicații.

Iată un alt plugin Stiluri de formulare pentru formularul de contact 7 cu stiluri presetate simple, dar drăguțe.

Formular de contact simplu și curat - Formular de contact Curat și simplu— cu marcaj Bootstrap, captcha Google și filtre de spam. Apropo, vă rugăm să rețineți că acesta este un plugin destul de popular.

Dacă căutați singuri online, sunt sigur că veți găsi numeroase șabloane și stiluri pentru Formularul de contact 7.

Dar dacă petreci puțin timp pe stil, poți crea un aspect unic pentru formularul tău de contact de care nu numai că vei fi mândru, dar vei primi și o mulțime de mesaje de la publicul tău, deoarece îi va face plăcere să scrie în el și să-ți trimită e-mailuri. . 🙂

Popularul plugin Contact form 7 nu este deosebit de frumos în forma sa standard, așa că pentru mulți utilizatori se pune întrebarea cum să schimbe aspectul. Este exact ceea ce vom face acum, voi încerca să vă ofer o opțiune universală care este potrivită pentru orice site.

Am mai vorbit despre asta înainte, dar să nu vorbim despre asta acum, ci să trecem direct la modificările de design necesare.

În primul rând, avem nevoie de un fișier style.css, acesta poate fi găsit în fila „Aspect” / „Editor”. În mod implicit, fișierul de care aveți nevoie se va deschide. Vă recomand să deschideți mai multe file în browser:

1. Fila Formular 7 de contact pentru editarea formularului.
2. O pagină de pe site cu un formular de feedback.
3. Un editor cu un fișier CSS deschis.

Filele sunt deschise, să începem să facem modificări, mai întâi ne vom modifica puțin formularul.

Adăugarea de cursuri la Formularul de contact 7.

Când deschidem formularul pentru editare, vom vedea ceva de genul următoarei imagini:

Acest formular de feedback va arăta cam așa:

Este plictisitor, disproporționat și, sincer, nu frumos.

Pentru a schimba aspectul formularului, trebuie să facem puțină muncă de stil, dar mai întâi vom adăuga câteva clase la șablonul de formular. Pentru a face acest lucru, deschideți formularul pentru editare (ca în imaginea de mai sus) și adăugați următoarele clase:

Este puțin de scris, așa că este dificil să faci greșeli. Probabil ați găsit sfaturi online fără a utiliza sau adăuga cursuri. Chestia este că fără a adăuga clase pot apărea mai multe probleme. De exemplu, doriți să adăugați mai multe formulare pe site deodată, toate vor lua o formă identică, iar acest lucru nu este întotdeauna convenabil, așa că ar trebui să utilizați opțiunea pe care am propus-o.

Clasele au fost adăugate, nimic nu s-a schimbat încă, următorul pas este să determinați id-ul formularului.

Determinați ID-ul formularului de pe pagină.

Mai întâi trebuie să înțelegeți că același formular va avea ID-uri diferite pe diferite pagini ale site-ului, așa este proiectat pluginul, adaugă un parametru suplimentar de fiecare dată când este apelat formularul. Acum să aruncăm o privire mai atentă.

Pentru a edita formularul, trebuie să îl adăugați pe pagină sau să îl publicați în locul dorit, adică să introduceți codul scurt. După aceea, accesați această pagină și faceți clic dreapta pe formular și selectați „Vizualizare cod” acesta este pentru browserul Chrome, dacă aveți unul diferit, atunci există aproximativ același text.

În codul care se deschide, căutăm începutul formularului nostru, arată astfel:

Acesta va fi id-ul formularului. Revenind, vă voi arăta ce id are același formular pe altă pagină.

După cum puteți vedea, identificatorul diferă doar în câteva cifre. Prin urmare, mai întâi trebuie să decideți pe ce pagină va fi localizat formularul și abia apoi să începeți editarea stilurilor.

Ei bine, următorul pas a fost făcut, am definit id-ul, ne-am înregistrat clasele, acum să trecem direct la schimbarea aspectului.

Formular de contact pentru stilare 7, lucrând cu fișierul style.css

Privind în viitor, voi spune că opțiunea pe care am propus-o este puțin probabil să ți se pară ideală. Faptul este că toți cei care citesc aceste rânduri vor să-și vadă forma exact așa cum și-o imaginează. Nu sunt telepat și nu voi putea mulțumi pe toată lumea, dar voi încerca să vă dau un sfat despre unde și unde să căutați informații și ce să schimbați. Așa că iartă-mă imediat pentru posibila dezamăgire, nu există panaceu, va trebui să muncești puțin.

Schimbați culoarea de fundal, indentările și fontul formularului.

După ce s-a terminat munca, trecem la stiluri. Mai întâi, să schimbăm (dacă este necesar) culoarea de fundal a formularului, să ne ajustam indentările, să selectăm fontul și culoarea textului necesare. Vom efectua toate aceste setări cunoscând ID-ul în prealabil. Am discutat mai sus cum să-l recunoaștem.

Mai întâi, să mergem la fișierul style.css, să adăugăm primele reguli pentru ID-ul formularului (trebuie să îl adăugați chiar în partea de jos a fișierului), în cazul meu este wpcf7-f172-p34-o1, trebuie să înlocuiește-ți ID-ul:

#wpcf7-f172-p34-o1 (
marja: 5px;
umplutură: 10px;
fundal: #B3AFAF;
familie de fonturi: Georgia, „Times New Roman”, Times, serif;
culoare: #000;
}

Acum să ne uităm la totul mai detaliat:

1. Să ne ocupăm mai întâi de indentări. Umplutură externă (de la marginea până la începutul formularului) - margine: 5px, padding intern (de la începutul formularului până la elementele interne) - padding: 10px.
2. Completarea formularului sau fundalul acestuia este determinată de proprietatea de fundal: #B3AFAF, puteți selecta orice culoare doriți prin simpla înlocuire a valorii.
3. Noi decidem familia de fonturi; dacă nu doriți să o schimbați, puteți sări peste această regulă (familie de fonturi: Georgia, „Times New Roman”, Times, serif).
4. Culoarea textului este determinată de proprietatea de culoare, care este în prezent setată la negru (culoare: #000).

Puteți experimenta singuri acești parametri, puteți selecta indentări, culori și fonturi. Pentru a face acest lucru, trebuie doar să modificați valoarea, să salvați noua opțiune, să reîmprospătați pagina și să vedeți modificările. Nu vă fie teamă să experimentați, nu veți putea sparge nimic aici; în cazuri extreme, stilurile pur și simplu nu vor funcționa și puteți repara cu ușurință totul așa cum a fost.

Determinăm indentările dintre câmpuri și schimbăm cadrul.

Să trecem la câmpurile noastre, să adăugăm liniuțe:

#wpcf7-f172-p34-o1 p(
margine: 5px;
}

Acestea sunt indentări de-a lungul marginilor câmpurilor, astfel încât textul și blocurile să nu se îmbine într-un întreg.

Următoarea etapă vor fi cadrele, voi da versiunea mea și puteți găsi online multe opțiuni care vă plac și înlocuiți-le.

#wpcf7-f172-p34-o1 intrare,textarea (
chenar: 3px dublu #000;
}

Mai multe despre cadru. O valoare de 3px este lățimea cadrului, dublu este folosit de două ori (dacă nu este necesar, puteți elimina acest cuvânt), #000 culoarea cadrului, puteți alege și a dvs.

Modificați lățimea câmpurilor și locația acestora.

Nume-cf (
plutește la stânga;
umplutură: 2px;
}
.name-cf input (
latime: 270px;
}
.thems-cf intrare (
latime: 100%;
}
.clear-cf (
clar: ambele;
}
.text-cf textarea (
latime: 100%;
}

Acum să ne uităm la totul mai detaliat:

1. Prima clasă la care ne vom adresa nume-cf aparține câmpurilor cu nume și e-mail. Pentru ei am stabilit o marjă de 2px ( umplutură: 2px) și debitul ( plutește la stânga) pentru a alinia două câmpuri pe un rând.
2. Apoi, vom ajusta lățimea câmpurilor setându-le la dimensiunea optimă (pentru șablonul meu) de 270px ( Intrare .name-cf ( lățime: 270 px; )). Dacă marginile dvs. sunt încă de o linie sau dimensiunea este prea mică, alegeți propria opțiune.
3. Vom face ca câmpul cu numele temei să umple întreaga lățime a formularului, deoarece poate exista mai mult text acolo (intrare .thems-cf (lățime: 100%;)). Dacă doriți propria dvs., vă rugăm să indicați valoarea exactă în pixeli.
4. Următorul bloc pe care l-am adăugat în formular este conceput pentru a anula fluxul ( Intrare .thems-cf (lățime: 100%; )).
5. La fel ca în cazul precedent, facem câmpul cu textul mesajului la lățime completă ( text-cf textarea (lățime: 100%;)).

Puteți actualiza fișierul de stil și puteți vedea modificările, dacă este necesar, puteți ajusta dimensiunile pentru a se potrivi nevoilor dvs.

Aliniați butonul „Trimite” în centru, schimbați fundalul și lățimea.

Să mergem la butonul nostru, să-l aliniem la centru și să adăugăm un fundal:

Trimite-cf (
lățime: 200px; /*latimea blocului*/
înălțime: 25px; /*înălţime*/
marja: 0 auto; /* Umplutură la stânga și la dreapta */
}
.submit-cf input (
lățime: 200px;
fundal:#96B195;
}

În mod tradițional, explic ce este:

1. Prima regulă este să determinați lățimea și înălțimea blocului în care va fi plasat butonul și să îl plasați în centrul formularului.
2. A doua regulă este să setați culoarea de fundal a butonului ( fundal:#96B195, dacă nu specificați că va avea aceeași culoare ca toate celelalte câmpuri), setați lățimea butonului ( latime: 200px, este de dorit ca acesta să aibă aceeași dimensiune cu lățimea blocului, astfel încât butonul să nu se miște în lateral).

Ne salvăm setările și vedem ce avem:

Sunt de acord că este departe de a fi șic, dar arată adecvat în general, mai jos este forma implicită, cred că efectul este evident. Oricum am invatat modificați aspectul formularului de contact 7.

Sper că articolul v-a fost de folos, dar dacă ceva nu este în regulă sau aveți probleme, lăsați un comentariu și voi încerca să răspund (corect).

Acest material va descrie în detaliu configurarea Contact Form 7, un plugin pentru o platformă atât de populară pentru crearea și promovarea site-urilor pe World Wide Web precum WordPress. Acest instrument software vă permite să creați și să configurați formulare de feedback.

Un pic despre WordPress

Unul dintre cele mai populare și mai răspândite instrumente pentru dezvoltarea și completarea resurselor de informații este WordPress. Inițial, acest produs software a fost axat pe crearea de bloguri simple. Dar apoi specialiștii specializați i-au completat funcționalitatea, ceea ce a făcut posibilă crearea altor resurse de internet folosind acest sistem de management al conținutului.

Punctele forte și punctele slabe ale acestei platforme pentru crearea și promovarea site-urilor web

Avantajele acestei platforme software sunt:

Simplitate și cod sursă deschis.

O cantitate impresionantă de informații de referință.

Capacitatea de a dezvolta orice resursă tematică pe Internet în cel mai scurt timp posibil.

Performanță ridicată fără suplimente software suplimentare (plugin-uri).

Dar dezavantajele în acest caz sunt următoarele:

Site-urile web construite pe WordPress nu vor putea face față sarcinilor grele.

Există o scădere a vitezei resursei de Internet la instalarea de mini-programe suplimentare sau, așa cum sunt numite și plug-in-uri.

și de ce au nevoie de ele site-urile bazate pe platforma WordPress?

Funcționalitatea de bază a unui sistem de management de conținut precum WordPress este foarte modestă. Este suficient doar să dezvoltați cele mai simple bloguri și site-uri web. Pentru a îmbunătăți cumva situația cu funcționalitatea platformei software și pentru a adăuga flexibilitate acesteia, dezvoltatorii trebuie să instaleze mini-programe speciale, care în jargonul profesional se numesc pluginuri. Unul dintre acestea este Formularul de contact 7. Configurarea pluginului vă permite să creați un formular de feedback cu un nivel extins de funcționalitate pe o anumită pagină a sistemului de management al conținutului.

Specializarea „Formulare de contact 7”

După cum sa menționat mai devreme, crearea de feedback între vizitator și administratorul unei resurse de Internet bazată pe platforma WordPress este sarcina principală a Formularului de contact 7. Configurarea e-mailului, editarea unui șablon, trimiterea diferitelor fișiere nu este o listă completă a capabilităților care aceasta oferă mini-program. În acest caz, încărcarea resurselor hardware ale site-ului va fi relativ mică și prezența acestuia nu va duce la o scădere semnificativă a performanței site-ului sau blogului.

Procedura de instalare a pluginului

Există trei moduri de a instala pluginuri pe platforma WordPress:

Prin descărcarea unei arhive ZIP de pe World Wide Web și „încărcarea” acesteia în directorul corespunzător al resursei de Internet.

Utilizarea diferitelor tipuri de clienți FTP.

Cea mai sigură dintre cele trei opțiuni pentru instalarea pluginurilor este ultima. În acest caz, codul programului este descărcat de pe site-ul oficial și cu siguranță nu conține diverse tipuri de fragmente rău intenționate, periculoase. Procedura de instalare a pluginului în acest caz este următoarea:

Accesați panoul de administrare WordPress.

Apoi trebuie să treceți la secțiunea „Pluginuri”.

În fereastra care se deschide, selectați „Adăugați nou”.

În bara de căutare, introduceți numele pluginului - Formular de contact 7 - și apoi mutați cursorul mouse-ului peste butonul „Căutare” și faceți clic o dată. După aceasta, va începe operația de căutare pentru software-ul necesar.

La finalizare, va fi afișată o listă de pluginuri găsite. În această listă îl găsim pe cel de care avem nevoie și facem clic pe butonul etichetat „Instalare”, care se află vizavi.

După aceasta, sistemul de management al conținutului va descărca și instala automat acest plugin.

Următorul pas este să activați software-ul instalat. Pentru a face acest lucru, accesați fila „Plugin-uri” și găsiți Formularul de contact7 în listă. Lângă ea este inscripția: „Activați”, faceți clic pe ea o dată cu mouse-ul.

Actualizăm panoul administrativ al sistemului de management al conținutului și găsim Formularul de contact7 printre articolele sale. Aceasta este condiția pentru instalarea cu succes a acestui plugin popular și funcțional.



Algoritm de configurare pentru „Contact Forms 7”

Configurarea formularului de contact 7 constă din următoarele elemente:

Crearea unui formular nou sau editarea unuia vechi care a fost creat la instalarea pluginului. Experiența arată că, în cele mai multe cazuri, este mai bine să utilizați opțiunea de a crea un formular nou.

În etapa următoare, selectați limba formularului și setați-i numele.

Apoi, trebuie să reconfigurați șablonul, dacă este necesar.

Salvați modificările efectuate.

Creăm o pagină nouă cu codul primit mai devreme.

În etapa finală, trebuie să accesați site-ul web și să verificați funcționarea corectă a elementului de interfață a resurselor de Internet creat.

Creați un formular nou

Imediat după activare, acest plugin creează un formular implicit pentru a pune întrebări de la vizitatorii site-ului sau blogului. Poate fi, desigur, editat și personalizat după cum este necesar. Dar va fi mult mai ușor să îl ștergeți și să creați unul nou cu un set complet de toate funcționalitățile necesare. Pentru a face acest lucru, trebuie să faceți următoarele:

Accesați meniul acestui plugin și selectați „Formulare”.

În fereastra care se deschide după aceasta, trebuie să bifați caseta de lângă elementul „Formular de contact1”.

Apoi, deasupra acestuia, în lista derulantă „Acțiuni”, selectați „Șterge”.

Ca răspuns, va apărea o întrebare pentru a confirma acțiunile efectuate. Trebuie să confirmați ștergerea formularului și să faceți clic pe butonul „Da”.

Apoi, selectați elementul de meniu: „Creați nou” în panoul administrativ „Wordpress” „Formular de contact7”.

În fereastra care se deschide, în lista derulantă, selectați limba interfeței formularului viitor - „rusă”. Apoi faceți clic pe butonul „Creați”.

După aceasta, codul inițial pentru noul formular de feedback pentru WordPress va fi generat implicit. După aceasta, va trebui să efectuați operațiuni precum configurarea formularului de contact 7.

Setați numele formularului

După parcurgerea tuturor pașilor anteriori, va apărea o fereastră pentru introducerea numelui noului formular în Contact Form 7 Style. Configurarea acestui lucru începe cu această operațiune simplă pe o parte. Dar este mai bine să dați numele formularului pe baza optimizării motoarelor de căutare. Prin urmare, cea mai optimă opțiune în acest caz ar fi, de exemplu, „Formular de feedback” sau „Pune o întrebare administratorului site-ului”. Odată ce ne-am hotărât asupra numelui acestui element de interfață, introduceți-l în câmpul corespunzător al ferestrei de solicitare.



Editarea șablonului „Formulare de contact 7”.

În aceeași fereastră cu numele formularului creat există 4 file. Primul este „Șablon”. În mod implicit, aici sunt formate doar 5 elemente:

Loc în care să tastați numele vizitatorului resursei Internet.

Câmp pentru introducerea adresei de e-mail a vizitatorului care a pus întrebarea.

Un alt câmp vă permite să introduceți subiectul întrebării.

Ultimul element al formularului în mod implicit este un buton etichetat „Trimite”.

Dacă este necesar, textul din acest câmp poate fi editat și pot fi adăugate alte elemente de interfață. Pentru a face acest lucru, trebuie doar să selectați codul oricărui element de text (de exemplu, acea parte a codului în care este indicat subiectul mesajului și să o copiați folosind meniul contextual în același câmp în alt loc. În dreapta sunt parametrii (se va discuta în detaliu în paragraful următor) în care se selectează elementul care ne interesează După aceea, în dreptul listei derulante va apărea codul necesar. Apoi copiați acest cod și lipiți-l în locul mesajului cod subiect.Alegeți numele elementului la discreția dvs.

Setarea lungimilor câmpurilor și multe altele

În același loc, puteți modifica introducerea în Formularul de contact 7. Ajustarea lățimii oricărui câmp de text se face după cum urmează:

De exemplu, este necesar să creșteți numărul de caractere din numele unui vizitator la o resursă de internet la 55. Implicit sunt 40.

Pentru a face acest lucru, adăugați numerele 60/55 la sfârșitul codului. Rezultatul va fi codul. După salvarea modificărilor, lungimea acestui câmp va fi de 60, iar numărul maxim de caractere care pot fi introduse în el va fi de 55.

Puteți redimensiona câmpul text al mesajului în același mod. Numai în acest caz este necesar să schimbați codul acestui element după cum urmează. În acest caz, 40 este numărul de litere dintr-o linie, iar 30 este numărul total de termeni din acest element de interfață din Formularul de contact 7. Setarea aspectului formularului în sine se face tocmai prin selectarea valorilor parametrilor fiecăruia. element individual. Prin urmare, se recomandă specificarea unor valori specifice pentru fiecare parametru dat în această secțiune în codul fiecărui element.



Alte file de formulare

După cum am menționat, prima filă se numește „Șablon de formular”. Următorul din această fereastră este „Scrisoare”. Specifică parametrii locației către care vor fi trimise e-mailurile din această resursă de internet. În fila „Notificare”, este generat textul mesajului, care va fi afișat dacă scrisoarea este trimisă cu succes. Există și posibilitatea de a pregăti un mesaj în cazul în care nu puteți contacta administratorul site-ului folosind mijloace. Ultima filă din Formularul de contact 7 este „Setări avansate”. Conține acei parametri care sunt utilizați foarte, foarte rar în practică. De exemplu, îl puteți folosi pentru a configura urmărirea textului introdus de utilizator folosind valorile Yandex.

Câmpuri care pot fi adăugate folosind acest plugin la acest formular

Configurarea formularului de contact 7 pentru Wordpress vă permite să adăugați următoarele elemente de interfață la formularul de feedback:

• Un câmp de testare este un element de interfață universal în care puteți introduce orice set de caractere.

  E-Mail - loc de introducere a numelui căsuței poștale electronice.

  URL - câmp pentru introducerea adresei unei pagini de Internet.

  Număr de telefon—vă permite să introduceți un număr de telefon în format internațional.

  Elementul „Număr (casă rotativă)” vă permite să creați un câmp de intrare pentru orice valoare întreagă (de exemplu, vârsta vizitatorului).

  Elementul „Număr (Slider)” adaugă un glisor la formular care vă permite să selectați o valoare numerică dintr-un interval specificat.

  Elementul „Dată” creează un câmp special de introducere în care puteți specifica data necesară. Când activați acest element de interfață, în partea de jos apare un calendar, în care puteți selecta imediat data necesară.

  La rândul său, elementul de meniu derulant „Câmp de text” este destinat să tasteze partea de text a e-mailului.

  Următorul element - „Meniu derulant” - vă permite să selectați parametrul necesar dintr-o listă fixă.

  Dar „CheckBoxes” este destinat să selecteze una sau mai multe valori dintr-o listă dată.

  Elementul de interfață „Butoane radio” este aproape identic cu cel precedent. Singura diferență este că, în acest caz, puteți selecta o singură opțiune corectă, în timp ce „CheckBoxes” poate avea mai multe valori corecte.

  Elementul „Acceptare” vă permite să adăugați o singură casetă de selectare la formularul creat. De regulă, este folosit pentru a vă familiariza cu orice condiții și fără a le accepta, nu va fi posibil să trimiteți un e-mail în viitor.

  Elementul „Meniu” vă permite să creați o secțiune specială în interfață care vă va proteja căsuța poștală de spam. În acest caz, va trebui să oferiți răspunsul corect la întrebare înainte de a trimite.

  A doua opțiune de securitate este CAPTCHA. Când îl selectați, în formular va fi adăugată o secțiune separată, care va afișa o imagine cu simboluri și un câmp suplimentar pentru introducerea acestora.

  Următorul articol este „Trimiterea unui fișier”. Vă permite să adăugați un fișier cu diferite tipuri de explicații și comentarii la textul scrisorii pentru administratorul de resurse.

  Ultimul element - „Butonul de trimitere” - vă permite să adăugați un element de interfață corespunzător.

Salvați modificările efectuate

Odată ce valorile necesare sunt setate și formularul este configurat corect, trebuie să le salvați pe toate. Pentru a face acest lucru, în fereastra de editare a pluginului, mergeți în partea de sus. Ar trebui să existe un buton „Salvare” aici. Îndreptați cursorul spre el și faceți clic pe el o dată. Ca răspuns, va apărea codul formularului, pe care îl selectăm folosind același cursor de mouse și o copiem. Apoi, treceți la elementul „Pagini” din panoul administrativ al sistemului de management al conținutului. Apoi creăm o pagină nouă cu numele cerut (de exemplu, „feedback”, „Contacte” sau „Pune o întrebare administratorului de resurse”). Apoi mutam cursorul de apelare in campul de introducere a codului acestuia. În acest caz, trebuie să comutați modul de tastare a codului la „Text” în panoul de parametri. După aceea, introduceți codul de formular primit anterior. Apoi, în partea dreaptă a interfeței, găsiți butonul „Publicare” și treceți mouse-ul peste el. În etapa următoare, faceți clic pe butonul stâng al mouse-ului o dată pe acest element al interfeței sistemului de management al conținutului.



Verificarea rezultatului

După efectuarea manipulărilor indicate anterior, la interfața resursei de Internet trebuie adăugată o nouă pagină, pe care vor fi afișate elementele specificate în Formularul de contact 7. Configurarea interfeței este, în principiu, finalizată. Trebuie doar să verificați dacă software-ul este configurat corect. Pentru a face acest lucru, trebuie să accesați pagina principală a site-ului, blogului sau portalului. Apoi în lista de pagini o găsim pe cea pe care a fost plasat formularul de feedback. Mergem la el, introducem parametrii corecti în toate câmpurile simultan și ne trimitem o scrisoare de test. Ca răspuns, ar trebui să apară un mesaj de informare care indică finalizarea cu succes a acestei operațiuni. Apoi încercăm să trimitem o altă scrisoare cu câmpuri goale. După aceasta, ar trebui să apară un mesaj care spune că trebuie să setați toți parametrii de formular selectați. Dacă în ambele cazuri s-au obținut rezultatele indicate mai devreme, atunci formularul de feedback creat funcționează corect.

Avantaje și dezavantaje ale pluginului. Opțiuni alternative

O soluție excelentă pentru un dezvoltator începător pentru a crea un formular de feedback este mini-programul Contact Form 7. Configurarea trimiterii de e-mail, crearea elementelor de interfață și a altor elemente importante de interfață în acest caz este în mare parte automatizată și necesită cunoștințe minime ale utilizatorului. Prin urmare, pentru o resursă simplă de internet de nivel de intrare cu un administrator începător, aceasta este o soluție excelentă. Dar orice plugin este o încărcare suplimentară a resurselor site-ului, ceea ce reduce performanța. Drept urmare, utilizatorii mai avansați recomandă să se îndepărteze de o modalitate atât de simplă de a crea un formular de feedback. De asemenea, îl puteți crea singur folosind HTML, CSS și JS, deși cu un nivel mai scăzut de funcționalitate. Acest lucru va reduce nevoia de resurse de calcul pe site și va crește semnificativ nivelul de performanță.



Rezultate

Acest articol descrie pas cu pas modul de configurare Contact Form 7. Acest plugin are într-adevăr un nivel ridicat de funcționalitate, îl puteți folosi pentru a crea orice formular de feedback. Pe de altă parte, utilizarea unui plugin suplimentar ca parte a unui sistem de management al conținutului crește încărcarea hardware-ului site-ului. Prin urmare, administratorilor de site-uri începători bazați pe acest sistem de management al conținutului li se recomandă să folosească acest plugin în astfel de scopuri. Ei bine, utilizatorii mai avansați se pot descurca fără Formularul de contact 7. În acest caz, configurarea pluginului cu siguranță nu este necesară.

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ă! Pluginul 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.

Pluginul Contact Form 7 va ajuta la organizarea feedback-ului pe site-ul dvs.

Puteți descărca pluginul Contact Form 7 de pe site-ul oficial WordPress

Puteți descărca pluginul Really Simple CAPTCHA de pe site-ul oficial WordPress

Am discutat despre cum să instalați și să conectați acest plugin în lecția „“, acum ne vom uita la funcțiile suplimentare ale pluginului Contact Form 7. Formularul funcționează corect pe monitoare, tablete, telefoane și laptopuri. Apropo, dacă laptopul tău este stricat, există un service care repara laptopurile HP.

După ce ați descărcat și activat pluginul, accesați setările pluginului accesând noua secțiune a panoului de control „Contacte”.

Treceți mouse-ul peste numele formularului și selectați „Editați”

Se va deschide o fereastră pentru modificarea parametrilor formularului.

Deoarece site-ul poate folosi nu unul, ci mai multe formulare (un formular pentru trimiterea unui mesaj, un formular pentru comandarea unui apel, un formular cu date personale), astfel încât să nu existe confuzii cu privire la ce formular este responsabil pentru ce, trebuie să schimba numele formularului. Pentru a face acest lucru, faceți clic pe numele formularului 1.

Blocul nr. 2 afișează ceea ce va fi afișat pe pagină în formular. Mai întâi vine textul, numele câmpului, apoi codul acestui câmp. Puteți schimba textul în orice aveți nevoie.

Pentru a adăuga câmpuri noi în formular, faceți clic pe lista derulantă Nr. 3 - „Generează etichetă” și selectați elementul necesar din lista derulantă.

• Câmp text
• E-mail
• Număr de telefon
• Număr (cutie rotativă)
• Număr (glisor)
• Câmp text
• Meniu derulant
• Casete de selectare
• Butoane radio
• Acceptare
• Întrebare
• CAPTCHA
• Trimiterea unui fișier
• Buton de trimitere

Sfaturile cu instrumente și câmpurile de formular sunt aranjate implicit după cum urmează: balon cu instrumente în partea de sus, element în partea de jos. Dacă doriți să plasați descrierea și elementul pe o singură linie, eliminați eticheta după text

. Întregul bloc cu descrieri și elemente trebuie să fie pe o singură linie și să fie situat în interiorul etichetei

Câmp text