Frumos formular de feedback PHP. Formular de feedback în PHP cu trimitere prin e-mail

• 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 un câmp cu un 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ți un 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 anumiți parametri de 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 să citiți o cantitate mare de literatură și să petreceți un număr 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 de formular deschis. 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. Astfel, fișierele php și 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 scriptul 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. de e-mail și subiectul scrisorii, care vor fi afișate în căsuța dvs. poștală. Î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 o configurare simplă și ușoară din panoul de control și sunt, de asemenea, perfecte pentru site-urile fără motor.

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

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 are propriul nume unic, 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 va notifica 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ți un fișier separat în care vom transfera toate aceste date. Dar nu vom lua în considerare această metodă aici, deoarece este mult mai frumoasă 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 atunci când primim un răspuns de la server, vom transmite utilizatorului un mesaj despre o operațiune reușită 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 încă o dată dacă câmpurile noastre sunt goale (pentru a evita o altă posibilitate de spam), trimitem un mesaj prin e-mail și anunțăm utilizatorul cu privire la rezultatele, care sunt trimise 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 elementar exemplu de funcționare a unui 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

Din moment ce sunteți pe un blog WordPress, probabil că sunteți pregătit ș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 Formularul 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 o soluție rapidă și gata, atunci aceasta 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.

În această lecție vom afla despre funcție Poștă(), folosind exemplul de creare Formulare de feedback în PHP urmat de trimiterea datelor primite prin email.

Pentru a face acest lucru, vom crea două fișiere - format.phpȘi mail.php. Primul fișier va conține doar un formular cu câmpuri pentru ca utilizatorul să introducă date. În interiorul unei etichete formă- buton "Trimite" si atribut acțiune care se referă la handler - mail.php, tocmai aceasta se accesează datele din formular la apăsarea butonului "Trimite". În exemplul nostru, datele formularului sunt trimise către o pagină web numită „/mail.php”. Această pagină conține un script pentru PHP care prelucrează datele formularului:

Așa arată vizual formularul în browser.

Apoi scriem codul fișierului mail.php. Venim cu propriile noastre nume pentru variabile. ÎN PHP variabila începe cu semn $ urmat de numele variabilei. Valoarea textului variabilei este cuprinsă între ghilimele. Folosind variabile, conținutul formularului este trimis către e-mailul administratorului prin simpla introducere a numelui elementului de formular între paranteze drepte - valoarea Nume.

$to = " [email protected]"; // e-mailul destinatarului datelor din formular
$tema = "Formular de feedback în PHP"; // subiectul e-mailului primit
$message = "Numele dvs.: ".$_POST["nume"]."
";//atribuiți variabilei valoarea obținută din forma nume=nume
$message .= "E-mail: ".$_POST["e-mail"]."
"; //obținut din formularul nume=email
$message .= "Număr de telefon: ".$_POST["telefon"]."
"; //obținut din formularul nume=telefon
$message .= "Mesaj: ".$_POST["mesaj"]."
"; //obținut din formularul nume=mesaj
$headers = "Versiune MIME: 1.0" . „\r\n”; // antetul se potrivește cu formatul plus caracterul newline
$headers .= "Tip de conținut: text/html; set de caractere=utf-8" . „\r\n”; // indică tipul de conținut trimis
mail($to, $tema, $mesaj, $anteturi); //trimite valori variabile destinatarului prin e-mail
?>

Astfel datele din matrice $_POST vor fi transmise variabilelor corespunzătoare și trimise prin e-mail folosind funcția Poștă. Să completăm formularul nostru și să apăsăm butonul de trimitere. Nu uitați să includeți adresa de e-mail. Scrisoarea a sosit instantaneu.