Formular de contact 7 stiluri wordpress gata făcute.

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.

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

  1. Încărcați întregul folder contact-form-7 în directorul /wp-content/plugins/.
  2. 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.

Participanți și dezvoltatori

Formularul de contact 7 este un proiect open source. Următorii colaboratori au contribuit la dezvoltarea pluginului:

Participanții

Schimbă jurnalul

Pentru mai multe informații, consultați Lansări.

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: este introdusă o setare suplimentară, constant_contact.
  • 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 o problemă de inconsecvență între get_data_option() și get_default_option() în clasa WPCF7_FormTag.
  • Suprimă erorile PHP care apar la apelarea 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.
  • Fișier atașat 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 browserele vechi 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: aplică stilul cursorului „nepermis” pentru a trimite butoanele în starea „dezactivată”.
  • Caseta de validare Acceptare: revizuiește interfața de utilizare a generatorului de etichete pentru a încuraja utilizarea unor opțiuni mai bune în ceea ce privește protecția datelor cu caracter personal.
  • Introduce funcția wpcf7_anonymize_ip_addr().
  • A introdus opțiunea consent_for:storage pentru toate tipurile de etichete de formular.

5.0.2

  • S-a adăugat secțiunea Notificări de confidențialitate în fișierul readme.txt.
  • S-a actualizat conținutul metacasetei Informații.
  • Folosiți get_user_locale() în loc de get_locale() acolo unde este mai potrivit.
  • Caseta de validare Acceptare: Resetați starea dezactivată a butoanelor de trimitere după o trimitere cu succes.

5.0.1

  • S-au remediat utilizările incorecte ale _n().
  • Validarea configurației: S-a remediat numărul incorect de alerte din panoul de filă Setări suplimentare.
  • Validarea configurației: S-a remediat tratamentul necorespunzător pentru eticheta de e-mail specială [_site_admin_email] în câmpul De la antetul e-mailului.
  • Caseta de validare Acceptare: Atributele de clasă și id specificate au fost aplicate elementului HTML greșit.
  • Validarea configurației: Când există un antet de e-mail suplimentar pentru cutiile poștale, cum ar fi Cc sau Răspunde-To, dar are o posibilă valoare goală, va fi returnată eroarea „Sintaxă nevalidă a cutiei poștale”.
  • Specificați în mod explicit al patrulea parametru al add_action() pentru a evita transmiterea unor valori neintenționate ale parametrilor.
  • Verificați dacă directorul țintă este gol înainte de a elimina directorul.

5.0

  • Setări suplimentare: on_sent_ok și on_submit au fost eliminate.
  • Setare suplimentară nouă: skip_mail
  • Flamingo: titlul canalului de intrare se modifică odată cu modificarea titlului formularului de contact corespunzător.
  • Evenimente DOM: faceți accesibil un întreg obiect de răspuns API prin proprietatea event.detail.apiResponse.
  • Poștă HTML: adaugă atribute legate de limbă la antetul HTML.
  • Încărcare fișier: setează atributul de acceptare la un câmp de încărcare.
  • Prezintă clasa 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: Permite specificarea unei declarații de condiții în partea de conținut a etichetei de formular.
  • Caseta de validare Acceptare: acceptă opțiunea 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] [_user_display_name]
  • 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

Folosind pluginul Formular de contact. Dar, de-a lungul timpului, s-a înțeles că capacitățile acestui plugin în mod clar nu sunt suficiente și cel mai mare dezavantaj este că vă permite să creați un singur formular de feedback.

Se pare că nu există nicio problemă, de fapt. Dar unii proprietari de site-uri web au nevoie de mai mult de un formular de feedback, care poate fi localizat nu numai pe pagina „Feedback” sau „Contact”, ci și pe orice alte pagini sau postări.

În acest tutorial vreau să vă arăt cum să creați un formular de feedback folosind un alt plugin, mai funcțional și puțin mai complex decât cel discutat în ultimul post. Să începem?

Descrierea pluginului

Pluginul Contact Form 7 vă permite să creați multe formulare diferite pentru a trimite rezultate în căsuța dvs. de e-mail. Absolut totul poate fi personalizat - aspectul formularului, ordinea câmpurilor, numele inscripțiilor, formatul mesajelor de e-mail, alegerea destinatarilor răspunsului. În general, pluginul este într-adevăr foarte funcțional și cool.

În plus, puteți conecta pluginul Akismet la acesta pentru protecție anti-spam, îl puteți implementa și, de asemenea, puteți utiliza funcționalitatea multilingvă. Acest lucru, după părerea mea, este cool! :-)

Instalarea pluginului Contact Form 7

Pluginul este instalat în mod standard în WordPress. Accesați secțiunea „Plugin-uri” - „Adăugați nou”, introduceți numele Formular de contact 7 și instalați-l din depozit. Nu uitați să activați imediat după instalare.

Configurarea formularului de contact 7

După activarea pluginului, un nou element „Contacte (CF7)” va apărea în meniul principal WordPress; acesta este locul principal pentru configurarea formularelor de feedback. Numărul de formulare este nelimitat.

O listă a formularelor existente este disponibilă în secțiunea „Formulare de contact”:

Aici puteți copia codul scurt dorit pentru a-l lipi într-o pagină sau postare:

Adăugarea unui nou formular de feedback

După cum puteți vedea, nu există elemente suplimentare speciale în meniu, așa că să trecem la crearea formularului de feedback în sine. Pentru a face acest lucru, selectați elementul „Adăugați nou” din meniul principal.

În primul rând, ni se cere să selectăm limba interfeței formularului care va fi creat. WordPress detectează versiunea instalată pe site-ul dvs. și vă solicită să o selectați ca implicită:

Dar puteți selecta orice limbă disponibilă din listă:

După ce faceți clic pe butonul „Adăugați nou”, va apărea designerul de formulare.

Schimbarea numelui formularului

În primul rând, trebuie să introducem numele formularului nostru pentru a nu ne pierde în lista de formulare când sunt prea multe. Pentru a face acest lucru, faceți clic pe cuvântul „Titlu” în zona de sus a ecranului:

După aceasta, va apărea un câmp de text în care introducem un nume cu o descriere:

Odată ce pagina se reîmprospătează, veți vedea următorul mesaj:

Puteți copia shortcode-ul propus și îl puteți lipi pe pagina de care aveți nevoie.
Dar puteți face acest lucru mai târziu, după ce ați configurat formularul. Alegerea este a ta.

Modificarea șablonului de formular

Un șablon de formular este un cod HTML simplu care definește aspectul formularului. În mod implicit, conține 4 câmpuri (Nume, E-mail, Subiect și Mesaj) și un buton de trimitere a formularului. Arata cam asa:

Puteți schimba blocurile prin simpla tăiere și lipire a codului lor oriunde.
De exemplu, putem schimba câmpul adresei de e-mail și numele clientului:

Sau putem elimina câmpul „Subiect” astfel încât să nu apară în formularul nostru. Pentru a face acest lucru, ștergeți blocul de text corespunzător din șablonul nostru:

Un asterisc lângă codul elementului înseamnă că acest câmp este obligatoriu și până când clientul introduce o valoare, formularul nu va fi trimis:

Cum să adăugați un câmp nou într-un formular

Imaginați-vă că trebuie să adăugați un câmp cu o adresă de site web la un formular standard. Designerul de formulare al acestui plugin vă permite să vă implementați planurile fără probleme. Folosiți doar butonul „Generează etichetă”:

Când faceți clic, va apărea o listă imensă de câmpuri suplimentare posibile:

Tot ce trebuie să faceți este să selectați tipul de câmp de care aveți nevoie și să efectuați o serie de pași simpli.

Nu vă alarmați. Deși setările par intimidante, sunt de fapt foarte simple :-)

Caseta de selectare „Câmp obligatoriu” vă permite să setați verificări suplimentare și, atâta timp cât acest câmp rămâne gol sau are o valoare incorectă, formularul nu va fi trimis. Aproape toate tipurile de câmpuri au această setare:

În plus, multe dintre câmpurile noastre de formular au aceleași setări de nume, ID element și clasă CSS, prin care puteți modifica aspectul acestor câmpuri. Sunt prezente în aproape toate domeniile:

Câmpul „Nume” este cel mai important; este folosit atât în ​​șablonul de formular, cât și în șablonul de scrisoare.

Dar în timp ce folosesc acest plugin, nu am fost niciodată nevoit să schimb sau să setez valorile acestor atribute. Cel mai probabil nici nu vei avea nevoie de el. Dar trebuie să le spun și să le prezint :-)

Toate câmpurile text din constructorul nostru de formulare au câmpuri suplimentare cu dimensiunea câmpului în sine și lungimea maximă a valorii, iată-le:

De asemenea, anumite câmpuri, cum ar fi URL sau alte câmpuri, altele decât cele cu text obișnuit, au propriile setări speciale. De exemplu, câmpul nostru URL are o setare suplimentară:

Nu voi lua în considerare absolut toate setările, pentru că... sunt prea multe și sunt specifice fiecărui tip de câmp. Ei bine, dacă deodată mai aveți nevoie de aceste informații, atunci scrieți despre ele în comentariile la această postare și voi pregăti o prezentare suplimentară a setărilor.

Acum trebuie să adăugăm codul pentru acest câmp în formularul șablon de formular.
Pentru a face acest lucru, trebuie să copiați codul propus și să-l lipiți în formularul din stânga:

De exemplu, vreau să plasez un câmp cu adresa site-ului web după numele clientului. Va trebui să introduc un cod similar cu alte câmpuri, adică să adaug un paragraf, o întrerupere de linie și să introduc codul scurt al acestui nou câmp:

Ei bine, pentru ca valoarea acestui câmp să ne fie trimisă prin e-mail, această valoare trebuie copiată:

Și inserați în câmpul de text de mai jos în „Șablon de e-mail”:

Alte câmpuri sunt adăugate în mod similar. Totul este simplu si clar :-)

Destinatar și șablon de scrisoare

Acum să ne uităm la setările care sunt luate în considerare la trimiterea unui mesaj. În cazul nostru, acesta este destinatarul (aproape întotdeauna tu) și șablonul scrisorii care va fi trimis la adresa de e-mail specificată după trimiterea mesajului.

În primul rând, trebuie să specificați destinatarul căruia vor fi trimise mesajele de e-mail din formularul nostru. În mod implicit, aici este inserată adresa de e-mail din setările WordPress.

Cred că ați observat deja că aceste forme folosesc coduri de neînțeles, precum , . Deci, acesta este același câmp „Nume” din generatorul de câmp despre care am discutat mai sus:

Ei bine, atunci tot ce trebuie să faci este să aranjezi șablonul scrisorii în sine:

Puteți folosi toate câmpurile pe care le-ați creat automat prin butonul „Generează etichetă” sau puteți părăsi formularul standard dacă nu ați modificat nimic în setări.

P.S. În setările acestui plugin există o oportunitate destul de interesantă - de a specifica un al doilea destinatar al mesajului. Sincer să fiu, nu mă pot gândi imediat de ce ar putea fi nevoie de acest lucru, dar, din moment ce există o oportunitate, oricum cineva va profita de ea.

Configurarea mesajelor

Ei bine, ce fel de plugin de trimitere a mesajelor este acesta dacă nu vă permite să schimbați textul notificărilor sau al inscripțiilor? Iar pluginul Contact Form 7 nu face excepție. Vă permite să traduceți orice text sau mesaj de eroare:

probleme cunoscute

Se întâmplă că atunci când utilizați controale non-standard, cum ar fi e-mailul sau adresa URL, aspectul elementelor individuale pe pagină va fi diferit. De exemplu, acordați atenție câmpului „Adresa site-ului dumneavoastră web” din formularul în sine:

Nu ai văzut? Și vă arăt mai aproape:

În general, problema este că aspectul unor astfel de câmpuri este vizual diferit de câmpurile de text standard. Compară-l cu câmpul „Numele tău”, vei înțelege imediat totul.

Există două soluții posibile aici. Primul lucru este să adăugați stilurile corespunzătoare în fișierul style.css al temei sau să schimbați tipul de adresă URL în text în șablonul de formular, apoi totul va fi bine:

Concluzie

Cred că revizuirea modalităților de a crea formulare de feedback poate fi considerată complet închisă, iar subiectul în sine a fost luat în considerare în sus și în jos.

Desigur, va exista cu siguranță cineva care fie nu reușește, fie dorește să sugereze un alt plugin similar pentru luare în considerare. Sunt mereu fericit să pun întrebări și sugestii! Nu ezitați să-i întrebați în comentarii :-)

Dacă vrei să-mi mulțumești pentru material, o poți face aici :-)

Dacă găsiți o eroare, evidențiați o bucată de text și faceți clic Ctrl+Enter.