Bună seara dragi cititori de blog. Continuăm subiectul formularelor de feedback pe WordPress. Și întrucât vorbim despre ele, vă propun astăzi să vorbim despre pluginul WP Contact Form 7. În continuare, vă voi spune configurarea pas cu pas a pluginului și, de asemenea, vă voi descrie pe scurt completările pentru acest plugin.
Navigare în pagină:
Descrierea formularului de contact WordPress 7
2) Activați pluginul Contact Form 7 în zona de administrare WordPress.
3) Accesați noua filă creată, așa cum se arată în figură:
4) Faceți clic pe fila „Adăugați nou” și specificați limba implicită a formularului sau selectați-o pe cea dorită
5) Specificați numele formularului de contact și faceți clic pe Salvare.
6) Acum avem un shortcode care poate fi copiat și lipit într-o postare sau bară laterală pentru a afișa formularul - contact-form-7 id="1252" title="Formular numărul 1)" (надо взять в квадратные скобки как на рисунке).!}
7) Iată cum arată formularul nostru:
Desigur, nu este foarte frumos, dar nimeni nu vă deranjează să vă creați propriile stiluri sau să vă faceți propria formă și să adăugați inserții acolo.
Cum să afișați Formularul de contact 7 în orice loc din șablon
În paragraful 6 configurare pas cu pas V-am arătat cum puteți lua un cod scurt al codului CF7 și am descris în continuare că acest cod poate fi afișat într-un widget sau într-o postare sau pagină. În plus, vreau să spun că puteți afișa formularul de contact 7 oriunde în șablon. Pentru a face acest lucru, introduceți acest cod simplu:
Asta e tot, dacă ai făcut totul corect, vei primi rezultatul Formular de contact 7 într-o locație aleatorie din șablonul WordPress.
Personalizarea câmpurilor de introducere a formularului de contact 7
Datorită acesteia, veți avea în plus astfel de cutii precum:
Configurarea unui răspuns de răspuns pentru formularul de contact 7
ÎN versiune noua plugin CF7 4.4 și o versiune ulterioară, dezvoltatorul recomandă intrarea din câmp (aici este pe skinul de mai jos)
adresa corectă care se potrivește domeniului dvs. Vizibil de pe piele, iar această recomandare creează o problemă:
Cum să răspund unui utilizator dintr-un mail?
Dacă faceți clic pe Răspuns, atunci vom răspunde la propriul nostru e-mail, de fapt, vom răspunde singuri. Acest lucru este foarte incomod, deoarece trebuie să copiem manual adresa utilizatorului, să o lipim în mailer și abia apoi să răspundem.
Există o soluție la această problemă și, ca întotdeauna, este simplă. Ai nevoie pe teren Anteturi suplimentare adauga cod:
Raspunde la:
Desigur, your-email-sh trebuie înlocuit cu codul scurt de e-mail. Vezi pielea de mai jos:
Acum, când primiți o scrisoare de la feedbackul WordPress, puteți face clic pe Răspundeți în e-mail și răspunsul dvs. va fi trimis la adresa de e-mail corectă.
Dacă după acești pași întâmpinați o problemă, ar trebui să citiți postarea făcând clic pe link. Acolo sunt descrise principalele probleme și cauzele problemelor din pluginul Contact Form 7.
Asta e tot. Sper că înțelegeți cum să configurați pluginul și aspectele sale.
Salutare tuturor. Cumva, am prea multă energie și am decis să scriu un alt articol astăzi, care să fie dedicat unuia dintre Pluginuri WordPress. Un plugin destul de interesant și funcțional, se descurcă 100% cu responsabilitățile sale și încă nu am găsit o modalitate mai bună de a-l proiecta părere.
Nu vreau să vă plictisesc mult timp, cred că ați înțeles deja despre ce se va discuta în articol. Și așa, astăzi vom înțelege și configura Modul de contact 7 plugin pentru WordPress, și anume creați un formular de feedback.
Am stat mult timp și m-am gândit la dezavantajele pluginului și nu mi-a venit nimic în minte, dar această creație are o mulțime de avantaje.
Avantajele pluginului Contact Form 7.
- Clar și ușor de configurat. O persoană care întâlnește acest plugin pentru prima dată va putea să-l dea seama fără probleme.
- Crearea unui număr mare de forme diferite și integrarea acestora în site.
- Formularul este inserat folosind un shortcode pe pagină și oriunde pe site. Este foarte confortabil.
- Suport pentru rusă și alte limbi.
- Suport pentru cererile Ajax.
- Protecție împotriva spamului folosind o întrebare text sau captcha. Pentru captcha, va trebui să instalați suplimentar Really Simple CAPTCHA.
- Setări aspect forme cu folosind css stiluri.
- Integrare cu serviciul Akismet pentru a vă proteja împotriva spamului.
Pe site-ul nostru web puteți vedea și utiliza un astfel de formular dacă faceți clic pe elementul de meniu „Contactați-ne”, va apărea o fereastră în care puteți vedea un exemplu clar.
Sa incepem!
În primul rând, trebuie să descarcăm acest plugin. Puteți de pe serverul nostru aici este linkul - >sau de pe site-ul oficial aici este linkul -> Descărcați de pe site-ul oficial .
După descărcare, trebuie să îl instalați pe . Nu voi descrie cum se instalează, cred că ar trebui să cunoașteți acest proces de la A la Z. L-am descărcat, l-am instalat, acum mergem direct la software-ul în sine pentru a-l descoperi și a-l configura.
Configurarea pluginului Contact Form 7 și crearea unui formular de feedback.
Acum că ați descărcat și instalat totul după cum este necesar, accesați panoul de administrare WordPress și găsiți articolul Formularul de contact 7, faceți clic pe el și suntem duși la pagina pentru adăugarea unui formular nou.
Crearea unui formular.
Pentru a crea uniforma noua trebuie să faceți clic pe „ Adăuga nou”, apoi selectați limba (în mod implicit rusă) și faceți clic pe „Adăugați nou”. După toți pașii pe care i-ați făcut, ar trebui să aveți o imagine ca aceasta:
Formularul a fost creat, acum îl vom personaliza pentru a se potrivi nevoilor dumneavoastră și mai întâi îi vom da un nume. În cazul meu, voi suna „ Formular de testare”, îl denumiți după cum doriți și apoi faceți clic pe „Salvați”. Acum puteți vedea codul scurt care va trebui introdus în codul site-ului unde va fi afișat acest formular.
Vom avea nevoie de cod un pic mai târziu, deoarece mai întâi trebuie să setăm formularul. Să mergem la șablonul de formular și să-l personalizăm.
În dreapta este lista derulantă „ Generați etichetă”, dacă îl extindeți, puteți vedea multe câmpuri care sunt adăugate în formular.
Câmpul „Generează etichetă”. În stânga puteți vedea câmpurile care au fost deja adăugate în formular.
De exemplu, să facem un formular simplu care va conține nume, e-mail, telefon, întrebare text pentru protecție anti-spam, buton de mesaj și trimitere.
Începe.
Crearea unui câmp de text pentru nume. În lista derulantă „Generați etichetă”, selectați „ Câmp text" Bifăm câmpul necesar, îi dăm un nume în cazul meu „NUME” și atribuim un id, astfel încât câmpul să poată fi creat folosind stiluri css. Am primit id=”nume”. Mai jos puteți vedea textul „ Copiați acest cod și inserați-l în șablonul de formular din stânga" Luați acest cod și copiați-l în șablonul de formular, ca în imagine:
Pentru mail (e-mail) procedăm la fel pentru un telefon, selectați din lista „Generare etichetă”, câmpul „; Număr de telefon” și o facem și prin analogie.
Pentru a configura mesajul, selectați „ Câmp text” și o facem și prin analogie cu tot ce este descris mai sus.
Acum adăugați câmpul " Întrebare". Pentru a face acest lucru, selectați elementul „ Întrebare", dă-i un nume. În câmpul Întrebare|Răspuns, puteți pune diferite întrebări și răspunsuri, sub câmp este un exemplu de întrebare logică, puteți pune o întrebare text, de exemplu, „A treia lună a anului?| martie”, etc. Lipim codul ca înainte.
Câmpul „Întrebare”. Și ultimul lucru de care avem nevoie este un „ Trimite”, îl poți lăsa pe cel în șablon sau în lista „Generează etichetă”, selectează „Butonul Trimitere”. Șablonul este gata, faceți clic pe „ Salvați”.
Să verificăm ce avem, să copiem shortcode-ul și să-l lipim pe pagină sau în orice parte a codului, acolo unde este necesar. Îl voi lipi într-o pagină de test.
Iată ce am primit:
Trebuie să ai ceva asemănător.
Configurarea destinatarilor formularelor și mesajelor
Coborâm puțin sub șablonul formularului și vedem setările destinatarului.
- Câmp de destinație. Introdu adresa de e-mail de la care vor fi trimise scrisorile vizitatorilor care completează formularul.
- Câmpul expeditorului. În loc de<>, înlocuim codurile noastre scurte (numele care au fost date câmpurilor). Le puteți vizualiza mai sus. In cazul meu va fi<>.
- Câmp de subiect. Întotdeauna scriu un formular de feedback și indic site-ul.
- Câmp șablon de scrisoare. Aici poți afișa orice dorește inima ta. Pentru exemplul nostru, fac câmpul De la:<>si detalii Telefon: , Mesaj ..
- Câmpurile rămase sunt goale.
Nu uitați să salvați la sfârșit.
Dacă mergeți și mai jos, puteți vedea setările mesajului. Totul aici este în rusă, așa că îl puteți edita pentru a se potrivi nevoilor dvs. după cum doriți. Cred că o să-ți dai seama singur
Formularul este gata, puteți continua să îl testați și să vedeți dacă mesajul ajunge la adresa de e-mail pe care ați specificat-o.
Totul funcționează bine pentru mine, după ce am făcut clic pe butonul „Trimite”, văd mesajul „ Mesajul a fost trimis cu succes. Mulțumesc. „Puteți testa și vedea ce erori va produce formularul dacă introduceți datele incorect.
În ceea ce privește stilurile CSS, acestea pot fi adăugate la fișierul CSS principal style.css. Folosind firebag, puteți vizualiza id-ul și clasele de câmpuri și le puteți atribui stiluri adecvate.
Modul de contact 7 plugin pentru WordPress foarte funcțional, poți face o formă de orice complexitate, sunt sigur că ești convins de asta. Voi încheia aici, dacă unele puncte nu sunt complet clare, scrieți în comentarii și voi încerca să vă ajut să vă dați seama. Mulțumesc.
Un formular de contact este un atribut integral al majorității site-urilor web. Acesta este motivul pentru care există atât de multe pluginuri de formulare de contact în catalogul WordPress. Unul dintre cele mai populare este Formularul de contact 7. Plugin-ul vă permite să creați formulare de orice fel; foarte flexibil și ușor de configurat; se dezvoltă de mulți ani și conține multe evoluții.
Crearea și afișarea formularelor de contact
Crearea formularelor în panoul de administrare
După instalarea pluginului, va apărea elementul de meniu „Contact Form 7”, prin care puteți crea și șterge formulare.
Formularul din imagine a fost creat automat când a fost activat pluginul.
Vom folosi formularul implicit, pentru a face acest lucru vom crea o pagină „Contactați-mă” și vom introduce acolo codul scurt al formularului.
Partea din față a site-ului
Acum să salvăm articolul și să vedem cum arată formularul nostru (folosind tema Twenty Sixteen):
Imaginea arată formularul după ce scrisoarea a fost trimisă (aceasta este indicată de notificarea din partea de jos a formularului).
Personalizarea formularelor (crearea de formulare complexe)
Exemplul de mai sus arată cum să inserați un formular de contact gata făcut și foarte simplu. Acum să vedem cum să creați o formă mai complexă. Pentru a face acest lucru, să revenim la panoul de administrare, la managerul de formulare și să trecem la editarea formularului implicit.
În câmpul de sus - numele formularului (este vizibil doar în panoul de administrare), indicați un nume care vă este clar, de exemplu: „Feedback despre site”, „Formular de cerere de angajare”, „Formular de feedback” , etc.
Sub titlu este un shortcode. Îl folosim în înregistrări pentru a afișa formularul.
Și mai jos sunt patru file:
- Șablon de formular
- Scrisoare
- Setari aditionale
Să ne uităm la fiecare filă separat.
Șablon de formular
În această filă puteți personaliza câmpurile și aspectul formularului. Spațiul de lucru este editorul HTML WP. Doar în locul butoanelor obișnuite vedem butoane pentru inserarea diferitelor câmpuri de formular.
Dispunerea formularului
Pentru aspect, puteți utiliza etichete html și coduri scurte pentru plugin. Codurile scurte adaugă câmpuri de formular, iar etichetele HTML vă permit să creați o structură HTML personalizată. De exemplu, formularul nostru implicit arată astfel:
Și când este afișat într-o postare, se va transforma în acest HTML:
Sintaxa codului scurt
Să facem clic pe butonul „Text”. Se deschide o fereastră în care putem specifica atribute pentru câmpul de text. Specificați și faceți clic pe „Inserați etichetă”.
Eticheta va fi ulterior convertită într-un câmp text cu cod html:
Shortcode-urile pot fi create convenabil folosind generatorul de shortcode.
Dar constructorul nu vă permite să schimbați codul scurt (puteți crea doar un cod scurt acolo). Există două moduri de a schimba codul scurt:
- ștergeți și creați unul nou folosind constructorul.
- Învățați sintaxa și corectați manual codul scurt al câmpului.
Îți poți da seama singur cu designerul.
Și aici ne vom uita la sintaxa codului scurt.
De exemplu, luați în considerare eticheta câmp de text cu optiuni suplimentare:
Text (necesar) Tipul câmpului: text, selectare, parolă, număr etc. (în acest caz câmpul este text). Stabilește în ce element de formular va fi convertită eticheta noastră și, prin urmare, ce tip de date va accepta. * Un asterisc face câmpul obligatoriu (formularul nu va fi trimis și va fi afișată o notificare că câmpul trebuie completat). numele clientului (necesar) Numele câmpului este folosit ca atribut de nume în introducere și este folosit și la crearea șablonului pentru scrisoarea trimisă. id:my-id Atributul id din intrare cu valoarea my-id. Folosit pentru decorare. class:my-class Atributul de clasă în intrare cu valoarea my-class. Folosit pentru decorare. substituent „Introduceți un nume" Использовать текст "Введите имя" как placeholder. !}
Urmați ordinea atributelor etichetei: mai întâi urmează tipul câmpului, apoi numele acestuia și abia apoi opțiunile suplimentare.
Tipuri de câmpuri
- Câmpuri de text: text, email, tel, url, textarea
- Câmpuri numerice: număr, interval
- Câmpuri pentru dată: dată
- Casete de selectare, radiouri, liste: casetă de selectare, radio, selectare
- Câmp de încărcare fișier: fișier
- CAPTCHA: captchac și captchar
- Sondaje: chestionare
- Câmpul „Accept”: acceptare
- Butonul de trimitere: trimite
- Tip de câmp personalizat
Șablon de scrisoare
În a doua filă, puteți ajusta șablonul (aspectul) și proprietățile scrisorii trimise. În câmpurile acestei file, puteți utiliza etichete speciale de câmp de formular - acest lucru face posibilă transmiterea datelor specificate în formular într-o scrisoare.
Etichetele constau din nume de câmpuri din șablonul de formular. De exemplu, am creat un câmp de text numit: . Acum puteți utiliza eticheta în șablonul de e-mail. În scrisoare, în locul acestei etichete, se va înlocui valoarea câmpului introdus de utilizator (numele complet).
Antetele scrisorilor:
- Anteturi suplimentare - În mod implicit, Răspuns-La: este scris aici. Antetul Răspuns la ne spune că la acest e-mail se poate răspunde făcând clic pe butonul „Răspuns” din program de mail, iar eticheta de formular este numele câmpului din șablon. E-mailul specificat de utilizator va fi inserat în locul acestei etichete. Veți primi ceva de genul Răspuns la: [email protected].
La care - e-mail, unde va fi trimisă scrisoarea. Puteți specifica câte casete doriți, separate prin virgule.
De la cine - nume și e-mail, de la cine a venit scrisoarea. De obicei, e-mailul serverului este indicat aici (de exemplu [email protected]).
Puteți specifica orice e-mail, dar dacă domeniul de e-mail diferă de domeniul site-ului web, formularul nu va fi va fi testatși va „înjura” pe acest parametru, deși scrisorile vor fi în continuare trimise.
Subiect - Titlul scrisorii. Acesta va clarifica din ce formă au fost trimise datele. De exemplu, subiectul scrisorii este „Eroare pe site”, „Comanda sună din nou„ și așa mai departe. Alegeți un antet care facilitează lucrul cu scrisorile primite.
Corpul scrisorii
Aceasta este următoarea parte importantă a acestei file. Textul scrisorii în sine este indicat aici. În text folosim aceleași etichete de formular (numele câmpurilor din șablonul de formular).
Să ne uităm la litera implicită:
Din:<>Subiect: Mesaj: -- Trimis de pe site Studierea pluginului Formular de contact 7 (http://test-wp.ru)
Am avut 4 câmpuri pe care utilizatorul le-a completat. După trimiterea scrisorii, etichetele se vor transforma în valori și vom primi următoarea scrisoare:
De la: Dmitri
Câmpuri opționale din corpul e-mailului
Dacă utilizatorul nu completează un câmp, dar este folosit în corpul scrisorii, atunci corpul scrisorii va fi incomplet. De exemplu, corpul spune Omul din oraș, dar utilizatorul nu a completat câmpul, ceea ce înseamnă că în scrisoare vom primi Omul din oraș... Această linie din scrisoare este redundantă. Pentru a elimina această linie din mesaj, bifați caseta de selectare „Excludeți afișarea liniilor cu etichete de mesaj goale”. Vă rugăm să rețineți că acest lucru va funcționa numai dacă textul și codul scurt al câmpului sunt pe aceeași linie.
Opțiunea „Utilizați formatul de e-mail HTML”. Vă permite să utilizați etichete HTML în corpul scrisorii. În acest caz, puteți utiliza o listă limitată Etichete HTML pentru că nu toată lumea clienți de e-mail sau serviciile sunt capabile să proceseze corect complexul Marcaj HTML. Puteți folosi: tabele, liste cu marcatori, îndrăzneală, paragrafe și așa mai departe. Căutați pe web pentru mai multe detalii.
Formularul de contact 7 vă permite să trimiteți o scrisoare la două adrese, iar setările pentru fiecare scrisoare sunt diferite. Acest lucru poate fi util atunci când trebuie să trimiteți o scrisoare administratorului site-ului cu informatii completeși un duplicat pentru manager, care conține doar date despre comandă.
Notificări la trimiterea unui formular
În această filă, puteți edita mesajele pe care formularul le afișează într-o situație dată: atunci când trimiteți o scrisoare cu succes sau fără succes, sau când există erori.
Etichetele șablonului de e-mail nu funcționează în aceste câmpuri.
Setari aditionale
Această filă este destinată utilizatorilor avansați și vă permite să extindeți capacitățile formularului folosind codul JS. De exemplu, postați evenimente pentru analize.
Voi vorbi despre utilizarea acestei funcționalități într-un articol separat.
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
Ne-am uitat la cum să instalăm și să conectăm acest plugin în lecția „“, acum ne vom da seama funcții suplimentare Pluginul 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 sectiune Panoul 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
- 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
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. Caseta de selectare 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.
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ă. Acestea pot fi aranjate pe rând doar dacă bifați caseta de selectare „Face casetele de selectare reciproc?”. 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.
Pentru ca această funcție să funcționeze, este necesar un alt plugin. 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 dimensiune maximăîn octeți și formate 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; line-height: 1px solid #C7C7C7; ; padding-left: 0 margin-left: 0 ) .wpcf7 select( outline: none; font-size: 16px; font-family: Arial, Helvetica, sans-serif; ) .wpcf7 input: .wpcf7 :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)
- 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;
- culoare- culoarea textului.
- familie de fonturi- fontul câmpurilor de intrare.
- marimea fontului- marimea fontului
- inaltimea liniei- inaltimea liniei
- frontieră- cadru în jurul câmpului de intrare
- cutie-umbră- bloc de umbră. 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
.buttons_form ( umplutură: 0px; înălțime: 30px; lățime: 150px !important; chenar: niciunul !important; cursor: pointer; culoare: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; border-radius: .5em bord: solid 1px #980c10: -webkit-gradient(linear, stânga sus, de la (# aa1317); sus, #ed1c24, #aa1317; filtru: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317");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; -moz-border-radius: 10px; padding: 5px- stânga: 5px lățime: 290px /* Drop shadow: 3px rgba (0,0,0,0.3); -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 (culoare-fond:#ddd; ) /*culoarea fundalului formularului */ .wpcf7 intrare, .wpcf7 textarea( /* Această parte codul este responsabil pentru stilul câmpurilor de intrare, zonelor de text */ padding:5px; /* Setează indentarea de la marginile elementului la conținutul acestuia, puteți seta 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; /* Mărginire în jurul câmpurilor. Prima valoare este lățimea în pixeli, a doua este stilul chenarului, a treia este culoarea acestuia */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Umbră din câmpurile de intrare. 2px - deplasare pe axa x, 2px - deplasare pe axa y, 8px - raza de estompare a umbrei, #F9F9F9 - culoarea umbrei */ -webkit-transition: toate 0.2s ease; -moz-tranziție: toate 0.2s ușurință; -o-tranziție: toate 0.2s ușurință; tranziție: toate 0.2s 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; margine -left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active , .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Această parte este responsabilă pentru stilul câmpurilor de introducere când treceți mouse-ul peste ele */ fundal: #FDFDFD; /* Fundalul câmpurilor câmp de introducere când treceți cursorul mouse-ului pe acesta */ outline: none /* Marginea exterioară a câmpului de introducere a textului */ ) .wpcf7 input.wpcf7-submit(/* Această parte a codului este responsabilă pentru stilul Trimitere; butonul în forma */ -webkit-transiție: 0 -o-transiție: /* Text-transform; majuscule înseamnă că va fi afișat textul de pe buton cu litere mari ) */ /* Rotunjirea colțurilor butonului. Valorile următoarelor trei proprietăți ar trebui să fie aceleași, 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 cursorului - Stilați butonul când treceți cu mouse-ul. 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): 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)); -moz-linear-gradient (sus, #FF0000, #246416); 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ă: 20px /* Umplutură interioară */ /* Colțuri rotunjite pentru diferite browsere - următoarele 3 proprietăți */ -webkit-border-radius: 10px; 10px; border-radius: 10px ) .wpcf7 .wpcf7-mail-sent-ok( /* Stilul mesajelor de succes */ border:none; /* Cadrul de blocare a mesajelor */ background-color:#7ad33f; /* / margin:0 /* Umplutură exterioară */ padding: 20px /* Colțuri rotunjite pentru diferite browsere - următoarele 3 proprietăți */ -webkit-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- rază: 10px; rază-chenar: .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color:#349622; umplutură: 5px; padding-stânga: 5px; padding-dreapta: 5px; raza-chenar:10px; lățime: 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;
Formularul de contact 7 poate gestiona mai multe formulare de contact în care puteți personaliza în mod flexibil conținutul formularelor și e-mailurilor cu un aspect destul de simplu. Formularele au suport încorporat pentru trimiterea Ajax, CAPTCHA, filtrul de spam Akismet și multe altele.
Documentare și suport
Capturi de ecran
Instalare
- Încărcați întregul folder contact-form-7 în directorul /wp-content/plugins/.
- Activați pluginul din pagina Plugin-uri din tabloul de bord WordPress.
În meniul consolei WordPress, veți găsi fila „Feedback”.
Pentru a afla cum să utilizați corect pluginul, puteți vizita pagina sa de pornire.
Recenzii
Văd că mulți oameni detestă acest plugin pentru că folosesc o versiune neacceptată care este inclusă într-o temă - tot ce pot spune din propria mea experiență este că, după ce l-au folosit de câțiva ani pe multe site-uri, este un mare mulțumesc pentru dezvoltatorii care îl mențin actualizat și gratuit pentru toată lumea. Este extrem de ușor de configurat și de personalizat. Noroc!
Participanți și dezvoltatori
„Contact Form 7” este un proiect open source cod sursa. Următorii colaboratori au contribuit la dezvoltarea pluginului:
ParticipanțiiSchimbă jurnalul
Pentru obtinerea Informații suplimentare vezi Lansări.
5.1.6
- CSS: elimină o regulă de stil din foaia de stil care nu era necesară și care intra în conflict cu regulile lui Twenty Twenty.
- API REST: preia ID-ul formularului de contact în mod explicit din parametrii rutei.
5.1.5
- Validator de configurare: element de testare nou pentru eroarea unavailable_html_elements.
- Validator de configurare: element de testare nou pentru eroarea attachments_overweight.
5.1.4
- reCAPTCHA: Prezentarea constantelor WPCF7_RECAPTCHA_SITEKEY și WPCF7_RECAPTCHA_SECRET.
- reCAPTCHA: Vă prezentăm cârligele de filtrare wpcf7_recaptcha_sitekey și wpcf7_recaptcha_secret.
- Adăugarea parametrului $status la filtrul wpcf7_form_response_output.
- Generează un cod aleator atunci când utilizatorul este un utilizator înregistrat.
- Vă prezentăm WPCF7_ContactForm::unit_tag(), o metodă publică care returnează o etichetă de unitate.
- reCAPTCHA: emite un mesaj diferit în jurnalul de spam în cazurile în care jetonul de răspuns este gol.
- Indicator de consimțământ: acceptă opțiunea label_first în eticheta de consimțământ al formularului.
5.1.3
- S-a remediat o eroare care a dus la imposibilitatea de a deselecta o opțiune din fila Mail.
5.1.2
- Contact constant: introdus selectorul listei de contacte.
- Contact constant: Prezentat personalizare suplimentară contact constant.
- reCAPTCHA: introduse wpcf7_recaptcha_actions și wpcf7_recaptcha_threshold filtru cârlige.
5.1.1
- reCAPTCHA: modifică răspunsul la jetoanele de răspuns goale.
5.1
- Modulul de integrare Constant Contact a fost introdus.
- Modulul reCAPTCHA a fost actualizat pentru a suporta reCAPTCHA v3.
- Adaugă reguli de stil Dark Mode.
5.0.5
- S-a rezolvat problema de inconsecvență între get_data_option() și get_default_option() în clasa WPCF7_FormTag.
- gemuri erori PHP, care rezultă din apeluri la unlink().
- S-a introdus wpcf7_is_file_path_in_content_dir() pentru a suporta constanta UPLOADS.
5.0.4
- Setează explicit argumentul power_type în apelul register_post_type() pentru a remedia o problemă cu escaladarea neautorizată a privilegiilor.
- Atașamentul fișier local— este interzisă specificarea căilor absolute către fișierele aflate în afara directorului wp-content.
- Validator de configurare - Adaugă un element de testare pentru a detecta setările incorecte ale fișierului atașat.
- S-a remediat o eroare în caracteristica de compatibilitate inversă JavaScript pentru browsere învechite, care nu acceptă atributul substituent HTML5.
- Caseta de validare Consimțământ - dezactivează funcția de nu stocare a etichetei de formular.
5.0.3
- CSS: se aplică stilul cursorului „nepermis” atunci când treceți cu mouse-ul peste butoanele de trimitere în stare inactivă.
- Caseta de validare Consimțământ: revizuire interfața cu utilizatorul generator de etichete pentru a încuraja utilizarea cele mai bune opțiuni protectia datelor cu caracter personal.
- Implementarea funcției wpcf7_anonymize_ip_addr().
- S-a introdus opțiunea consent_for:storage pentru toate tipurile de etichete de formular.
5.0.2
- A fost adăugată o secțiune „Notificări privind confidențialitatea” în fișierul readme.txt.
- Conținut actualizat în metablocul Informații.
- Folosiți get_user_locale() în loc de get_locale() acolo unde este mai potrivit.
- Indicator de consimțământ: Resetează starea dezactivată a butoanelor de trimitere după aplicarea cu succes.
5.0.1
- S-a remediat utilizarea incorectă a _n().
- Verificare configurare: S-a remediat numărul incorect de avertismente în fila Opțiuni avansate.
- Verificarea configurației: S-a remediat gestionarea incorectă a etichetei de e-mail speciale [_site_admin_email] în câmpul de antet De la.
- Caseta de validare Acceptare: Atributele specificate de clasă și id au fost aplicate elementului HTML greșit.
- Verificare configurație: dacă pentru cutii poştale, cum ar fi Cc sau Reply-To, există un antet de e-mail suplimentar, dar o posibilă valoare goală, o eroare „Sintaxă nevalidă a cutiei poștale” va fi returnată.
- Specificați în mod explicit al patrulea parametru la add_action() pentru a evita transmiterea unor valori neintenționate ale parametrilor.
- Verificați dacă directorul țintă este gol înainte de a-l șterge.
5.0
- Setări suplimentare: on_sent_ok și on_submit au fost eliminate.
- Setare suplimentară nouă: skip_mail.
- Flamingo: cu capul canal de intrare se modifică atunci când titlul formularului de contact corespunzător se modifică.
- evenimente DOM. Întregul obiect de răspuns API este accesibil prin proprietatea event.detail.apiResponse.
- HTML Mail: adaugă atribute legate de limbă la antetul HTML.
- Încărcare fișier: setează atributul de acceptare în câmpul de încărcare.
- A fost introdusă o nouă clasă WPCF7_MailTag.
- Vă permite să anulați o încercare de a trimite e-mail folosind cârligul de acțiune wpcf7_before_send_mail. În plus, puteți seta o stare personalizată și un mesaj prin intermediul unui interceptor de acțiuni.
- Caseta de validare Acceptare: Vă permite să specificați condiții în porțiunea de conținut a etichetei de formular.
- Caseta de validare Acceptare: acceptă parametrul opțional.
- Noi etichete speciale de e-mail: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_name], [_user_name], [_user_name] [_nume_afișat_utilizator].
- Cârlige noi de filtrare: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) și wpcf7_mail_tag_replaced_($type)
- Noi funcții de etichetă de formular: zero-control-container și not-for-mail
