Obrazac za povratne informacije u jQueryju i PHP-u. Kontakt obrazac s jQuery, jGrowl, ajaxForm i Buzz

Kako ne biste ovisili o radu tuđih skripti, naučite ih sami izraditi. Moj video tečaj će vas naučiti ovome " PHP i MySQL od nule do Gurua":

U ovoj lekciji naučit ćemo o funkciji pošta(), na primjeru stvaranja povratne informacije u PHP-u uz naknadno slanje primljenih podataka poštom.

Da bismo to učinili, kreirat ćemo dvije datoteke - format.php I mail.php. Prva datoteka će sadržavati samo obrazac s poljima za korisnički unos. Unutar oznake oblik- dugme "Poslati" i atribut akcijski, koji se odnosi na rukovatelja - mail.php, njemu se pristupa podacima iz obrasca kada se pritisne tipka "Poslati". U našem primjeru, podaci obrasca šalju se na web stranicu pod nazivom "/mail.php". Ova stranica sadrži skriptu za PHP koji obrađuje podatke obrasca:

Ovako obrazac izgleda vizualno u pregledniku.

Zatim napišite kod za datoteku mail.php. Smišljamo nazive za same varijable. U PHP varijabla počinje znakom $ , nakon čega slijedi naziv varijable. Vrijednost teksta varijabla je zatvorena u navodnicima. Uz pomoć varijabli, sadržaj obrasca prenosi se na e-mail administratora, jednostavnom zamjenom u uglate zagrade ime elementa forme - vrijednost Ime.

$do=" [e-mail zaštićen]"; // e-pošta primatelja podataka iz obrasca
$tema = "PHP obrazac za kontakt"; // predmet primljene e-pošte
$message = "Vaše ime: ".$_POST["name"]."
";//dodijelite vrijednost dobivenu iz obrasca name=name varijabli
$message .= "E-pošta: ".$_POST["e-pošta"]."
"; //dobijeno iz obrasca ime=e-pošta
$message .= "Telefonski broj: ".$_POST["telefon"]."
"; //dobijeno iz obrasca name=phone
$message .= "Poruka: ".$_POST["poruka"]."
"; //dobijeno iz obrasca ime=poruka
$headers = "MIME-verzija: 1.0" . "\r\n"; // zaglavlje odgovara formatu plus znak novog reda
$headers .= "Tip sadržaja: tekst/html; charset=utf-8" . "\r\n"; // označava vrstu sadržaja koji se šalje
mail($to, $tema, $message, $headers); //šalje vrijednosti varijabli na primateljevu e-poštu
?>

Dakle, podaci iz niza $_POST bit će proslijeđen odgovarajućim varijablama i poslan na poštu pomoću funkcije pošta. Ispunite naš obrazac i pritisnite gumb za slanje. Ne zaboravite uključiti svoju e-poštu. Pismo je stiglo odmah.

Pa nastavimo razgovor. U prošlom postu rekao sam vam zašto nam zapravo trebaju povratne informacije i što je to. U ovome ću vas upoznati s pravilima povratne informacije, te malo pričati o tome kako i gdje to primijeniti.

9 principa povratne informacije.

Za svako od načela dat ću primjer - također vrlo jednostavan, ali nadam se da će principe učiniti razumljivijima. Uz to ću razvodniti svojim mislima. Ići!

1. Povratna informacija je najvažniji alat u svim sferama života, a još više u društvenim aktivnostima i radu s ljudima. Iskoristi!
O važnosti povratne informacije pisao sam u prošlom postu, ovdje želim pisati o njenoj upotrebi. Vjerujem da što više ljudi bude upoznato s povratnom informacijom i njezinim principima, svima će nam biti lakše živjeti. Primjenjivo je na poslu, u svakodnevnoj komunikaciji s ljudima, u obitelji. Ali! Vrlo je važno ne pretjerati. Moj voditelj grupe učitelj je jednom rekao: "Shvatila sam da moram na godišnji odmor kada sam počela davati povratne informacije svom mužu i djeci, strogo slijedeći njegove principe." Bila sam duboko dirnuta ovom njenom izjavom. Nemojte me krivo shvatiti, sigurna sam da povratne informacije mom mužu, djeci, majci i svekrvi mogu samo koristiti. Ali ne zaboravite da je obitelj naša. sigurno mjesto, i trebalo bi biti mjesta za neobjašnjive emocije, glupe izjave, besciljne manifestacije ljubavi, neobičnosti, konačno. U obitelji je vrlo važno pronaći ravnotežu između povratnih informacija i običnih ljudskih emocija. To je svugdje važno, ali u obitelji – posebno.

2. Povratna informacija se daje iz želje da se pomogne, poboljša, podrži i usmjeri osobu.
Ovaj princip je izuzetno važan. Prije nego što date povratnu informaciju, zastanite na trenutak i razmislite zašto to želite reći. Vaša djevojka želi ići na prvi spoj u suknji koja joj stvarno kvari lijep izgled, a vi želite da joj spoj prođe dobro, jeste li zabrinuti za nju? Govori. Živcira li vas miris parfema vaše kolegice, a i ona sama, a već mjesec dana vas svrbi da joj kažete sve što mislite o njenom zagušljivom mirisu? Ovo nije povratna informacija, prijatelji. Ovdje je vjerojatno najbolje šutjeti.

3. U procesu povratne informacije vaš je zadatak donijeti konkretnim primjerima i činjenice, a ne apstraktne i emocionalne izjave.
Ovdje je sve jednostavno. "Vasya, dovraga, ti si koza, pa, što si mi, dovraga, ovdje napisao!" - ovo nije povratna informacija i malo je vjerojatno da će ikome koristiti. “Vasya, griješiš. Zamolio sam te da mi napišeš popis svih klijenata s prezimenima iz tri slova, a ti si mi napisao popis zaposlenika s prezimenima iz četiri slova. Bit će mi puno lakše ako pažljivije slušate moje zahtjeve. "Ovo je povratna informacija. Vasya je možda koza, ali nakon prve rečenice ostat će koza. Nakon povratne informacije, postoji šansa da sljedeći put dobit ćeš nešto od njega, što ti treba.

4. Izbor prave riječi a formulacija je iznimno važna u procesu povratne informacije – zapamtite da ispred vas sjedi osoba koja vam je važna ili vam je važna interakcija s njom (ovo je obično na poslu).
Ova točka izravno slijedi iz prethodne. Prije nego što date povratnu informaciju, RAZMISLITE što točno želite reći i što oni žele postići. Postoji takozvani "sendvič princip", ja sam prilično ravnodušan prema njemu, ali mnogi ga smatraju korisnim, zašto ne. Kaže da argumente treba staviti u povratnu informaciju, poput kruha i sira u sendviču. Počinjemo s pozitivnim (kruh), nastavljamo s negativnim (sir), a završavamo opet s pozitivnim. Mislim da je previše uglačan, ali ako ti se sviđa - uzmi i koristi.

5. Preporučljivo je ne koristiti riječ "ali" u povratnim informacijama (sve mi se svidjelo, ali ...). Poništava i precrtava ono što je prije rečeno.
Ako vaša povratna informacija sadrži i pozitivne i negativne točke, samo ih razdvojite, izgovorite u različitim rečenicama. Uostalom, oni ne ovise jedni o drugima i ne poništavaju jedno drugo. Vaša djevojka, koja vam je došla po savjet o novoj odjeći, vjerojatnije će biti uznemirena ako joj kažete "Suknja nije ništa, ali cipele su apsolutno glupe." Ali ako kažete "Sviđa mi se ova suknja, savršeno stoji na tebi, vitki i tvojoj boji. Ne volim cipele, čini mi se da ovo nije tvoj stil, a ni boja nije dobra." Ovdje se radi o "istini u oku". Povratne informacije nam omogućuju da kažemo ovu istinu bez rizika da uvrijedimo prijatelje ili se posvađamo s kolegama. Naravno, imam prijatelje i članove obitelji s kojima će funkcionirati "glupa suknja", pa čak i "krive noge", ali svi imamo malo takvih ljudi, pa pogledajte točku 1.

6. Zapamtite da je dobra povratna informacija vrsta povratne informacije koja će omogućiti osobi koja je prima da nešto poboljša. Zapamtite također da se nitko nije dužan složiti s vašim povratnim informacijama i prihvatiti ih - na kraju krajeva, vi ste uvijek subjektivni.
Ovo je, prijatelji moji, izuzetno važna točka. Ne zaboravimo da će prijatelj s glupim cipelama najvjerojatnije nastaviti hodati u njima. A naše mišljenje nije mišljenje u posljednjoj instanci. U najboljem slučaju možemo se nadati da će se na ovaj ili onaj način uzeti u obzir. U drugom slučaju naše mišljenje može ostati samo naše, a to je NORMALNO. Uostalom, ni sami ne prihvaćamo uvijek mišljenje onoga koji nam daje povratnu informaciju, bilo da je trostruki nobelovac ili majka. Stoga ostavljamo odluku - prihvatiti ili ne prihvatiti povratnu informaciju od strane podržane.

7. Povratne informacije ne smiju biti osuđujuće, već trebaju odražavati SAMO vaše misli i osjećaje o primatelju povratne informacije u određenoj situaciji.
Da, da, čim osudimo, naša povratna informacija gubi na vrijednosti, čini mi se da tu ni primjer nije potreban, i tako je sve jasno.

8. Ako ste primatelj povratne informacije, ne zaboravite zahvaliti osobi koja vam daje ovu povratnu informaciju. Sa stečenim znanjem treba obaviti posao, odvojiti žito od kukolja i pokušati ih primijeniti. Povratna informacija je vrijedan dar!
Teško, zar ne? No, mislim da je mogućnost primanja povratnih informacija jednako važna kao i njihova davanje.

9. Vrlo je važno ne izgubiti pozitivne povratne informacije tijekom procesa povratnih informacija – to nije ništa manje važno od negativne povratne informacije!
Mnogi od nas imaju takav stav – da bi čovjek učio, treba ga grditi. Takav relikt sove. Pa, ovo je sranje, znaš. Moramo imati na umu da povratne informacije nisu samo konstruktivan i točan popis nedostataka, već i nezamjenjiva oznaka pluseva i potraga za dobrim stvarima. Uostalom, svom mužu kažete ne samo "Dragi, presolio si juhu!", nego i "Draga, kakve si ukusne lepinje ispekla!" :) Uostalom, ako muž stalno čuje samo za zagorene kotlete i za slanu juhu, vrlo brzo će prestati kuhati. Stoga u drugim područjima – ne zaboravite na dobro, ali bolje – počnite s potragom za njim.

Želim vam dati primjer vrlo važne povratne informacije koju sam dobio. Primjer je vrlo osoban, ali mi je važno da vam ispričam ovo iskustvo kako bih ga pokazao prava akcija ovaj alat ne samo na apstraktnom Vasya Pupkinsu iz mojih primjera.
Prije otprilike godinu dana moja najbliža prijateljica me pozvala u kafić. Ilan, moj sin, imao je 3 mjeseca, ja sam tek počela izlaziti iz pelena i kolica na svijet. Mislio sam da ćemo razgovarati o sranjima naše tetke. I rekla je da mora razgovarati sa mnom o ranici. Rekla mi je da joj stvarno nedostajem. Da sam se u zadnjih šest mjeseci potpuno uživjela u sebe i u svoju obitelj, da ne pričam s njom telefonom, ne govorim joj ništa o trudnoći ili sinu, ne slušam je probleme i radosti. Rekla je da sam joj jako nedostajala i da ne zna što će dalje biti s našom vezom, budući da se odselimo, a ja apsolutno nisam upoznat s njenim vijestima. Dodala je kako prolazi kroz jako težak period u životu, te joj je jako potrebna moja podrška.
Bio je to pravi fidback. Govorila je o svojim osjećajima, navodeći primjere konkretnih situacija. Nije me osuđivala zbog uživljenosti u obitelj, pričala je o tome što bi htjela od naše veze, i kako se to može postići. Bilo je jasno da to govori ne samo za sebe, već i za mene.
A za mene je to bila apsolutna vijest! Toliko sam bila uronjena u svog tek rođenog sina, a prije toga – u trudnoću, da nisam primijetila kako sam otuđila sebi najbliže i vrlo važne ljude! gore sam danasšokiran koliko nisam bio svjestan svog ponašanja.

Što bi se dogodilo da tada nije razgovarala sa mnom? Najvjerojatnije, niz pritužbi: "zašto me ne nazoveš?" “nismo se vidjeli sto godina”, “ne zanima te moj život” itd.
Što se zapravo dogodilo? Probudio sam se". Jasno sam joj rekao da ne želim nigdje ići, da je volim i da se vraćam. Sabrala sam se, i napravili smo nekoliko "dejta" odjednom za nadolazeće mjesece. Počeo sam češće zvati i pokušavati podići slušalicu kad je nazvala. I također - otišao sam posjetiti i drugu prijateljicu, kojoj je teže dati ovakvu povratnu informaciju, i sam joj postavio pitanje. A pokazalo se da se i ona osjeća kao prva – možete li zamisliti? Možete li zamisliti koliko je dobrog proizašlo iz jedne povratne informacije? Održala sam odnose s dvije meni vrlo važne osobe. I jako sam zahvalna svom prijatelju na tom razgovoru.

Zaključno, želim reći da u životu ne postoje samo povratne informacije. Ima tu svađa, seksa, gluposti, svađa, ugađanja, humora, ljutnje, ljubavi, komplimenata, smijeha i još mnogo toga. I sve to ima pravo na postojanje – kao različiti aspekti međuljudske komunikacije. A uz povratne informacije, samo je malo lakše živjeti.

Prilikom pokretanja novog web projekta, nema ništa bolje nego dobiti pozitivne kritike i zahvalnost od prvih posjetitelja. Nažalost, vlasnici mnogih web stranica tu činjenicu zanemaruju, te je prilično teško kontaktirati administraciju na njihovoj stranici.

Danas ćemo vam reći o jednostavnom rješenju problema. Ovaj obrazac, koristeći jQuery, PHP i PHPMailer, omogućit će vam primanje povratnih informacija od posjetitelja izravno na vaš e-mail pretinac.

HTML

Počnimo s HTML oznaka. Stilska tablica je uključena na početku dokumenta, a javascript izvori su na kraju. To ubrzava izvedbu jer se skripte učitavaju posljednje dok se ostatak web stranice učitava i prikazuje.

: feedback.html

Obrazac za brzu povratnu informaciju s PHP i jQuery | Tutorialzine Demo

U tijelu dokumenta vidimo DIV "#feedback". Vremenski je određen fiksnim pozicioniranjem u donjem desnom kutu prozora, koji možete vidjeti sljedeći odjeljakčlanaka.

Unutar njega se nalazi 5 raspona u boji. Oni su 20% širine dokumenta i poravnati su s lijevom stranom. Ovo će popuniti cijelu širinu #feedback DIV.

Konačno, u spremniku .section, koji sadrži naslov i zaglavlje, nalazi se gumb i polje za unos teksta.

Prelazeći na uređivanje stilova obrasca, prvo moramo reći nešto o tome kako je strukturiran stilski list. Kao što možete vidjeti iz CSS definicija u nastavku, svako pravilo počinje s #feedback. Na taj način postižemo CSS ekvivalent imenskih prostora, što olakšava dodavanje koda na postojeću stranicu i pomaže u izbjegavanju mogućih sukoba.

: styles.css - 1. dio

#Povratne informacije(
boja pozadine:#9db09f;
širina:310px;
visina:330px;
položaj: fiksni;
dno:0;
desno:120px;
margin-bottom:-270px;
z-indeks:10000;
}

#feedback .section(
background:url("img/bg.png") repeat-x gore lijevo;
granica:1px solid #808f81;
border-bottom:nema;
padding:10px 25px 25px;
}

#feedback .color(
float:lijevo;
visina:4px;
širina: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") bez ponavljanja;
visina:38px;
margina:5px 0 12px;
uvlaka teksta:-99999px;
kursor:pokazivač;
}

#feedback textarea(
boja pozadine:#fff;
granica:nema;
boja:#666666;
font:13px "Lucida Sans",Arial,sans-serif;
visina:100px;
padding:10px;
širina:236px;

Moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
}
Prvi element koji trebamo formatirati je #feedback DIV. Daje mu se fiksni položaj i tempirano je na prozor preglednika. Slijedi definicija DIV.sekcije i pet raspona u boji. Ti se rasponi razlikuju samo u boji pozadine koju daju različite klase.

Na samom kraju imamo CSS pravila koja definiraju izgled polja za unos teksta.

: styles.css - 2. dio

#feedback a.submit(
background:url("img/submit.png") bez ponavljanja;
granica:nema;
zaslon: blok;
visina:34px;
margina:20px auto 0;
text-decoration:nema;
uvlaka teksta:-99999px;
širina:91px;
}

#feedback a.submit:hover(
background-position:lijevo dolje;
}

#feedback a.submit.working(
background-position:gore desno !važno;
kursor:zadano;
}

#feedback .message(
font-family:Corbel,Arial,sans-serif;
boja:#5a665b;
text-shadow:1px 1px 0 #b3c2b5;
margin-bottom:20px;
}

#feedback .arrow(
background:url("img/arrows.png") bez ponavljanja;
float:desno;
širina:23px;
visina:18px;
položaj:relativan;
vrh:10px;
}

#feedback .arrow.down( background-position:left top;)
#feedback h6:hover .down( background-position:lijevo dolje;)
#feedback .arrow.up( background-position:desno gore;)
#feedback h6:hover .up( background-position:desno dolje;)

#feedback .response(
veličina fonta:21px;
margin-top:70px;
text-align:center;
text-shadow:2px 2px 0 #889889;
boja:#FCFCFC;
}
U drugom dijelu stilskog lista možete vidjeti definiciju gumba za slanje. Imajte na umu da gumb ima tri položaja koja su povezana s istim pozadinska slika– submit.png i prikazuje se samo kada je potrebno. Položaji: standardni položaj, lebdeći položaj, kao i aktivni "radni" položaj. Kada je gumb u aktivnom položaju, efekt lebdenja je onemogućen.

Obrazac za povratne informacije ima dva položaja: skriveni i otkriveni. Kada se učita, prema zadanim postavkama njegova je pozicija postavljena na skrivena. Ali kada korisnik klikne na naslov, on se proširuje pomoću jQueryja. To se postiže praćenjem događaja i pokretanjem najjednostavnija animacija kao što možete vizualno vidjeti u nastavku.

: script.js - 1. dio

$(dokument).spreman(funkcija()(

// Relativni URL skripte submit.php.
// Vjerojatno ćete ga morati promijeniti.
var submitURL = "submit.php";

// Predmemoriranje objekta povratne informacije:
varfeedback = $("#feedback");

$("#feedback h6").click(function()(

// Pohranjujemo vrijednosti animiranih
// svojstva u zasebnom objektu:

Varel = $(ovo).nađi(".strelica");

If(el.hasClass("down"))(
anim = (
mb: -270,
bod: 10
};
}

// Prva animacija pomiče obrazac gore ili dolje, i drugi
// pomiče naslov "Povratne informacije", tako da se uklapa u minimiziranu verziju

Povratna informacija.stop().animate((marginBottom: anim.mb));

Feedback.find(.section").stop().animate((paddingTop:anim.pt),function()(
el.toggleClass("dolje");
});
});
Kako bi naš kod bio uredan, klauzule if premjestili smo na vrh dokumenta i stvorili anim objekt koji drži vrijednosti odgovorne za animaciju. Ovisno o tome postoji li klasa “dolje” na strelici, oblik sakrivamo ili otkrivamo.

Drugi dio script.js sadrži strukturu AJAX interakcije s submit.php.

: script.js - 2. dio

$("#feedback a.submit").live("click",function()(
varbutton = $(ovo);
var textarea = feedback.find("textarea");

// Koristimo radničku klasu ne samo za stiliziranje gumba za slanje,
// ali i kao neka vrsta "brave" za sprječavanje višestrukih podnošenja.

If(button.hasClass("working") || textarea.val().length return false;
}

// Zaključavanje obrasca i promjena stila gumba:
button.addClass("radni");

$.ajax((
url: submitURL
upišite: "post",
podaci: ( poruka: textarea.val()),
dovršeno: funkcija(xhr)(

vartext = xhr.responseText;

// Ovo će pomoći korisnicima da riješe probleme sa svojim obrascem:
if(xhr.status == 404)(
text = "Vaš put do submit.php nije točan.";
}

// Skrivanje gumba i tekstualnog područja, nakon čega
// prikazujemo primljeni odgovor s submit.php

Button.fadeOut();

textarea.fadeOut(function()(
var raspon = $(" ",{
className: "odgovor",
html: tekst
})
.sakriti()
.appendTo(feedback.find(".section"))
.pokazati();
)).val("");
}
});

vratiti false;
});
});
Ovdje koristimo AJAX metodu niži nivo jQuery - $.ajax(), kroz koji se implementira interakcija s submit.php. Ova metoda nam daje malo više kontrole nad vezom od $.get() ili $.post().

Jedan velika prednost ovu metodu sastoji se u "punopravnoj" povratnoj poruci. Ovdje mapiramo odgovor na grešku 404 koja ljubazno kaže korisniku da provjeri put za submitURL.

Sada nastavimo i prijeđimo na završni dio tutoriala – PHP odjeljak

PHP

PHP sadrži informacije proslijeđene kroz AJAX, obrađuje ih i šalje poruku u vaš sandučić e-pošte.

: submit.php

// U nastavku unesite svoju email adresu
$emailAddress = " [e-mail zaštićen]";

// Korištenje sesije za sprječavanje poplave:

session_name("brza povratna informacija");
početak_sjednice();

// Ako je zadnje slanje obrasca bilo prije manje od 10 sekundi,
// ili je korisnik već poslao 10 poruka u posljednjih sat vremena

if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] 10))(
die("Pričekajte nekoliko minuta prije ponovnog slanja.");
}

$_SESSION["lastSubmit"] = vrijeme();
$_SESSION["submitsLastHour"]++;

zahtijevaju "phpmailer/class.phpmailer.php";

if(ini_get("magic_quotes_gpc"))(
// Ako su čarobni navodnici omogućeni, skinite ih
$_POST["message"] = stripslashes($_POST["message"]);
}

if(mb_strlen($_POST["message"],"utf-8") die("Tijelo vaše povratne informacije je prekratko.");
}

$msg = nl2br(strip_tags($_POST["poruka"]));

// Korištenje klase PHPMailer

$mail = novi PHPMailer();
$mail->IsMail();

// Dodavanje adrese e-pošte primatelja
$mail->AddressAddress($emailAddress);

$mail->Subject = "Podnošenje novog obrasca za brzu povratnu informaciju";
$mail->MsgHTML($msg);

$mail->AddReplyTo(" [e-mail zaštićen]".$_SERVER["HTTP_HOST"], "Obrazac za brzu povratnu informaciju");
$mail->SetFrom(" [e-mail zaštićen]".$_SERVER["HTTP_HOST"], "Obrazac za brzu povratnu informaciju");

eho "Hvala!";
Za početak ćemo koristiti kontrolu PHP sesije kako bi se izračunalo koliko je puta korisnik koristio obrazac u proteklom satu. Ako korisnik pokuša poslati poruku manje od 10 sekundi nakon slanja posljednja poruka ili pošalje više od 10 poruka unutar jednog sata, tada će mu se prikazati pogreška.

Poruke se šalju pomoću klase PHPMailer. Radi samo s PHP5, tako da poslužitelj mora podržavati tu određenu verziju.

Brojne metode PHPMailera koriste se za konfiguriranje odlazne e-pošte. Koristimo IsMail() da kažemo klasi da koristi PHP-ovu internu mail() funkciju. AddAddress() dodaje primatelje (tamo možete dodati više od jednog primatelja). Nakon dodavanja objekta u tijelo dokumenta, navodimo adresu odgovora i šaljemo poruku.

Time je razvoj završen!

U zaključku

možeš koristiti ova forma prikupljanje povratnih informacija od posjetitelja. Ovim obrascem uvelike olakšavate proces pisanja recenzija korisnicima, a mnogi korisnici jednostavno neće napisati recenziju ako i dalje trebaju kliknuti negdje drugdje i otići negdje drugdje. Također možete jednostavno prilagoditi obrazac po svom ukusu ili predložak web stranice.

Za razvoj web projekta vrlo je važno dobiti povratnu informaciju od posjetitelja. Nažalost, na mnogim web-stranicama mogućnost slanja poruke programerima uopće nije pružena ili je povezana s prilično ozbiljnim poteškoćama.

Danas ćemo napraviti jednostavno rješenje za ovaj problem. Koristeći jQuery, PHP i klasu PHPMailer, obrazac šalje prijedlog korisnika izravno u vaš poštanski sandučić.

HTML

Počnimo s HTML oznakom. Stilovi su uključeni na vrhu dokumenta i JavaScript datoteke- na dnu. Time se optimizira proces učitavanja stranice tako da se skripte učitavaju posljednje, omogućujući korisniku da vidi sadržaj stranice.

demo.html

U tijelo nalazi razd #Povratne informacije. Nalazi se u donjem desnom kutu prozora pomoću fiksnog pozicioniranja, kao što će se vidjeti u odjeljku CSS vodiča.

Unutar ovoga razd postavljeno je pet obojenih elemenata raspona. Svaki je širok 20% i pomaknut ulijevo. Tako se postavljaju točno po cijeloj širini. razd #Povratne informacije.

Zatim dolazi kontejner .odjeljak, koji sadrži naslov, tekstualno područje i gumb.

css

Prijeđimo na stiliziranje obrasca. Prvo, recimo nekoliko riječi o tome od čega se sastoji struktura stilskog lista. Ako pogledate CSS definicije u nastavku, primijetit ćete da svako pravilo počinje s #Povratne informacije. Time se stvara prostor imena sličan CSS-u koji olakšava dodavanje koda na postojeću web stranicu bez sukoba.

styles.css - 1. dio

#feedback( background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; desno:120px; margin-bottom:-270px; z-index:10000; ) #feedback .section( background :url("img/bg.png") repeat-x gore lijevo; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; ) #feedback .color( float:left; height:4px; širina: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" ) bez ponavljanja; visina:38px; margina:5px 0 12px; text-indent:-99999px; kursor:pokazivač; ) #feedback textarea( background-color:#fff; border:none; color:#666666; font:13px "Lucida Sans",Arial,sans-serif; visina:100px; padding:10px; širina:236px; resize:none; outline:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-sha dow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; )

Prvi element koji treba stilizirati je razd #Povratne informacije. Dodjeljuje mu se fiksni položaj i usidreno je za prozor preglednika. Slijedi definicija za razd .odjeljak i pet obojenih elemenata raspona. Ovi se elementi razlikuju samo po boji pozadine, koja se dodjeljuje zasebno za svaku klasu.

Na samom dnu prikazanog dijela CSS datoteke definirana su pravila za prikaz tekstualnog područja.

styles.css - 2. dio

#feedback a.submit( background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent: -99999px; width:91px; ) #feedback a.submit:hover( background-position:left bottom; ) #feedback a.submit.working( background-position:gornje desno !važno; kursor:default; ) #feedback .message ( font-family:Corbel,Arial,sans-serif; boja:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; ) #feedback .arrow( background:url("img/arrows.png ") bez ponavljanja; float:desno; širina:23px; visina: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:desno gore;) #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; boja:#FCFCFC; display:block; )

Drugi dio stilskog lista definira izgled gumba za slanje. Imajte na umu da postoje tri stanja gumba, za koje su slike sadržane u jednoj datoteci za pozadinska slika - submit.png. Puštaju se samo po potrebi.

jQuery

Obrazac za povratne informacije ima dva stanja - minimizirano i maksimalno. Prilikom učitavanja, minimizirano stanje je prema zadanim postavkama postavljeno u donjem desnom kutu zaslona. A jQuery stavlja obrazac u maksimalno stanje kada korisnik klikne tipku miša na naslov. Ova funkcija izvedeno uvezivanjem događaja i izvođenjem jednostavnih animacija.

script.js - 1. dio

$(document).ready(function()( // Relativni URL skripte submit.php. // Vjerojatno ga trebate promijeniti. var submitURL = "submit.php"; // Predmemorija objekta povratne informacije: var feedback = $( "#feedback"); $("#feedback h6").click(function()( // Vrijednosti svojstva animacije pohranjene su // u zasebnom objektu: var anim = ( mb: 0, // Bottom margina pt: 25 // gornja margina ); var el = $(ovo).find(".arrow"); if(el.hasClass("dolje"))( anim = ( mb: -270, pt: 10) ; ) // Prva animacija pomiče obrazac gore ili dolje, a druga pomiče // naslov tako da se uskladi s minimiziranom verzijom feedback.stop().animate((marginBottom: anim.mb)); feedback.find( ".section").stop() .animate((paddingTop:anim.pt),function()( el.toggleClass("dolje gore"); )); ));

Kako bi kod bio jednostavan i jasan, na vrhu se kreira anim objekt koji sadrži vrijednosti za animaciju, a postavlja se operator ako. Ovisno o postojanju klase ' dolje ' na strelici širimo ili sažimamo obrazac.

Drugi dio script.js obrađuje AJAX rad s submit.php.

script.js - 2. dio

$("#feedback a.submit").live("click",function()(var button = $(this); var textarea = feedback.find("textarea"); // Koristimo radničku klasu za više nego samo stiliziranje gumba za slanje, // ali i kao vrsta lokota za sprječavanje višestrukih generacija obrazaca 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; // Ova operacija pomaže korisniku identificirati pogrešku: if(xhr.status == 404)( text = "Put do submit.php skripte je nevažeći."; ) // Sakrij gumb i tekstno područje nakon kojeg smo // prikazali primljen odgovor od gumba submit.php .fadeOut(); textarea.fadeOut(function()( var span = $(" ",( className: "response", html: text )) .hide() .appendTo(feedback.find(".section")) .show(); )).val(""); ) )); return lažno; )); ));

Za AJAX koristimo metodu jQuery $.ajax() za interakciju s submit.php. Ova metoda vam daje malo više kontrole nad vezom nego $.get() I $.post().

Jedna od prednosti metode je vidljivost svojstava objekta u funkciji povratnog poziva "cijela". Ovdje provjeravamo status odgovora radi usklađenosti 404 pogreška (stranica nije pronađena), i prikazati poruku korisniku u kojoj se traži da provjeri put submitURL.

Sada je vrijeme da prijeđemo na završni dio – PHP.

PHP

PHP analizira podatke proslijeđene pomoću AJAX-a, provjerava ih i šalje e-mail poruku na datoj adresi.

submit.php

// Ovdje unesite svoju adresu e-pošte $emailAddress = " [e-mail zaštićen]"; // Koristite sesiju da spriječite poplavu: session_name("quickFeedback"); session_start(); // Ako je zadnji obrazac poslan prije manje od 10 sekundi, // ili je korisnik već poslao 10 poruka u posljednjem satu if($_SESSION[ "lastSubmit"] && (time() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("Pričekajte nekoliko minuta prije ponovnog slanja poruke."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; zahtijevaju "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(); // Dodajte adresu primatelja $mail->AddAddress($emailAddress); $mail->Subject = "Nova pošta iz obrasca za povratne informacije"; $mail->MsgHTML($msg); $mail->AddReplyTo(" [e-mail zaštićen]".$_SERVER["HTTP_HOST"], "Obrazac za kontakt na demo stranici"); $mail->SetFrom(" [e-mail zaštićen]".$_SERVER["HTTP_HOST"], "Obrasca za kontakt na demo stranici"); $mail->Send(); echo "Hvala!";

Prvo koristimo upravljanje sesijom kako bismo odredili koliko često korisnik koristi slanje obrasca tijekom određenog vremenskog razdoblja. posljednji sat, te također odrediti vrijeme proteklo od toga zadnja otprema. Ako je od posljednjeg slanja prošlo manje od 10 sekundi ili ako je korisnik već poslao više od 10 poruka unutar zadnjeg sata, prikazuje se poruka o pogrešci.

E-pošta se šalje pomoću klase PHPMailer. Pažnja! Radi samo s PHP5.

Višestruke metode PHPMailer koristi se za konfiguraciju odlaznu e-poštu. Metoda IsMail() govori klasi da koristi internu PHP funkcija pošta(). Metoda AddAddress() dodaje adresu primatelja (možete dodati više od jednog primatelja s dodatnim pozivima ovoj metodi). Nakon dodavanja predmeta pisma i teksta, naznačuje se adresa za odgovore i poruka se šalje.

Spreman!

Zaključak

Možete koristiti ovaj obrazac za organiziranje brze povratne informacije od posjetitelja vaše stranice. Vrlo niska barijera prije slanja - samo trebate ispuniti tekstualno polje i kliknuti gumb - stvorit će se izvrsni uvjeti tako da posjetitelji vaših stranica počnu dijeliti svoje ideje. Skripta je također dobro strukturirana i jednostavna za postavljanje, što će vam pomoći minimalan napor koristite ga na svojoj web stranici.