Scriptul formularului de feedback. Formular rapid de feedback în PHP și jQuery
Informațiile prezentate pe această pagină se adresează în primul rând webmasterilor începători.
Salutare, prieteni, dragi vizitatori ai umilului meu site! Cu siguranță, mulți dintre voi, inclusiv webmasteri începători, știți ce este FOS și de ce aveți nevoie de el (form feedback).
FOS tradițional în sine versiune simplă– acesta este momentul în care utilizatorul completează câmpurile unui formular situat pe o pagină web și program server prelucrează aceste date și le trimite către cutie poştală administratorul site-ului. Dar, există și alte opțiuni și ne vom uita la una dintre ele în această lecție.
Este clar că atunci când folosind CMS, de exemplu Joomla și WordPress gratuit, problema feedback-ului poate fi rezolvată folosind diverse extensii sau pluginuri, dar există moduri alternative, care poate fi util pentru orice proiect construit pe ambele HTML pur, PHP și folosind motorul.
Pe Internet puteți găsi destul de multe scripturi pentru diferite FOS - atât simple, cât și foarte sofisticate, care sunt instalate pe site ca un CMS cu drepturi depline și necesită nu numai suport PHP, ci și o bază de date pentru munca lor. Cel mai probabil va trebui să căutați, să găsiți și să încercați multe opțiuni care sunt potrivite pentru dvs.
Feedback-ul este posibil și printr-un formular de comentarii deschis tuturor, în care vizitatorii comunică cu administrația site-ului și între ei, rezolvând întrebări și probleme, în timp ce FOS presupune o comunicare mai închisă, mai retrasă între două persoane. Vizitatorii și clienții au întotdeauna întrebări, ca să spunem așa, nu pentru vizionare publică și publicitate.
De asemenea, merită să spunem că există servicii bune pentru crearea de formulare de feedback, dar acum vom vorbi despre un FOS interesant și neconvențional. Principala sa diferență față de alte mostre este că nu necesită prezență și utilizare client de mail. Acesta este un formular web și mesajele din acesta sunt create, trimise pe o pagină web și primite pe o pagină web. Cu alte cuvinte, această formă rulează pe serverul site-ului dvs., fără a utiliza niciun server de e-mail.
Pe hosting gratuit Serverul SMTP nu este disponibil cu PHP, așa că creați un serviciu pentru trimiterea de mesaje de pe pagina site-ului prin e-mail la e-mailul administratorului nu este posibil. Kit-ul FOS propus rezolvă această problemă și oferă atât expeditorilor de mesaje de pe pagina site-ului, cât și administratorului acestuia. mod convenabil mesagerie.
Aveți ocazia să verificați formularul de feedback în acțiune, să trimiteți un mesaj completând câmpurile din pagina de trimitere și, de asemenea, să îl vizualizați pe o altă pagină cu mesajele primite.
O picătură de informații utilePe viitor, pentru a nu întâmpina dificultăți în transcodarea fișierelor, citiți acest scurt program educațional. Pentru a efectua conversia, de exemplu, de la Windows-1251 la utf-8, aveți nevoie de:
;
;
În aceste acțiuni, este important să respectați ordinea operațiunilor, altfel în loc de cuvinte rusești veți obține „cuvinte nebune” de neînțeles.
1. Descărcați arhiva necesară cu materialul și despachetați-l în folderul curent pe calculator. În folderul de feedback veți vedea un folder img cu imagini și fișiere formular. Încărcați întregul folder de feedback pe serverul site-ului dvs. web.
ATENŢIE! Dacă fișierele sunt încărcate pe server, atunci este necesar să setați atributele pentru fișierul message.txt: 666, altfel citirea și scrierea în fișier nu va fi posibilă și serverul va afișa un mesaj de eroare.
2. Introduceți adresa în bara de adrese a browserului dvs.:
//domeniul dvs./feedback/feedback.php
Se va încărca pagina de feedback cu formularul de introducere a datelor. Puteți testa formularul completând toate câmpurile și trimițând un mesaj. Creați un link către această pagină de pe site-ul dvs. în locul potrivit.
3. Pentru a verifica mesajele, introduceți bara de adrese adresa browserului:
//domeniul dvs./feedback/message.php
Se va încărca pagina cu titlul mesajului, datele și textul mesajului trimis. Pentru a șterge toate înregistrările, faceți clic pe butonul Șterge toate de pe pagină. Marcați pagina mesajului (message.php) pentru a o putea accesa cu ușurință data viitoare.
FOS este gata să lucreze pe site-ul dvs. web. Cât timp ți-a luat să-l instalezi?
Opțiunea #2. Instalarea FOS într-un șablon de site web.Acest formular poate fi inserat și într-un șablon de site web PHP. Această sarcină este puțin mai dificilă.
Formularul va arăta cam așa, iar mesajele pot fi acceptate.
Fișierele sunt în codificare utf-8 dacă site-ul dvs. este într-o codificare diferită, acestea trebuie să fie re-codate. Poți deja să faci asta singur.
Paginile feedback.php și send.php au un design preliminar pentru claritate, care nu va fi necesar în viitor datorită faptului că blocurile necesare(începutul blocului → sfârșitul blocului) în fișierele feedback.php și send.php vor trebui copiate și lipite în șabloanele de pagină ale site-ului dvs. Aceste șabloane ar trebui apoi redenumite feedback.php și, respectiv, send.php. Meniul principal al site-ului dvs. ar trebui să conțină un link către pagina de feedback feedback.php.
Fișierele header.php și footer.php, care sunt folosite pentru a genera paginile feedback.php și send.php în timpul testării preliminare, nu sunt, de asemenea, necesare.
Fișierele message.php și deltext.php sunt pagini de serviciu pentru administratorul site-ului. Pot fi lasate neschimbate sau decorate dupa bunul plac.
Toate aceste fișiere trebuie să fie în directorul rădăcinăîmpreună cu fișierul message.txt:
Pentru a evita probleme, înainte de a încărca fișiere în folderul rădăcină site, verificați dacă numele fișierelor se potrivesc! Dacă există, fișierele ar trebui redenumite.
Dacă utilizați un site care conține pagini HTML obișnuite pe găzduirea PHP, atunci ar trebui să introduceți formularul din fișierul feedback.php în șablonul de pagină de feedback numit feedback.html. Și în șablonul de pagină HTML numit send.html, inserați un bloc de script din fișierul corespunzător și redenumiți pagina în send.php.
Asta e tot! Folosește FOS la maximum, comunică cu vizitatorii, dezvoltă-ți resursa și toate cele bune pentru tine! Nu uitați să vizitați site-ul meu. L.M.
Aproape fiecare site are un formular de feedback. Și, desigur, există o mulțime de implementări diferite. În acest articol vom scrie un formular de feedback care va folosi validarea HTML5 și notificări pop-up cu sunet. Și, desigur, cererea în sine va fi trimisă cu folosind ajax. În plus, exemplul va oferi două opțiuni pentru procesarea cererii: prin ajax și o cerere POST obișnuită. În cazul unei solicitări POST, vor fi folosite mesaje flash bazate pe sesiune. Mai multe detalii sub croiala...
Deci, proiectul nostru va avea următoarea structură:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | . ├── css │ ├── jquery.jgrowl.css │ ├── main.css │ └── normalize.css ├── imagini │ ── închidere. j─ ─ protejat. │ ├── bootstrap. php │ ├── clipește.php │ ├── func.php │ └── session.php ├── sunete │ ├── notice.mp3 │ ─────── php ─ index .php |
Fișierul index.php va conține un formular de feedback. După ce utilizatorul completează formularul și dă clic pe butonul de trimitere, o solicitare ajax va fi trimisă către scriptul feedback.php. Care, la rândul său, după procesarea cererii, va returna rezultatul. Există o nuanță aici. Scriptul verifică ce cerere a venit și, în funcție de aceasta, fie returnează rezultatul sub formă de json, fie scrie un mesaj flash în sesiune și apoi îl redirecționează înapoi către index.php. Adică, în cazul oricăror erori în javascript, cererea va fi totuși procesată printr-o simplă solicitare POST. Și în acest caz, programatorul are un instrument flexibil care îi permite să abandoneze întotdeauna ajax.
Mesajele flash sunt un tip de date de sesiune care sunt șterse după ce sunt solicitate pentru prima dată. Este foarte instrument convenabil pentru a transmite mesaje între cereri.
Pentru a nu complica aspectul și, de asemenea, pentru a unifica notificările pentru utilizator, exemplul folosește mesaje pop-up de mârâit similare cu cele utilizate în OSX. Pentru aceasta, folosim un bun plugin jQuery jGrowl, care are un sistem flexibil de personalizare și stil.
Deci, să începem cu HTML:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | Formular de feedback Nume de feedback: Email: Mesaj: Trimite //un cod |
După cum puteți vedea din codul de mai sus. Nu este folosit în exemplu. Doar că nu este necesar pentru astfel de lucruri. Cu toate acestea, datele vor fi validate pe server.
JavaScript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $(document) .ready (funcție () ( buzz.defaults .formats = [ "ogg" , "mp3" ] ; buzz.defaults .preload = true ; if (buzz.isSupported () ) ( var noticeSound = new buzz. sound ("sunete/notice" ) ; $.jGrowl .defaults .position = "sus-dreapta" ; ( if (noticeSound) noticeSound.play () ; ) ; $("form#feedback-form" ) .on ("submit" , funcția (e) ( e.preventDefault () ; $(this ) .ajaxSubmit (( dataType : „json” , succes: funcție (răspuns) ( $.jGrowl (response.message, (temă: response.type ) ) ); if (response.type == „succes” ) $(”form#feedback-form”) [ 0 ] .reset () ; eroare: function () ( $("form#feedback-form") .unbind ("submit" ) .submit () ; ) ) ) ; |
Codul de mai sus este foarte clar. Configurarea notificărilor și redării sunetului. Și, de asemenea, implementarea operațiunii de formular fără a reîncărca pagina folosind biblioteca ajaxForm.
Acum să trecem la implementarea procesării cererilor:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | //feedback.php necesită __DIR__ . „/protected/bootstrap.php” ; if (! IS_POST() ) ( stopAndResponseMessage( "eroare" , "Scriptul acceptă numai cereri POST!" ) ) ; ) $name = _POST( "nume" ) ; |
$email = _POST("email" , false ); $mesaj = _POST("mesaj"); dacă (! $nume || ! $email || ! $mesaj ) ( stopAndResponseMessage( „eroare” , „Nu toate câmpurile obligatorii au fost completate!" ) ; ) // verificați tokenul captcha și csrf dacă (! isEmail($email ) ) ( stopAndResponseMessage( "eroare" , "Adresa de e-mail este proastă!" ) ; ) if (mb_strlen ($message ) _e( $tip ) , "mesaj" => _e($mesaj ) ) ; Cel mai mult loc important în script, aceasta este funcția stopAndResponseMessage, care este un mecanism flexibil de procesare a cererilor. Returnează un răspuns json în caz că cerere ajax sau folosește mesaje flash când este inactiv Solicitare POST
. Pe
în această etapă
adrese. Personalizare individuală a fiecărui formular. Scriptul rulează pe , fără a reîncărca pagina.
Protecție împotriva roboților de spam.
Configurare inițială. Scriptul funcționează pe baza bibliotecii, așa că primul lucru pe care trebuie să-l facem este să-l conectăm. Pentru asta recomand folosirea Găzduit de Google
Biblioteci.
jquery.arcticmodal. - oferă posibilitatea de a afișa formulare în.
fereastra modală
jquery.jgrowl.js, jquery.jgrowl.css - vă permite să afișați notificări pe pagină (se blochează în colțul de sus
HTML și atributele necesare.
Un atribut obligatoriu pentru toate elementele de formular este atributul name="" - necesar pentru personalizarea ulterioară a formularului.
Pentru un buton (type="button") trebuie să specificați class="feedback" . De asemenea, aș dori să vă atrag atenția asupra faptului că orice etichetă HTML cu clasa „feedback” poate acționa ca un buton Apelarea unui formular într-o fereastră modală Pentru a apela un formular într-o fereastră modală, trebuie mai întâi să definiți o acțiune pentru a face clic pe o etichetă, de exemplu un div cu clasa modal_btn
Apelarea unui formular într-o fereastră modală $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); ));
Deoarece formularul ar trebui să fie vizibil numai în fereastra modală, trebuie ascuns plasându-l într-un div cu atributul style="display: none;" și, de asemenea, înfășurat în câteva div-uri standard pentru a stila fereastra modală.
x
Așa că ne-am dat seama de setările de bază pentru conectarea scriptului nostru pentru trimiterea formularelor la e-mail. Acum să aruncăm o privire în interior și să ne dăm seama cum să configurați câmpurile, notificările și tot ce se află acolo.Exemplu de setări pentru un formularSetările pentru toate formularele sunt stocate în fișierul feedback\index.php $form["form-1"] = array("fields" => array("name" => array("title" => "Nume", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35", "messages" => array("preg" => "Câmpul [ %1$s ] poate conține o eroare", "minlength " => "Lungimea minimă a câmpului [ %1$s ] este mai mică decât lungimea permisă - %2$s", "maxlength" => "Lungimea maximă a câmpului [ %1$s ] este mai mare decât permisul - %2$s",)), "tell " => array("title" => "Telefon", "validate" => array("preg" => "/^((8|\+) [\- ]?)?(\(?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5", ), "messages" => array("preg" => "Câmpul [ %1$s ] poate conține o eroare", "minlength" => "Lungimea minimă a câmpului [ %1$s ] este mai mică decât cea permisă lungime - %2$s",)), "cfg" => array(" charset" => "utf-8", "subject" => "Subiect al literei", "title" => "Titlu în corpul scrisorii ", "ajax" => adevărat, "validate" => adevărat, "from_email" => "[email protected] ", "ajax" => adevărat, "validate" => adevărat, "from_email" => ", ", "ajax" => adevărat, "validate" => adevărat, "from_email" => "", "to_name" => "noreply1, noreply2", "geoip" => adevărat, "referer" => adevărat, "type" => "html", "tpl" => adevărat, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Mesaj trimis - OK", "fuck" => "Mesaj trimis - EROARE", "spam" => "Robot de spam", "notify" => "color-modal-textbox", "usepresuf" => false) // Următorul formular $form["form-2"] = array("fields" => array(.....
Pentru a adăuga setări formă nouă, trebuie să urmați exemplul matricei $form["form-1"] pentru a crea o nouă matrice $form[""]
Amintește-ți despre ce am vorbit atribut necesar nume="" ?
Așa că a sosit momentul să vă spun de ce este încă nevoie.
name="" este cheia alfanumerică pentru matrice, trebuie să fie unică pentru matricea $form[""]
Exemplu cod html pentru claritate
Acum să înțelegem matricele și pentru ce sunt necesare.
$form["form-1"] = matrice();
$form["form-2"] = matrice();
etc.
- „câmpuri” => matrice();
- - O serie de setări pentru elementele formularului.
- „nume” => matrice();
- - O serie de setări ale elementelor de formular (de exemplu, numele de intrare = "nume" tip = "text") care are un număr de setări.
- „title” => „Numele tău” - numele elementului de formular, va fi afișat în caz de erori sau în șablon "validate" => array();- matrice, conține reguli de validare a elementelor de formular
- "preg" => "%%" - expresie regulată "minlength" => "3" -- matrice, conține reguli de validare a elementelor de formular
- dimensiune minimă
- câmpuri
- "maxlength" => "35" - dimensiune maximă"
- "substr" => "35" - tăiați întotdeauna la N caractere
- "mesaje" => matrice();
- "preg" => "Elementul formularului nu se potrivește
- expresie regulată
- "minlength" => "Lungimea minimă a câmpului [ %1$s ] este mai mică decât acceptabilă - %2$s" - eroare de validare, cheia (preg) nu se potrivește cu cheia de validare
- "maxlength" => "Lungimea maximă a câmpului [ %1$s ] depășește limita permisă - %2$s" - eroare de validare, cheia (preg) nu se potrivește cu cheia de validare
- "cfg" => matrice();
- "from_email" => "myemail", - expeditor, specificați numele câmpului (name = "myemail"), iar dacă nu aveți nevoie de un e-mail de la utilizator, atunci un stub ", "ajax" => adevărat, "validate" => adevărat, "from_email" => "
- "from_name" => "myname", - expeditor, specificați numele câmpului (name="myname"), iar dacă nu aveți nevoie de un nume de utilizator, atunci stub-ul No-reply
- "to_email" => " ", "ajax" => adevărat, "validate" => adevărat, "from_email" => "", - e-mailul destinatarului. Pentru a trimite la mai multe adrese, enumerați-le separate prin virgule. Exemplu ("to_email" => " ", "ajax" => adevărat, "validate" => adevărat, "from_email" => ", ", "ajax" => adevărat, "validate" => adevărat, "from_email" => ", ", "ajax" => adevărat, "validate" => adevărat, "from_email" => "",)
- "to_name" => "noreply1", - Numele destinatarului. Când trimiteți la mai multe adrese, enumerați numele destinatarilor, separate prin virgule. Exemplu ("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => adevărat, - aflați locația folosind tipul TODO
- „referer” => fals, - adaugă Adresa URL a paginii cu care a fost depus formularul
- "type" => "simple", - tip de literă - simplu, html (dacă sunt folosite etichete html)
- „tpl” => false, - utilizați un șablon de scrisoare. Dacă este adevărat, atunci fișierul șablon va fi conectat în conformitate cu numele formularului (name="form-1") din folder și fișierul (feedback/tpl/form-1.tpl) va fi procesat, în caz contrar totul va fi trimis așa cum este, fiecare câmp pe o linie nouă
- "antispam" => "email77", - Anti spam, metoda se bazează pe un câmp ascuns (display:none), pe care doar robotul îl completează automat, dezvăluindu-se astfel.
- "antispamjs" => "address77", - Metoda anti-spam se bazează pe un câmp ascuns (display:none), completat inițial, care șterge automat javascript atunci când pagina este încărcată, chiar și robot inteligent nu o pot anticipa și apoi se blochează.
- "bine" => " Mesaj pentru utilizator", - Se afișează un mesaj către utilizator dacă formularul este trimis cu succes; puteți utiliza etichete html.
- "fuck" => "Mesaj către utilizator", - Un mesaj către utilizator, afișat atunci când apare o eroare la trimiterea formularului, puteți utiliza etichete html.
- „spam” => „Mesaj către utilizator”, - Mesaj către utilizator, afișat dacă este suspectat un robot de spam, puteți utiliza etichete html.
- „notify” => „color-modal”, - ce tip de notificări să se afișeze, casetă de text - blocuri în colțul de sus al paginii, culoare - evidențierea culorii în formular, modal - fereastră modală în centrul paginii, niciuna - dezactivați. Puteți combina, de exemplu: color-modal - erori în completarea câmpurilor cu evidențiere și starea de trimitere a textului în fereastra modal TODO
- "usepresuf" => false - Indiferent dacă se folosește o adăugare personalizată la subiect sau la titlul scrisorii, în cazul unei mici modificări puteți specifica de exemplu %%cfg.title.suffix%%, pentru aceasta trebuie să existe un câmp ascuns în formular, pentru mai multe detalii, vezi f -qiu presuf()
În primul rând, pentru ca formularul să fie trimis într-un șablon, în setările formularului trebuie să activați utilizarea unui fișier șablon - „tpl” => true ,
În al doilea rând, trebuie să creați un fișier șablon cu extensia *.tpl în folder (feedback/tpl/), în conformitate cu numele formularului (name="form-1" ).
Exemplu: (feedback/tpl/form-1.tpl)
| Titlu în corpul e-mailului | |
| %%name.title%% | %%name.value%% |
| %%tell.title%% | %%tell.value%% |
nume, spune etc. - Acestea sunt atributele (name="") ale câmpurilor pe care utilizatorul le completează.
title - Numele elementului de formular, care este setat în matricea de setări a elementului de formular.
value - Valoarea elementului de formular.
Asta e tot pentru ziua de azi, dar scriptul nu este, desigur, ideal, așa că comentariile și descrierile erorilor sunt binevenite în versiunile următoare vor fi corectate.
P.S. Scenariul a fost dezvoltat de echipă
Nu este un secret pentru nimeni că de foarte multe ori trebuie să comunici cumva cu vizitatorii site-ului tău. Desigur, puteți pur și simplu să vă dați e-mailul (cum am făcut eu) sau puteți oferi o altă metodă - acesta este un formular de feedback. Desigur, acest lucru necesită cunoștințe de PHP. Dar pentru a nu fi nevoit să scrieți totul de la zero, vă ofer un script de formular de feedback foarte bun.
După descărcare, extrageți arhiva pe site-ul dvs. web (aveți grijă să nu ștergeți nimic). Acum hai să-l setăm. Pentru a face acest lucru, deschideți fișierul „config.php”. Și modificați valorile următoarelor variabile:
Acum puteți rula fișierul index.php al scriptului. Ca rezultat, un formular va apărea în fața ta. Puteți să o completați și să trimiteți scrisoarea.
Acum apare întrebarea: „Cum să inserați acest formular de feedback pe site-ul dvs.?” Pentru a face acest lucru, găsiți fișierul care este responsabil pentru pagina dvs. de feedback (să fie „feedback.html”). Schimbați imediat extensia în php (adică „feedback.php”). Copiați codul din scriptul index.php în fișierul cu pagina de feedback (feedback.php). Acum puteți face orice doriți între etichetele și, doar nu ștergeți ceea ce ați lipit din index.php. Nu atingeți nici ce se află între etichete, decât dacă știți exact ce faceți.
Și în sfârșit, dacă nu-ți place aspect formular, apoi îl puteți corecta în fișierul „styling.css”.
Daca mai ai intrebari, sau exista niste probleme cu scriptul (nu l-am testat), atunci scrie-mi pe e-mail ca sa pot corecta.
Pentru a nu depinde de munca scripturilor altora, învață cum să le creezi singur. Cursul meu video „PHP și MySQL de la zero la guru” vă va învăța acest lucru:
