Vytvárame formulár spätnej väzby v PHP. Oddelenie kontroly kvality Vyvolanie formulára v modálnom okne

Dobrý deň, priatelia! Chcel by som vám dať do pozornosti univerzálny skript na odosielanie údajov z formulárov na email. Skript je ideálny pre stránky ako vstupná stránka, vizitky atď. Náš skript Formuláre spätnej väzby vyniká medzi množstvom iných skriptov na internete tým, že má schopnosť spájať neobmedzené množstvo formulárov s rôznymi poľami na jednej stránke a je schopný posielať listy viacerým adresátom.

Takže. Začnime. Začnime možnosťami skriptu.

Pripojte neobmedzený počet formulárov na jednu stránku.

Kontrola, či sú polia vyplnené správne.

Nastavenie upozornení.

Schopnosť používať písmená pre každý formulár.

Typ písmena - (ak sa používajú značky html)

Posielanie na neobmedzený počet adries.

Individuálne prispôsobenie každého formulára.

Skript beží na , bez opätovného načítania stránky.

Ochrana pred spamovými robotmi.

Pôvodné nastavenie.
Skript funguje na základe knižnice, takže prvá vec, ktorú musíme urobiť, je pripojiť ho. Ak to chcete urobiť, odporúčam vám použiť hostené knižnice Google.

Povedzme si o zostávajúcich súboroch podrobnejšie:

feedback.js je hlavný súbor skriptu zodpovedný za odosielanie formulárov AJAX.
jquery.arcticmodal.js,
jquery.arcticmodal. - poskytujú možnosť zobrazenia formulárov v modálnom okne.
jquery.jgrowl.js,
jquery.jgrowl.css - umožňujú zobrazovať upozornenia na stránke (bloky v hornom rohu stránky).

HTML a požadované atribúty.
Povinným atribútom pre všetky prvky formulára je atribút name="" - nevyhnutný pre následné prispôsobenie formulára.
Pre tlačidlo (type="button") musíte zadať class="feedback" . Chcel by som tiež upozorniť na skutočnosť, že ako tlačidlo môže fungovať akákoľvek HTML značka s triedou „feedback“ Volanie formulára v modálnom okne Pre zavolanie formulára v modálnom okne je potrebné najskôr definovať akciu pre kliknutie na ľubovoľnú značku, napríklad div s triedou modal_btn
Volanie formulára v modálnom okne $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal ();));));
Keďže formulár by mal byť viditeľný iba v modálnom okne, je potrebné ho skryť umiestnením do prvku div s atribútom style="display: none;" a tiež zabaliť do niekoľkých štandardných prvkov div na úpravu modálneho okna.
X

Takže sme prišli na základné nastavenia pripojenia nášho skriptu na odosielanie formulárov na e-mail. Poďme sa teraz pozrieť dovnútra a zistiť, ako nakonfigurovať polia, upozornenia a všetko ostatné, čo tam je.

Príklad nastavení pre jeden formulárNastavenia pre všetky formuláre sú uložené v súbore feedback\index.php
$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "Pole [ %1$s ] môže obsahovať chybu", "minlength " => "Minimálna dĺžka poľa [ %1$s ] je menšia ako povolená - %2$s", "maxlength" => "Maximálna dĺžka poľa [ %1$s ] je väčšia ako povolená - %2$s", )), "tell " => array("title" => "Telefón", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "správy" => array( "preg" => "Pole [ %1$s ] môže obsahovať chybu", "minlength" => "Minimálna dĺžka poľa [ %1$s ] je menšia ako povolená dĺžka - %2$s") ),), "cfg" => array(" charset" => "utf-8", "predmet" => "Predmet e-mailu", "názov" => "Nadpis v tele e-mailu", " ajax" => true, "validate" => true, "from_email" = > " [e-mail chránený]", "from_name" => "noreply", "to_email" => " [e-mail chránený], [e-mail chránený]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "adresa77", "okej" => "Správa odoslaná - OK", "kurva" => "Správa odoslaná - CHYBA", "spam" => "Spamový robot", "upozorniť" => "color-modal-textbox", "usepresuf" => false)); // Ďalší formulár $form["form-2"] = array("fields" => array(.....
Ak chcete pridať nastavenia pre nový formulár, musíte postupovať podľa príkladu poľa $form["form-1"] a vytvoriť nové pole $form[""]

Pamätáte si, čo som povedal o povinnom atribúte name=""?

Povinným atribútom pre všetky prvky formulára je atribút name="" - nevyhnutný pre následné prispôsobenie formulára.
Nastal teda čas povedať vám, prečo je to stále potrebné.
name="" je alfanumerický kľúč pre pole, musí byť jedinečný pre pole $form[""]

Príklad html kódu pre prehľadnosť

Teraz pochopme polia a na čo sú potrebné.

$form["form-1"] = pole();
$form["form-2"] = pole(); atď.
Toto sú hlavné polia pre každý nový formulár, ktoré obsahujú:

"polia" => pole (); - Súbor nastavení pre prvky formulára.

• "meno" => pole (); - Pole nastavení prvkov formulára (napríklad input name="name" type="text"), ktoré má množstvo nastavení.
  • "title" => "Vaše meno" - názov prvku formulára, zobrazí sa v prípade chýb alebo v šablóne
  • "overiť" => pole (); - pole, obsahuje pravidlá overenia prvkov formulára
    • "preg" => "%%" - regulárny výraz
    • "minlength" => "3" - minimálna veľkosť poľa
    • "maxlength" => "35" - maximálna veľkosť poľa
    • "substr" => "35" - vždy orezané na N znakov
  • "správy" => pole (); - pole obsahujúce overovacie správy, konkrétne:
    • "preg" => "Prvok formulára sa nezhoduje s regulárnym výrazom"
    • "minlength" => "Minimálna dĺžka poľa [ %1$s] je menšia ako prijateľná - %2$s" - chyba overenia, kľúč (preg) sa nezhoduje s kľúčom overenia
    • "maxlength" => "Maximálna dĺžka poľa [ %1$s] prekračuje povolený limit - %2$s" - chyba overenia, kľúč (preg) sa nezhoduje s kľúčom overenia

"cfg" => pole (); - Množstvo nastavení formulára.

• "charset" => "utf-8" - kódovanie
• "predmet" => "Predmet listu", - Predmet listu
• "title" => "Názov v tele listu", - Názov v tele listu
• "ajax" => true, - toto je formulár Ajax TODO (ak nie je potrebný, nastavte ho na hodnotu false)
• "validate" => true, - (true) ak chceme overiť formulár na serveri, nahradí js validáciu "ajax" => true. Keď je vypnutá (false), nemusíte nastavovať nastavenia poľa. ROBIŤ
• "from_email" => "myemail", - odosielateľ, zadajte názov poľa (meno = "myemail"), a ak nepotrebujete e-mail od používateľa, potom stub [e-mail chránený]
• "from_name" => "myname", - odosielateľ, zadajte názov poľa (name="myname"), a ak nepotrebujete používateľské meno, potom stub bez odpovede
• "to_email" => " [e-mail chránený]", - e-mail príjemcu. Ak chcete odoslať na viacero adries, uveďte ich oddelené čiarkami. Príklad ("to_email" => " [e-mail chránený], [e-mail chránený], [e-mail chránený]",)
• "to_name" => "noreply1", - Meno príjemcu. Pri odosielaní na viacero adries uveďte mená príjemcov oddelené čiarkami. Príklad ("to_name" => "noreply1, noreply2, noreply3",)
• "geoip" => true, - zistiť polohu pomocou typu TODO
• "referer" => false, - pridajte URL stránky, z ktorej bol formulár odoslaný
• "type" => "plain", - typ písmena - plain, html (ak sa používajú značky html)
• "tpl" => nepravda, - použite šablónu listu. Ak má hodnotu true, súbor šablóny bude pripojený v súlade s názvom formulára (name="form-1") z priečinka a súbor (feedback/tpl/form-1.tpl) bude spracovaný, inak bude všetko odoslané tak, ako sú, každé pole na novom riadku
• "antispam" => "email77", - Anti spam, metóda je založená na skrytom poli (zobraziť:žiadne), ktoré automaticky vyplní iba robot, čím sa prezradí.
• "antispamjs" => "address77", - Antispamová metóda je založená na skrytom (zobraziť:žiadne) poli, na začiatku vyplnenom, ktoré automaticky vymaže javascript pri načítaní stránky, to nedokáže predvídať ani šikovný robot a potom je zablokované.
• "okay" => "Správa užívateľovi", - Ak je formulár úspešne odoslaný, zobrazí sa správa pre užívateľa, môžete použiť html tagy.
• "fuck" => "Správa používateľovi", - Správa používateľovi, ktorá sa zobrazí, keď sa vyskytne chyba pri odosielaní formulára, môžete použiť html značky.
• "spam" => "Správa používateľovi", - Správa používateľovi, ktorá sa zobrazí v prípade podozrenia zo spamového robota, môžete použiť html tagy.
• "notify" => "color-modal", - aký typ upozornení sa má zobraziť, textové pole - bloky v hornom rohu stránky, farba - farebné zvýraznenie vo formulári, modálne - modálne okno v strede stránky, žiadne - zakázať. Môžete kombinovať napríklad: farebne modálne - chyby vo vypĺňaní polí so zvýraznením a stav odosielania textu v modálnom okne TODO
• "usepresuf" => false - Či už sa použije vlastný dodatok k predmetu alebo k nadpisu listu, v prípade malej zmeny môžete zadať napríklad %%cfg.title.suffix%%, na to musí byť skryté pole vo formulári, ďalšie podrobnosti nájdete v f -qiu presuf()

Nastavenie šablón listov Takže. Poďme sa teraz pozrieť na tému našich správ.
Po prvé, aby bol formulár odoslaný v šablóne, musíte v nastaveniach formulára povoliť použitie súboru šablóny - "tpl" => true ,
Po druhé, musíte vytvoriť súbor šablóny s príponou *.tpl v priečinku (feedback/tpl/) v súlade s názvom formulára (name="form-1" ).

Príklad: (spätná väzba/tpl/form-1.tpl)

Nadpis v tele e-mailu
%%name.title%%	%%name.value%%
%%tell.title%%	%%tell.value%%

pomenovať, povedať atď. - Toto sú atribúty (name="") polí, ktoré používateľ vyplní.
title – Názov prvku formulára, ktorý je nastavený v poli nastavení prvku formulára.
hodnota – hodnota prvku formulára.

To je na dnes všetko, no scenár určite nie je dokonalý, takže komentáre a popisy chýb sú vítané a v budúcich verziách budú opravené.

P.S. Scenár bol vyvinutý tímom

Pre vývoj webového projektu je veľmi dôležité získať spätnú väzbu od návštevníkov. Bohužiaľ, na mnohých webových stránkach možnosť poslať správu vývojárom buď nie je poskytovaná vôbec, alebo je spojená s dosť vážnymi problémami.

Dnes urobíme jednoduché riešenie tohto problému. Pomocou jQuery, PHP a triedy PHPMailer formulár odošle návrh používateľa priamo do vašej schránky.

HTML

Začnime s označením HTML. Štýly sú zahrnuté v hornej časti dokumentu a súbory JavaScript sú zahrnuté v spodnej časti. Tým sa optimalizuje proces načítania stránky, takže skripty sa načítavajú ako posledné, čo umožňuje používateľovi vidieť obsah stránky.

demo.html

Formulár spätnej väzby pomocou PHP a jQuery | Demo pre webovú stránku Spätná väzba

Ak chcete odpoveď, uveďte kontaktné údaje.

Odoslať

Vnútri telo Nachádza div#spätná väzba. Umiestňuje sa v pravom dolnom rohu okna pomocou pevného umiestnenia, ktoré uvidíte v sekcii CSS v tutoriále.

Vo vnútri tohto div je umiestnených päť farebných prvkov rozpätie. Každý z nich má 20% šírku a je odsadený doľava. Takto sú umiestnené presne po celej šírke. div#spätná väzba.

Nasleduje kontajner .section, ktorý obsahuje nadpis, textovú oblasť a tlačidlo.

CSS

Prejdime k nastaveniu štýlov pre formulár. Najprv si povedzme pár slov o tom, z čoho pozostáva štruktúra šablóny štýlov. Ak sa pozriete na definície CSS nižšie, všimnete si, že každé pravidlo začína #feedback . Tým sa vytvorí podobný menný priestor v CSS, čo uľahčuje pridávanie kódu na existujúci web bez konfliktov.

styles.css - 1. časť

#feedback( background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; right:120px; margin-bottom:-270px; z-index:10000; ) #feedback .section( background :url("img/bg.png") repeat-x vľavo hore; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; ) #feedback .color( float:left; height:4px; width:20%; overflow:hidden; ) #feedback .color-1( background-color:#d3b112;) #feedback .color-2( background-color:#12b6d3;) #feedback .color-3( background-color :#8fd317;) #feedback .color-4( background-color:#ca57df;) #feedback .color-5( background-color:#8ecbe7;) #feedback h6( background:url("img/feedback.png" ) no-repeat; height:38px; margin:5px 0 12px; text-indent:-99999px; cursor:pointer; ) #feedback textarea( background-color:#fff; border:none; color:#666666; font:13px "Lucida Sans",Arial,sans-serif; výška:100px; výplň:10px; šírka:236px; zmena veľkosti:žiadna; obrys:žiadna; pretečenie:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; )

Prvým prvkom, ktorý sa má štylizovať, je div#spätná väzba. Má priradenú pevnú pozíciu a je ukotvený v okne prehliadača. Potom nasleduje definícia pre div .oddiel a päť farebných prvkov rozpätie. Tieto prvky sa líšia iba farbou pozadia, ktorá je priradená samostatne pre každú triedu.

Úplne dole v prezentovanej časti súboru CSS sú definované pravidlá pre zobrazenie textovej oblasti.

styles.css - 2. časť

#feedback a.submit( background:url("img/submit.png") bez opakovania; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent: -99999px; width:91px; ) #feedback a.submit:hover( background-position:vľavo dole; ) #feedback a.submit.working( background-position:hore right !important; cursor:default; ) #feedback .message ( font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; ) #feedback .arrow( background:url("img/arrows.png) ") no-repeat; float:right; width:23px; height:18px; position:relative; top:10px; ) #feedback .arrow.down( background-position:left top;) #feedback h6:hover .down( background-position:left bottom;) #feedback .arrow.up( background-position:right top;) #feedback h6:hover .up( background-position:right bottom;) #feedback .response( font-size:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; )

Druhá časť šablóny štýlov definuje vzhľad tlačidla odoslania. Všimnite si, že existujú tri stavy tlačidiel, ktorých obrázky sú obsiahnuté v jednom súbore pre obrázok na pozadí - odoslať.png. Zobrazujú sa iba v prípade potreby.

jQuery

Formulár spätnej väzby má dva stavy – minimalizovaný a maximálny. Pri zavádzaní je predvolený stav nastavený na minimalizovaný stav v pravej dolnej časti obrazovky. A jQuery prevezme formulár do maximálneho stavu, keď používateľ klikne na hlavičku. Táto funkcia je dosiahnutá viazaním udalosti a vykonávaním jednoduchých animácií.

script.js – 1. časť

$(document).ready(function())( // Relatívna adresa URL skriptu submit.php. // Pravdepodobne ju budete musieť zmeniť. var submitURL = "submit.php"; // Uloženie objektu spätnej väzby do vyrovnávacej pamäte: var feedback = $( "#feedback"); $("#feedback h6").click(function())( // Hodnoty vlastností animácie sú uložené // v samostatnom objekte: var anim = ( mb: 0, // Dolný okraj bodov: 25 // Horná výplň); var el = $(this).find(".šípka"); if(el.hasClass("dole"))( anim = ( mb: -270, pt : 10); ) // Prvá animácia posunie formulár nahor alebo nadol a druhá posunie // nadpis tak, aby bol zarovnaný k zmenšenej verzii feedback.stop().animate((marginBottom: anim.mb)); feedback.find(".section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("down up"); )); ));

Aby bol kód jednoduchý a jasný, v hornej časti sa vytvorí objekt anim, ktorý obsahuje hodnoty pre animáciu, a umiestni sa operátor ak. V závislosti od existencie triedy „ dole‘ na šípke rozbalíme alebo zbalíme tvar.

Druhá časť script.js zvláda prácu s AJAX odoslať.php.

script.js – 2. časť

$("#feedback a.submit").live("click",function())( var button = $(this); var textarea = feedback.find("textarea"); // Pracovnú triedu nepoužívame iba na nastavenie štýlov pre tlačidlo odoslania údajov, // ale aj ako istý druh zámku, ktorý zabráni viacnásobnému vygenerovaniu formulára. if(button.hasClass("working") || textarea.val().length< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

Na interakciu používame metódu $.ajax() AJAX jQuery odoslať.php. Táto metóda poskytuje o niečo väčšiu kontrolu nad pripojením ako $.get() a $.post() .

Jednou z výhod metódy je viditeľnosť vlastností objektu v rámci „celej“ funkcie spätného volania. Tu kontrolujeme stav odpovede z hľadiska súladu chyba 404 (stránka sa nenašla) a zobrazí správu používateľovi so žiadosťou, aby skontroloval cestu submitURL.

Teraz je čas prejsť na záverečnú časť – PHP.

PHP

PHP spracuje dáta odoslané z AJAX, overí ich a odošle e-mailovú správu na zadanú adresu.

odoslať.php

// Tu musíte zadať svoju adresu $emailAddress = " [e-mail chránený]"; // Na zabránenie zahlteniu použite reláciu: session_name("quickFeedback"); session_start(); // Ak bol posledný formulár odoslaný pred menej ako 10 sekundami, // alebo používateľ už odoslal 10 správ za poslednú hodinu if($_SESSION[ "lastSubmit"] && (time() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("Pred opätovným odoslaním správy počkajte niekoľko minút."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; vyžadovať "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc"))( $_POST["message"] = stripslashes($_POST["message"]); ) if(mb_strlen($_POST["message"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Pridajte adresu príjemcu $mail->AddAddress($emailAddress); $mail->Subject = "Nový e-mail z formulára spätnej väzby"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Formulár spätnej väzby na ukážkovej stránke"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Formulár spätnej väzby na stránke s ukážkou"); $mail->Odoslať(); echo "Ďakujem!";

Najprv používame správu relácií, aby sme zistili, ako často používateľ použil odoslanie formulára za poslednú hodinu, a tiež určíme čas, ktorý uplynul od posledného odoslania. Ak od posledného odoslania uplynulo menej ako 10 sekúnd alebo používateľ už odoslal za poslednú hodinu viac ako 10 správ, zobrazí sa chybové hlásenie.

E-mail sa odosiela pomocou triedy PHPMailer. Pozor! Funguje iba s PHP5.

Viacnásobné metódy PHPMailer slúži na konfiguráciu odchádzajúceho e-mailu. Metóda IsMail() hovorí triede, aby použila internú funkciu PHP mail(). Metóda AddAddress() pridá adresu príjemcu (do tejto metódy môžete pridať viac ako jedného príjemcu pomocou ďalších volaní). Po doplnení predmetu listu a textu sa uvedie adresa pre odpovede a správa sa odošle.

Pripravený!

Záver

Tento formulár môžete použiť na usporiadanie rýchlej spätnej väzby od návštevníka vášho webu. Veľmi nízka prekážka odoslania – stačí vyplniť textové pole a kliknúť na tlačidlo – vytvorí skvelé prostredie pre návštevníkov vašich stránok, aby mohli začať zdieľať svoje nápady. Skript je tiež dobre štruktúrovaný a ľahko sa prispôsobuje, čo vám pomôže použiť ho na vašom webe s minimálnym úsilím.

V tejto lekcii sa zoznámime s funkciou mail() na príklade vytvorenia formulára spätnej väzby v PHP a následného odoslania prijatých údajov emailom.

Na to si vytvoríme dva súbory – forma.php a mail.php. Prvý súbor bude obsahovať iba formulár s poliami, do ktorých používateľ zadáva údaje. Vo vnútri štítku formulára je tlačidlo "Odoslať" a atribút action, ktorý odkazuje na handler - mail.php, čo je miesto, kde sa po kliknutí na tlačidlo sprístupnia údaje z formulára "Odoslať". V našom príklade sa údaje formulára odošlú na webovú stránku s názvom „/mail.php“. Táto stránka obsahuje PHP skript, ktorý spracováva údaje formulára:

Údaje formulára sa odosielajú pomocou metódy POST (spracované ako $_POST). $_POST je pole premenných odovzdaných aktuálnemu skriptu pomocou metódy POST.

Nižšie vidíte obsah súboru forma.php, ktorého polia si na niektorom webe vypĺňa sám používateľ. Všetky polia na zadávanie údajov musia mať atribút name, hodnoty si zapisujeme sami na základe logiky.

Formulár spätnej väzby v PHP odoslaný e-mailom


Formulár spätnej väzby v PHP





Zanechajte správu:
Tvoje meno:



Email:

Telefónne číslo:

Správa:

Textová oblasť môže obsahovať neobmedzený počet znakov -->

Takto vyzerá formulár vizuálne v prehliadači.

Ďalej napíšeme kód pre súbor mail.php. Vymýšľame si vlastné názvy premenných. V PHP premenná začína znakom $ a potom názvom premennej. Textová hodnota premennej je uzavretá v úvodzovkách. Pomocou premenných sa obsah formulára odošle na email administrátora jednoduchým umiestnením názvu prvku formulára do hranatých zátvoriek – hodnoty názvu.

Údaje z poľa $_POST sa teda prenesú do príslušných premenných a odošlú na poštu pomocou funkcie mail. Vyplňte náš formulár a stlačte tlačidlo Odoslať. Nezabudnite uviesť svoj email. List prišiel okamžite.

V tomto článku sa dozviete, ako vytvoriť formulár spätnej väzby v PHP pre váš web. Skript spracuje údaje zadané používateľom a pošle výsledok na e-mail, ktorý potrebujete. V PHP poskytneme možnosť, keď formulár spätnej väzby funguje, ale pri odosielaní listu sa vyskytne chyba. V tomto prípade zapíšeme všetky zadané informácie do súboru.

Takže poďme na to, najprv si stránku označíme a napíšeme na ňu štýly. Označenie bude obsahovať bežný formulár spätnej väzby s dvoma vstupmi (telefón, pošta) a jednou textovou oblasťou, kde podľa našej predstavy používateľ zadá svoju správu. Obslužný program formulára umiestnime na samostatnú stránku.

Forma spätnej väzby

Zadajte telefón:

Tvoja pošta:

Tvoja otázka:

Napíšeme štýly:

Html, telo( výška: 100 %; okraj: 0; ) html( farba pozadia: #fff; farba: #333; písmo: 12px/14px Verdana, Tahoma, bezpätkové; kurzor: predvolené; ) #feedback-form ( farba pozadia: #ececec; okraj: 50px automaticky 0; zarovnanie textu: stred; šírka: 430px; odsadenie: 15px; ) #feedback-form h2( margin-bottom: 25px; ) #feedback-form input, #feedback -form textarea( background-color: #fff; border: 1px solid #A9A9A9; padding: 1px 5px; width: 90%; ) #feedback-form input( height: 26px; ) #feedback-form textarea( height: 75px; padding-top: 5px; ) #feedback-form input( margin-top: 15px; background-color: #0B7BB5; border: 1px solid #CCCCCC; color: #FFFFFF; font-weight: bold; height: 40px; line- výška: 40px; transformácia textu: veľké písmená; šírka: 225px; kurzor: ukazovateľ; )

V dôsledku všetkých týchto akcií získate tento formulár:

Teraz je čas zaoberať sa serverom. Náš skript bude obsahovať niekoľko častí:

• nastavenie;
• Sekundárne funkcie;
• Spracovanie prichádzajúcich údajov;
• Výstup správy.

Všetky tieto časti sú samozrejme podmienené, keďže nám nikto nebráni robiť v kóde neporiadok alebo naopak presúvať kľúčové časti do iných súborov. Myslím si však, že je lepšie vytvoriť obslužný program v jednom súbore, aby bolo vhodné ho pripojiť k iným projektom.

nastavenie

V tejto fáze vytvoríme tri premenné: $my_email (schránka, do ktorej sa odosielajú údaje), $path_log (cesta k súboru denníka) a $time_back (čas, kedy sa používateľ vráti na stránku).

// Zadajte svoju poštovú schránku $my_email = " [e-mail chránený]"; // Určte, kde budú uložené protokoly $path_log = "log.txt"; // Čas, kedy sa používateľ vráti na stránku (s) $time_back = 3;

Sekundárne funkcie

Tu popíšeme päť funkcií, ktoré zjednodušia spracovanie údajov.

Šablóny výstupu správ:

Function error_msg($message)( $message = ".$message.""; return $message; ) function success_msg($message)( $message = "".$message.""; return $message; )

Vymazanie údajov prijatých z formulára:

Funkcia clear_data($var)( return trim(strip_tags($var)); )

Posielam list:

Funkcia send_mail($email, $subj, $text, $from)( $headers = "Od: ".$from." \r\n"; $headers .= "MIME verzia: 1.0\r\n"; $headers .= "Typ obsahu: text/html; charset=utf-8 \r\n"; $result = mail($email, $subj, $text, $headers); if(!$result)( return nepravda; ) vráti true; )

A posledná funkcia, ktorá skontroluje telefón a poštu, či je správne nahraný ich formát.

Funkcia check_format($data, $type)( switch($type)( case "e-mail": $pattern = "/^*@(+(*+)*\.)++$/i"; if(preg_match( $vzor, ​​$data))( návrat true; ) prerušenie; veľkosť písmen "telefón": $vzor = "/^(\+?\d+)?\s*(\(\d+\))?[\s-] *([\d-]*)$/"; if(preg_match($pattern, $data))( return true; ) break; ) return false; )

Ako vidíte, všetky funkcie, ktoré sme napísali, majú malú veľkosť. Môžete ich nechať mimo oblasti spracovania údajov, ale keď potrebujete niečo zmeniť alebo rozšíriť, napríklad check_format(), bude to oveľa jednoduchšie a pohodlnejšie.

Spracovanie prichádzajúcich údajov

V prvom rade zistíme, z ktorej stránky používateľ prišiel. Potom definujeme premenné, do ktorých sa budú ukladať naše správy a stav odoslania listu.

// Zistite predchádzajúcu stránku $prev_page = $_SERVER["HTTP_REFERER"]; // Naše správy $msg = ""; // Stav e-mailu $status_email = "";

Teraz, aby sme sa vyhli problémom s kódovaním, označujeme ho pomocou hlavičky.

Hlavička("Typ obsahu: text/html; charset=utf-8");

If($_SERVER["REQUEST_METHOD"] == "POST")( if(isset($_POST["number"], $_POST["e-mail"], $_POST["question"]))( $number = clear_data ($_POST["number"]); $email = clear_data($_POST["email"]); $question = clear_data($_POST["question"]); if(check_format($number, "telefón") && check_format($email, "email") && !empty($question))( // Vytvorenie listu $e_title = "Nová správa"; $e_body = ""; $e_body .= ""; $e_body .= "Телефон: ".$number; $e_body .= "!}
"; $e_body .= "Mail: ".$email; $e_body .="
"; $e_body .= "Otázka: ".$question; $e_body .= ""; $e_body .= ""; // END Vytvorte list if(send_mail($my_email, $e_title, $e_body, $prev_page) ) ( $status_email = "úspech"; $msg = success_msg("Ďakujeme za vašu otázku.
Odpovieme vám čo najskôr."); )else( $status_email = "chyba"; $msg = error_msg("Pri odosielaní e-mailu sa vyskytla chyba."); ) // Zapísať do súboru $str = " Čas: ".dátum ("d-m-Y G:i:s")."\n\r"; $str .= "Telefón: ".$číslo."\n\r"; $str .= "Pošta: " .$email." \n\r"; $str .= "Otázka: ".$question."\n\r"; $str .= "E-mail: ".$status_email."\n\r"; $ str .= "= =======================================\n\r"; file_put_contents ($path_log, $str, FILE_APPEND); )else( $msg = error_msg( "Správne vyplňte formulár!"); ) )else( $msg = error_msg("Vyskytla sa chyba!"); ) )else( skončiť ;)

V napísanom kóde zistíme, či bol formulár odoslaný, inak tento súbor zatvoríme pomocou funkcie exit. Ďalej skontrolujeme prítomnosť buniek s našimi údajmi v poli POST; ak prišli, vyčistíme ich od prípadného odpadu. Po vyčistení skontrolujeme formáty pošty a telefónu, ako aj prítomnosť textu v premennej otázka. Ďalej list vygenerujeme, odošleme a vypíšeme logy, kde okrem údajov uložíme aj stav odoslania listu. Takto môžeme sledovať fungovanie funkcie mail() a zároveň nestratiť dáta.

Výstup správy

Jediné, čo musíme urobiť, je upozorniť používateľa na úspešnú alebo „nie tak“ dokončenú operáciu a vrátiť ho späť na stránku s formulárom. Na tento účel používame značkovanie s inklúziami skriptov PHP.

Na presmerovanie užívateľa späť na stránku použijeme refresh meta tag, kde vložíme PHP kód s už vytvorenými premennými. Budeme tiež musieť použiť trochu JavaScriptu, aby bola stránka trochu dynamickejšia. Napíšeme funkciu timeBack(), ktorá bude počítať sekundy v opačnom poradí pred presmerovaním.