Creați un formular de contact și trimiteți-l prin e-mail. Conectarea fișierului PHP și configurarea acestuia. Efect de strălucire în jQuery

• Pasul 5. Folosind exemplul de mai sus, adăugați restul câmpurilor de care aveți nevoie, de fiecare dată începând cu eticheta

  . Pentru a seta câmpul cu mesaj text utilizați eticheta . Opțiuni " cols" Și " rânduri" sunt responsabili pentru lățimea și înălțimea câmpului de text. Puteți seta parametrii care vă plac cel mai mult. Ar trebui să obțineți ceva similar cu ceea ce este afișat în captura de ecran de mai jos.

• Pasul 6. Pentru a vă proteja de roboți, dintre care astăzi există destul de mulți pe internet, creați o altă linie folosind eticheta . Datorita parametrului " stil="display:none" „Acest câmp nu va fi vizibil pentru simpli muritori, ci va fi completat automat de către roboți. Astfel, veți putea întotdeauna să distingeți o persoană vie de un program.

• Pasul 7. Etapa finală a marcajului va fi crearea unui buton de trimitere. Eticheta este folosită pentru aceasta . Crea bloc nou

  iar in interiorul acestuia introduceti codul butonului cu urmatorii parametri:

  Trimite un mesaj . Ar trebui să obțineți un rezultat similar cu cel arătat în captură de ecran.

Lucrul cu foi de stil în cascadă (CSS)

• După cum ați observat deja în timpul procesului de marcare, am ajuns să avem ceva foarte strâmb, discret și dezgustător. Pentru a da formularului de feedback un aspect mai mult sau mai puțin îngrijit, o singură limbă HTML nu va fi suficient. În acest scop va trebui să recurgeți la utilizarea stilurilor CSS.
• Dacă ați urmat sfatul pentru a vă îmbunătăți abilitățile de bază privind resursa htmlbook.ru, apoi setați anumiti parametri proiectare pentru toate părțile formularului folosind CSS Nu va fi greu pentru tine. Dacă nu aveți dorința sau timpul să vă ocupați de toate acestea, atunci vă vom furniza un cod gata făcut și vă vom spune cum să îl conectați.

Conectați stiluri CSS La HTML se poate face în două moduri:

• Copiați codul din fișierul nostru de tabele în cascadă în partea de jos a fișierului stil.css, care este prezent pe site-ul de gazduire
• Mutați fișierul nostru de stil în găzduirea dvs. și conectați-l

Fişier stil.css se conectează în interiorul etichetei folosind un script . Dacă fișierul cu stiluri nu se află în același folder cu fișierul html principal, atunci trebuie să specificați calea către acesta. În fișierul nostru de stil, fiecare element are o desemnare. Dacă doriți, puteți modifica parametrii pentru dvs., ghidându-vă doar de abilitățile de bază de programare.

Conectarea fișierului PHP și configurarea acestuia

După cum am menționat mai devreme, scenariul PHP este responsabil pentru executarea formularului de feedback. Cu toate acestea, pentru a înțelege mai mult sau mai puțin cum funcționează limbajul PHP, trebuie citit volum mare literatură și petrec o cantitate decentă de ore exersând. Prin urmare, așa cum este cazul cu CSS, vă vom furniza un fișier gata făcut cu un script PHP, pe care trebuie doar să îl atașați documentului împreună cu formularul.

Spre deosebire de dosar stil.css, fișierul cu scriptul PHP este atașat în proprietățile formularului propriu-zis. Să începem în ordine:

• Pasul 1. Deschideți codul pe care l-ați scris mai devreme și găsiți linia cu eticheta deschisă forme. Adăugați proprietăți la acesta " action="contact-form.php"" Și " method="post"" Vezi exemplul din captura de ecran.

• Pasul 2. Descărcați fișierul nostru php și plasați-l pe găzduirea dvs. în același folder în care se află documentul html cu formularul. Deci php și fișiere html vor interacționa între ele.

• Pasul 3. Apoi, trebuie să personalizați scriptul pentru dvs. Deschideți fișierul și setați variabilele, dându-le aceleași nume ca în script html. Dacă ați adăugat câmpuri suplimentare la formular, adăugați-le în scriptul php exact așa cum se arată în captură de ecran.

• Pasul 4. Apoi, trebuie să adăugați încă două variabile cu adresa dvs E-mailși subiectul scrisorii, care va fi afișat în căsuța dvs. de e-mail. În linie cu variabila " $adresa„Indicați-vă adresa de e-mail, iar pe rând” $sub» subiectul e-mailului, așa cum se arată în captură de ecran.

• Pasul 5. În linie cu variabila " $mes» personalizați formatul scrisorii pe care o veți primi pe e-mail. Îl puteți rescrie neschimbat sau îl puteți edita după bunul plac.

• Pasul 6. Toate celelalte linii sunt responsabile pentru trimiterea mesajului și conțin setări de protecție împotriva botului, așa că trebuie lăsate neschimbate. În cele din urmă, codul complet ar trebui să arate ceva ca captura de ecran de mai jos.

După parcurgerea tuturor pașilor, veți primi acest formular de feedback simplu și îngrijit.

O selecție de formulare frumoase de feedback de design în HTML și CSS pentru diverse scopuri

• Pe baza instrucțiunilor de mai sus, puteți „desena” cu ușurință un formular de feedback care să se potrivească gusturilor dvs. Cu toate acestea, dacă nu aveți timp sau dorința de a crea singur un formular de la zero, puteți găsi formulare de designer gata făcute pe Internet și având abilități de bază HTML editați-le pentru a se potrivi nevoilor dvs.

• După câteva căutări, am găsit pentru tine o selecție de 35 formulare frumoase de feedback de design pop-up care sunt scrise în HTMLȘi CSS. Aceste forme sunt potrivite pentru motoare precum WordPressȘi Joomla, au un simplu și configurare ușoară de la panoul de control și sunt, de asemenea, grozave pentru site-urile fără motor.

VIDEO: Formular pop-up de feedback pentru un site WordPress

Una dintre cele mai frecvente sarcini în practică este implementarea unui formular de feedback. Adică să-i scrii codul HTML, să-l proiectezi în CSS, să creezi Script PHP a, care ar procesa datele primite de la utilizator și le-ar trimite pe e-mailul nostru, scriind un script JS care ar verifica formularul pentru caracterul adecvat al datelor introduse, protejându-ne creația de spam, astfel încât Cutie poștală nu sa prăbușit din cauza atacurilor botului.

Toate punctele de mai sus vor fi discutate în recenzia noastră și comentate în detaliu.

Deci, să începem să creăm un formular de feedback:

HTML

În primul rând, scriem cod HTML, care specifică câmpurile pe care utilizatorul le va completa. Acestea vor fi oficializate în viitor. Codul formularului arată astfel:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Nume: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Mesaj: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Trimite" />

Și vizual acum arată așa:

Sunt de acord, până acum totul este urât și nimic clar, dar tocmai am început.

Să ne uităm la codul de mai sus în detaliu:

• < form method= "post" action= "mail.php" > …

  
  Pentru a crea un formular, trebuie să utilizați eticheta de formular. El este cel care determină începutul și sfârșitul formei pentru interpretul de cod. Ea, ca orice etichetă, are un întreg set de atribute, dar sunt necesare doar două pentru ca formularul să funcționeze, acestea sunt metoda (metoda de trimitere a unei cereri către server, postarea este folosită ca standard pentru formulare) și acțiunea ( indică calea către fișierul de gestionare a formularelor, și anume în Acest fișier va conține un script PHP, care ne va trimite apoi valorile introduse de utilizator prin e-mail. În cazul nostru, vedem că acest fișier se numește mail.php și se află în același director de site cu pagina pe care o luăm în considerare).

• < input maxlength= "30" type= "text" name= "name" />

  
  În continuare avem intrări. Acestea sunt de fapt câmpurile de formular în care utilizatorii vor introduce informațiile de care avem nevoie (type="text" indică faptul că acesta va fi text). Atributul maxlength specifică câte caractere poate introduce utilizatorul într-un anumit câmp de formular. Cel mai atribut important acesta este numele – specifică numele unui anumit câmp. Prin aceste nume scriptul PHP va procesa ulterior informațiile care îl introduc. Dacă doriți, puteți seta și atributul substituent, care afișează text în interiorul câmpului care dispare atunci când cursorul este plasat în interiorul acestuia. Una dintre problemele cu substituentul este că nu este acceptat de unele browsere mai vechi.

• < label for = "name" >Nume:

  
  Folosit dacă avem substituenți abandonați. Semnătura obișnuită de câmp, atributul for spune la ce câmp specific se referă această semnătură. Valoarea indică numele câmpului care ne interesează.

• < textarea rows= "7" cols= "50" name= "message" >

  
  La fel ca intrarea, este destinat ca utilizatorul să introducă informații, doar că de această dată câmpul este conceput mesaje lungi. Rânduri specifică dimensiunea câmpului în rânduri, cols în caractere. În general, ei stabilesc înălțimea și lățimea câmpului nostru.

• < input type= "submit" value= "Trimite" />

  
  Type="submit" ne spune că acesta este un buton pentru trimiterea unui formular, iar value specifică textul care va fi în interiorul acestui buton.

• < div class = "right" >

  
  folosit doar pentru mai departe design vizual forme.

CSS

Pentru ca formularul nostru de feedback să pară prezentabil, trebuie să fie formatat. Pentru a obține următorul rezultat:

Am folosit acest cod:

formular ( fundal: #f4f5f7; umplutură: 20px; ) formular . stânga, formă . dreapta (afișare: bloc inline; aliniere verticală: sus; lățime: 458px; ) form . dreapta ( padding- stânga: 20px; ) etichetă ( afișare: bloc; dimensiunea fontului: 18px; text- align: center; margine: 10px 0px 0px 0px; ) intrare, textarea ( chenar: 1px solid #82858D; padding: 10px; dimensiunea fontului: 16px; lățime: 436px; ) textarea (înălțime: 98px; marginea jos: 32px; ) input[ type= "submit" ] ( lățime: 200px; flotant: dreapta; chenar: niciunul; fundal: #595B5F; culoare: #fff; transformare text: majuscule; )

Nu văd rostul în a descrie CSS în detaliu; vă voi atrage atenția doar asupra punctelor cheie:

1. Nu este nevoie să scrieți un design pentru fiecare etichetă din formular. Încercați să vă construiți selectoarele în așa fel încât să puteți proiecta toate elementele de care aveți nevoie în câteva linii de cod.
2. Nu utilizați etichete de tip inutile pentru a întrerupe linii și a crea indentări < br>, < p> etc. CSS cu afișaj: bloc și margine cu proprietăți de umplutură se descurcă bine acestor sarcini. Mai multe despre de ce nu ar trebui să-l folosești < br> în aspect, în general, puteți citi în articolul Tag br, dar este chiar necesar? .
3. Nu merită folosit aspect tabelar pentru formulare. Acest lucru contrazice semantica acestei etichete, iar motoarele de căutare adoră codul semantic. Pentru a forma structura vizuală a documentului, ne este suficient etichete div, și dat de ei în Proprietăți CSS display: inline-block (aranjează blocurile pe rând) și vertical-align: top (le împiedică să se împrăștie pe ecran), setați-le la înălțimea necesară și voila, nimic de prisos și totul este amplasat așa cum avem nevoie.

Pentru cei care doresc să-și economisească timp în designul site-urilor, le pot recomanda utilizarea cadrelor CSS atunci când creează site-uri web, în ​​special cele scrise de sine stătătoare. Alegerea mea în acest sens este Twitter Bootstrap. Puteți urmări o lecție despre cum să proiectați formulare folosindu-l.

PHP

Ei bine, este timpul să ne facem forma să funcționeze.

Mergem în directorul nostru rădăcină al site-ului și creăm acolo fișierul mail.php, la care am specificat anterior calea în atribut de acțiune eticheta de formular.

În cele din urmă, codul său va arăta astfel:

\" javascript: history.back()\" >Înapoi

Puteți sări peste discuția despre porțiunile HTML și CSS ale acestui document. La baza ei este pagina obisnuita site, pe care îl puteți proiecta în funcție de dorințele și nevoile dvs. Să ne uităm la partea sa cea mai importantă - scriptul PHP pentru procesarea formularului:

$back = "

\" javascript: history.back()\" >Înapoi

Cu această linie creăm un link la care să revenim pagina anterioară. Deoarece nu știm dinainte de pe ce pagină va ajunge utilizatorul la aceasta, acest lucru se face folosind o funcție JS mică. În viitor, vom accesa pur și simplu această variabilă pentru a o afișa în locurile de care avem nevoie.

dacă (! gol ($_POST [ „nume” ] ) și ! gol ($_POST [ „telefon” ] ) și ! gol ($_POST [ „mail” ] ) și ! gol ($_POST [ „mesaj” ] ) ) ( //partea internă a handler-ului) altfel ( ecou „Pentru a trimite un mesaj, completați toate câmpurile! $back”; Ieșire ; )

Aici adăugăm o verificare a formularului pentru a ne asigura că câmpurile sunt pline. După cum ați ghicit, în partea $_POST[„nume”] scriem valoarea între ghilimele atributul numelui intrările noastre.

Dacă toate câmpurile sunt completate, atunci scriptul va începe să prelucreze datele în partea sa internă, dar dacă cel puțin un câmp nu a fost completat, atunci va fi afișat un mesaj pe ecranul utilizatorului prin care îi va cere să completeze toate câmpurile. câmpurile formularului ecou „Pentru a trimite un mesaj, completați toate câmpurile! $back” și un link pentru a reveni la pagina anterioară pe care am creat-o chiar de la prima linie.

Apoi lipim în partea internă a handler-ului de formulare:

$nume = trim(strip_tags($_POST["nume"])); $telefon = trim(strip_tags($_POST[„telefon”])); $mail = trim(strip_tags($_POST["mail"])); $mesaj = trim(strip_tags($_POST[„mesaj”]));

În acest fel, am șters datele introduse de utilizator etichete htmlȘi spatii suplimentare. Acest lucru ne permite să ne protejăm de a primi cod rău intenționatîn mesajele trimise către noi.

Verificările pot fi făcute mai complicate, dar acest lucru este la discreția dumneavoastră. Am instalat deja o protecție minimă pe partea serverului. Vom face restul pe partea clientului folosind JS.

Nu recomand abandonarea completă a protecției formularelor pe partea de server în favoarea JS, deoarece, deși extrem de rare, există unele unice cu JS dezactivat în browser.

După curățarea etichetelor, adăugați trimiterea unui mesaj:

Poștă ( „[email protected]”, „Scrisoare de la adresa_site-ului dvs.”, "Ți-am scris: " . $nume . "
Numărul lui: " . $telefon ."
Poșta lui: „ . $mail . "
Mesajul lui: „. $mesaj „Content-type:text/html;charset=windows-1251”) ;

Această linie este responsabilă pentru generarea și trimiterea mesajului către noi. Se completează după cum urmează:

1. „[email protected]” – aici introduceți adresa de e-mail între ghilimele
2. „Scrisoare de la adresa_site-ului tău” este subiectul mesajului care va fi trimis pe e-mailul tău. Aici poți scrie orice.
3. „Ți-am scris: „.$name”. < br /> Numărul lui: „.$telefon”. < br /> E-mailul lui: „.$mail”. < br /> Mesajul lui: „.$mesaj – formăm textul mesajului propriu-zis. $nume – introducem informațiile completate de utilizator accesând câmpurile de la pasul anterior, în ghilimele descriem ce înseamnă acest câmp, cu eticheta < br /> Întrerupem linia astfel încât mesajul în ansamblu să fie lizibil.
4. Content-type:text/html;charset=windows-1251 - la sfârșit există o indicație explicită a tipului de date transmis în mesaj și codificarea acestuia.

IMPORTANT!

Codificarea specificată în „capul” documentului ( < meta http- equiv= "Content-Type" content= „text/html; charset=windows-1251” /> ), codificarea din mesajul Content-type:text/html;charset=windows-1251 și codificarea în general fișier PHP trebuie să se potrivească, altfel mesajele primite prin e-mail vor afișa „krakozyabry” în loc de litere rusești sau engleze.

Multe nu indică în mod explicit codificarea mesajului trimis, dar pe unele clienti de mail din această cauză, pot apărea probleme în viitor (se trimit scrisorile care nu pot fi citite prin poștă), așa că vă recomand să indicați în continuare.

Verificarea formularului pentru caracterul adecvat al datelor introduse

Pentru a vă asigura că utilizatorii nu pierd din greșeală câmpurile și completează totul corect, merită să verificați datele introduse.

Acest lucru se poate face atât în ​​PHP pe partea de server, cât și în JS pe partea client. Folosesc a doua opțiune, deoarece astfel o persoană poate afla imediat ce a greșit și poate corecta eroarea fără a face tranziții suplimentare de pagină.

Lipim codul de script în același fișier în care avem partea HTML a formularului. Pentru cazul nostru va arăta astfel:

< script>function checkForm(form) ( var name = form. name. value; var n = name. match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Jaa- z ] + $/ ); dacă (! n) ( alertă( „Numele introdus este incorect, vă rugăm să corectați eroarea”); return false; ) var phone = form. telefon. valoare; var p = telefon. potrivire(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; dacă (! p) ( alertă( „Numărul de telefon a fost introdus incorect”); return false; ) var mail = formular. Poștă. valoare; var m = mail . meci(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; dacă (! m) ( alertă( „E-mailul introdus este incorect, vă rugăm să corectați eroarea”); return false; ) returnează adevărat; )

Ei bine, acum analiza obișnuită:

Pentru asta, astfel încât atunci când faceți clic pe butonul de trimitere formular, îl verificăm Atașăm lansarea scriptului nostru la eticheta de formular:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Acum să luăm lista de verificare punct cu punct:

După cum puteți vedea, un astfel de mini cec este scris pentru fiecare dintre câmpurile noastre. Am evidențiat verificarea pentru un câmp din captură de ecran cu un pătrat roșu; pentru alte câmpuri are o structură similară, iar dacă este nevoie să adăugați un câmp sau să-l eliminați, acum puteți face acest lucru cu ușurință.

Orice site trebuie să aibă un formular de feedback, așa că, mai devreme sau mai târziu, fiecare dintre noi se gândește să dezvolte unul. Există destul de multe opțiuni pe Internet, unii folosesc plugin-uri populare, unii folosesc propriile dezvoltări personale, dar majoritatea caută soluții gata făcute. În orice caz, al nostru formular de feedback pentru site va fi funcțional și funcțional și despre toate acestea în ordine.

HTML

Deci, să începem, ca întotdeauna, cu șablonul obișnuit - html. Mai întâi avem nevoie de un formular cu mai multe câmpuri. Pentru claritate și standardul tuturor formularelor, vom lua 3 câmpuri. Acestea. acesta va fi Nume, E-mail și Telefon.

Fiecare intrare pe care o avem are propria sa nume unic nume , vom avea nevoie de el mai târziu pentru a trimite mesaje. De asemenea, puteți adăuga liber propriile câmpuri și nu numai introducerea, ci și selectarea zonei de text. Doar nu uitați să atribuiți fiecăruia numele proprii, pe care le vom folosi atunci când trimitem informații prin e-mail. Pentru comoditate, am adăugat un atribut obligatoriu fiecărui câmp, datorită căruia browserul nu va permite utilizatorului să trimită valori goale și îi va anunța despre necesitatea de a le completa.

CSS

Când forma este gata, o puteți transforma puțin. Totul aici depinde și de nevoile și fanteziile tale. Pentru claritate, am schițat câteva stiluri pentru fiecare element, astfel încât totul să nu arate atât de plat. Dar dacă ești leneș sau nu știi cum să o faci, atunci poți folosi opțiunea mea:

Form( lățimea maximă: 400px; lățime: 100%; margine: 0 automat; ) input( dimensiunea casetei: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0,11); umplutură: 10px 20px; lățime: 100%; margine: 10px 0; contur: niciunul; ) input( fundal: roșu; chenar: niciunul; box-shadow: 0px 2px 0 1px #C50909; chenar- rază: 5px; culoare: alb; text-transform: majuscule; font-weight: 600; lățime: 200px; cursor: pointer; tranziție: 0,3s; ) input:hover( fundal: negru; case-shadow: 0px 2px 0 1px negru;)

Partea clientului

Aici merită să înțelegeți mai în detaliu, sau mai degrabă să alegeți opțiunea potrivită pentru dvs. Pentru a trimite mesaje prin e-mail va trebui să folosim limbajul php, adică crea dosar separat, în care vom transfera toate aceste date. Dar noi aceasta metoda Nu o vom lua în considerare aici, deoarece este mult mai frumos când totul se întâmplă fără a reîncărca pagina. Deci ne vom uita la trimiterea datelor prin ajax.

Dacă doriți să faceți totul în mod vechi, atunci va trebui să modificați ușor html-ul de sus și să setați valoarea atributului metodei formularului (post sau obține). Totul depinde de modul în care doriți să transferați datele din formular. Și, de asemenea, nu uitați să scrieți o acțiune care va indica calea către fișierul php.

Și vom folosi o metodă mai avansată și vom trimite date fără a reîncărca pagina, iar la primirea unui răspuns de la server vom transmite utilizatorului un mesaj despre operare cu succes, sau o eroare. Totuși, vom avea nevoie și de 2 fișiere, să spunem contact.phpȘi custom.js.

În primul rând, nu uitați să includeți biblioteca Jquery, cu ajutorul lui vom reduce codul de mai multe ori și vom putea efectua cu ușurință orice acțiuni folosind soluții gata făcute.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( tip: "POST", url: "contact.php", date: str, succes : function(msg) ( if(msg == "ok") ( alert("Mesaj trimis"); ) else ( alert("Eroare! Este posibil sa fi completat incorect campurile."); ) ) )); return fals; ) );

Acum să înțelegem planul de acțiune și de ce avem nevoie de toate aceste biblioteci și fișiere. Când utilizatorul dă clic pe butonul de trimitere, avem un eveniment de trimitere, pe care îl vom scrie în custom.js și pe baza căruia vom primi toate datele din formular și le vom trece în fișierul contact.php. Aici verificăm din nou dacă câmpurile noastre sunt goale (pentru a evita încă o oportunitate spam), trimitem un mesaj prin e-mail și informăm utilizatorul cu privire la rezultatele, care sunt transmise ca răspuns la custom.js.

Dacă (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail "]); $txtphone = trim($_POST["mfbPhone"]); // de la care $fromMail = " [email protected]"; // Introduceți adresa dvs. de e-mail aici $emailTo = " [email protected]"; $subject = "Feedback"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "De la: Exemplu de formular<$fromMail>\n"; $headers .= "Tip de conținut: text/plain; charset="utf-8"\r\n"; $headers .= "Versiune MIME: 1.0\r\n"; $headers .= "Data: ". date("D, d M Y h:i:s O") ."\r\n"; // body of the letter $body = "A primit o scrisoare de pe site-ul ".$site." \n\nNume: „.$txtname.”\nTelefon: „.$txtphone.”\ne-mail: „.$txtemail.”\nMesaj: „.$txtmessage; mail($emailTo, $subject, $body, $headers); echo "ok"; )

Acesta este cel mai mult exemplu elementar muncă Formular de contact. Există multe opțiuni pentru cum să modificați fișierul de verificare în PHP, să vă creați propriile clase etc. Dar sarcina noastră a fost să creăm un exemplu simplu și funcțional pe care să-l poți folosi pe site-ul tău.

demonstrație

fișiere

Pluginuri gata

De când ești pe Blog WordPress, atunci probabil că sunteți gata și dornic să utilizați tot felul de pluginuri, mai ales dacă sunteți un om complet lamer în programare și layout. Și nu te condamn pentru asta și chiar pot să-ți prezint una dintre ele atenției pentru claritate. Scopul acestui paragraf nu este o recomandare, ci doar un exemplu, din moment ce am folosit pluginul Formular de contact 7 în mai multe proiecte.

Este foarte ușor de configurat și aproape întotdeauna funcționează impecabil. Dacă aveți nevoie să vă creați propriul design unic, o puteți face. Tot ce trebuie să faceți este să adăugați câmpurile necesare în constructor, să traduceți și să modificați notificările despre erori și trimiterea cu succes în felul dvs. și ați terminat. Apoi, copiați shortcode-ul și inserați-l în locul dorit din formular.

Nu am avut niciodată probleme cu pluginul și dacă aveți nevoie de rapid și soluție gata făcută, atunci exact asta este. Dacă aveți propriile cerințe pentru formă în ceea ce privește funcționalitatea și designul, atunci este mai bine să utilizați prima opțiune, care necesită cunoștințe în această industrie.

Acum este dificil să ne imaginăm un site web fără un formular de feedback.

Prin urmare, dacă resursa dvs. nu are o secțiune de contact, ar trebui să o instalați. Să ne dăm seama cum să facem asta.

Soluții pentru organizarea feedback-ului

Desigur, acum există mai multe modalități de a organiza feedback-ul pe un site web: de la scripturi universale în PHP la pluginuri și module pentru CMS. Adică, după cum puteți vedea, nu este nevoie să scrieți codul manual.

Puteți utiliza următoarele soluții universale:

• recurge la servicii servicii online gratuite, care generează automat cod Formulare HTML comunicatii. Dar în același timp și fișierul procesare php va trebui să-l scrieți și să îl puneți în scenă. Iată una dintre resursele pentru aceste scopuri
• Căutați ajutor de la serviciile online gratuite care generează cod HTML și oferă procesoare de date în PHP, care sunt adesea găzduite pe serverele acestor servicii. Un exemplu de astfel de resurse
• Găsiți scripturi gratuite pe Internet pentru configurarea unui formular de feedback. Această opțiune este aplicabilă persoanelor care cunosc HTML și PHP la un anumit nivel, deoarece în orice caz scriptul va trebui adaptat special pentru site-ul lor.

Cu toate acestea, de multe ori utilizatorii nu au nevoie de cunoștințe extinse despre dezvoltarea site-ului web - versatilitatea și selecția largă de soluții vă permit să setați forma dorită de feedback folosind oricare dintre metodele de mai sus.

Instalare ușoară a formularelor de feedback în HTML

Să luăm în considerare unul dintre programe populare pentru scrierea și instalarea formularelor de feedback HTML cu captcha. O selecție largă a acestora este prezentată, de exemplu, pe acest site web. Site-ul este în limba rusă, va fi ușor să faceți o alegere, iar instalarea în sine nu va dura mai mult de trei minute.

Dar mai întâi ar trebui să vă amintiți să faceți modificări fișier standard config.php - trebuie să modificați codificarea și să o scrieți pe cea corectă Adresa de e-mail destinatar.

Dosarul cu fișierele corectate trebuie copiat în directorul rădăcină al site-ului, dar înainte de aceasta, limitând indexarea acestuia în fișierul Robots.txt ( Nu permiteți: /sendmail-zakaz).

De fapt, asta este tot - dacă acțiunile sunt efectuate corect, formă terminată va arata asa:

Există generatori de formulare de feedback care nu necesită suport PHP. Să luăm în considerare una dintre ele. După ce faceți clic pe link, veți vedea o fereastră în care puteți face setări pentru a crea formularul dorit.

După toate parametrii necesari introdus, ar trebui să introduceți captcha de verificare și să faceți clic pe butonul „Generează”, apoi pe „Obțineți codul”.

Codul rezultat trebuie doar copiat în pagina selectată a site-ului.

Puteți face singur un simplu formular de contact. Pentru a face acest lucru, trebuie să creați un fișier form.php și să salvați următorul cod în el:

Pentru ca formularul să funcționeze, este necesar un fișier de gestionare. Să-l numim mail.php și să-l salvăm în următorul cod:

Formular de feedback în Joomla

Acesta este destul de sistem universal control, formularul de feedback poate fi configurat folosind componenta „Contacte”. Este destul de simplu, dar cu toate acestea funcționalitatea sa este destul de suficientă pentru operatie normala forme.

Deci, pentru a configura componenta, accesați panoul administrativși selectați fila „Componente/Contacte/Categorii de contacte”.

Se va deschide o pagină fără categorii. Pentru a-l crea, faceți clic pe butonul „Nou”.

Sistemul vă va solicita să completați câmpurile „Titlu” și „Porecla”. După ce ați făcut acest lucru, trebuie să bifați caseta „Da” din linia „Publicat”.

Setările trebuie salvate făcând clic pe butonul cu același nume din dreapta colțul de sus fereastră. Există o categorie, tot ce rămâne este să creezi o pagină cu un formular de contact. Pentru a face acest lucru, accesați fila „Contacte” și faceți clic pe butonul „Nou” din colțul din dreapta sus.

Completați caseta de dialog care se deschide. Asigurați-vă că completați rândul „Nume” și linia „Pseudonim”. Bifați caseta „Da” din rândul „Publicat” și indicați categoria acest contact. Deplasându-ne puțin mai jos, vom găsi fereastra „Contact cu utilizatorul”, unde trebuie să specificați persoana de contact care va primi mesajele.

Trebuie completat și câmpul „Informații”, unde trebuie să indicați poziția formularului pe site și adresa de e-mail a destinatarului. Elementele rămase din meniu pot fi completate după cum doriți.

Formularul de feedback este configurat, nu mai rămâne decât să îl plasați pe site. În aceste scopuri, trebuie să mergeți la panoul administrativ și, selectând fila „Meniu”, să decideți unde va fi afișat elementul.

În acest meniu creăm articol nou. Pentru a face acest lucru, faceți clic pe butonul „Creați” și selectați „Contacte/Pagină de contact” în meniul care se deschide.

Se va deschide o pagină pe care trebuie să setați numele elementului de meniu, să introduceți aliasul acestuia, să activați reflectarea acestuia și, în câmpul de parametri principali „Selectați un contact”, specificați informațiile de contact la care va fi legat acest element de meniu. Salvați setările.

Accesați site-ul, găsiți elementul „Contacte” și faceți clic pe el. Ar trebui să se deschidă următoarea pagină:

Feedback pentru WordPress

În acest sistem, puteți crea un formular de feedback folosind pluginuri. Cel mai popular și funcțional este pluginul Contact Form 7.

După aceasta, trebuie să accesați fila „Pagini/Adăugați nou” și, pornind modul HTML, să inserați codul de formular de feedback copiat anterior

Creați un formular de feedback

Crearea unui formular de feedback pe site

În procesul de promovare a site-ului web, împreună cu studiul statisticilor vizitatorilor, informațiile despre site de la vizitatori înșiși sunt de o importanță deosebită. Una dintre cele mai moduri simple a obține astfel de informații înseamnă a plasa o pagină pe site cu formular de feedback. Vizitatorul lasă un mesaj și acesta va fi trimis la adresa ta de e-mail sau la oricare alta pe care o specificați. În acest caz, vizitatorul nu trebuie să-l folosească program de mail, nici măcar nu trebuie să aibă propriul e-mail.

Cel mai simplu exemplu Această formă este prezentată în Fig. 1. (Acesta este un eșantion complet funcțional și îl puteți folosi pentru a-mi trimite o scrisoare de mulțumire.)

Fig.1. Formular simplu de feedback

Pentru a plasa un astfel de formular de feedback pe un site web, aveți nevoie doar de informații de bază despre HTML și de capacitatea de a opera două comenzi - CopieȘi Introduce. Să luăm în considerare succesiunea de acțiuni pentru a crea un formular de feedback (Fig. 1) pe pagina HTML a site-ului.

1. Verifică asta plan tarifar găzduirea dvs. (biroul unde este găzduit site-ul dvs.) acceptă PHP. Dacă nu, atunci cel mai probabil va trebui să plătiți suplimentar pentru a trece la un alt tarif care acceptă același PHP. Nu trebuie să căutați semnificația acestei abrevieri, deoarece nu aveți nevoie de cunoștințe de PHP.

După cum puteți vedea, întregul formular este creat de etichetă