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

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

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

Da bismo to uradili, kreiraćemo dva fajla - format.php i mail.php. Prva datoteka će sadržavati samo obrazac s poljima za unos korisnika. Unutar oznake formu- dugme "Pošalji" i atribut akcija, koji se odnosi na rukovaoca - mail.php, njemu se pristupa podacima iz obrasca kada se pritisne dugme "Pošalji". U našem primjeru, podaci obrasca se šalju na web stranicu pod nazivom "/mail.php". Ova stranica sadrži skriptu za PHP koji obrađuje podatke obrasca:

Ovako forma izgleda vizuelno u pretraživaču.

Zatim napišite kod za datoteku mail.php. Dolazimo do imena za same varijable. V PHP varijabla počinje znakom $ , nakon čega slijedi ime varijable. Vrijednost teksta varijabla je zatvorena u navodnicima. Uz pomoć varijabli, sadržaj obrasca se prenosi na email administratora, jednostavnom zamjenom u uglaste zagrade ime elementa forme - vrijednost ime.

$to=" [email protected]"; // email primaoca podataka iz obrasca
$tema = "PHP obrazac za kontakt"; // predmet primljene e-pošte
$message = "Vaše ime: ".$_POST["name"]."
";//dodijelite vrijednost dobivenu iz forme ime=ime varijabli
$message .= "E-pošta: ".$_POST["e-pošta"]."
"; //dobijeno iz obrasca name=email
$message .= "Broj telefona: ".$_POST["telefon"]."
"; //dobijeno iz obrasca name=phone
$message .= "Poruka: ".$_POST["message"]."
"; //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 primaocu na email
?>

Dakle, podaci iz niza $_POSTće biti proslijeđen odgovarajućim varijablama i poslan na poštu pomoću funkcije mail. Hajde da ispunimo naš formular i pritisnemo dugme za slanje. Ne zaboravite uključiti svoju e-poštu. Pismo je stiglo odmah.

Pa da nastavimo razgovor. U prošlom postu sam vam rekao zašto su nam zapravo potrebne povratne informacije i šta 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 svaki od principa dat ću primjer - također vrlo jednostavan, ali se nadam da će principe učiniti razumljivijima. Osim toga, razvodniću svojim mislima. Idi!

1. Povratna informacija je najvažnije sredstvo u svim sferama života, a još više u društvenim aktivnostima i radu sa ljudima. Iskoristi ga!
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 sa povratnom informacijom i njenim principima, to će nam svima biti lakše živjeti. Primjenjivo je na poslu, u svakodnevnoj komunikaciji sa ljudima, u porodici. Ali! Veoma je važno ne pretjerati. Moj vođa grupe učitelj je jednom rekao: „Shvatila sam da moram na odmor kada sam počela da dajem povratne informacije svom mužu i deci, striktno poštujući njegove principe.“ Bio sam duboko dirnut ovom njenom izjavom. Nemojte me pogrešno shvatiti, sigurna sam da povratne informacije mom mužu, djeci, majci i svekrvi mogu samo koristiti. Ali ne zaboravite da je porodica naša. sigurno mjesto, i trebalo bi da ima prostora za neobjašnjive emocije, glupe izjave, besciljne manifestacije ljubavi, čudnosti, konačno. U porodici je veoma važno pronaći ravnotežu između povratnih informacija i običnih ljudskih emocija. Ovo je važno svuda, ali u porodici - 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 devojka želi da ide na prvi sastanak u suknji koja joj zaista kvari lep izgled, a vi želite da joj sastanak prođe dobro, da li ste zabrinuti za nju? Progovoriti. Nervira vas miris parfema vaše koleginice, a i nje same, a već mjesec dana žudite da joj kažete sve što mislite o njenom zagušljivom mirisu? Ovo nije povratna informacija, prijatelji. Ovdje je vjerovatno najbolje šutjeti.

3. U procesu povratne informacije, vaš zadatak je donijeti konkretnim primjerima i činjenice, a ne apstraktne i emocionalne izjave.
Ovdje je sve jednostavno. "Vasja, dovraga, ti si koza, pa šta si mi dovraga ovde napisao!" - ovo nije povratna informacija i malo je vjerovatno da će ikome koristiti. „Vasja, grešiš. Zamolio sam te da mi napišeš spisak svih klijenata sa prezimenima iz tri slova, a ti si mi napisao spisak zaposlenih sa prezimenima iz četiri slova. Biće mi mnogo lakše ako pažljivije slušate moje molbe. „Ovo je povratna informacija. Vasja je možda koza, ali nakon prve rečenice će ostati koza. Nakon povratne informacije, postoji šansa da sledeći put dobićeš nešto od njega, šta ti treba.

4. Izbor prave reči a formulacija je izuzetno 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 tačka proizilazi direktno iz prethodne. Prije nego što date povratnu informaciju, RAZMISLITE šta tačno želite da kažete i šta oni žele da postignu. 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 (hljeb), nastavljamo s negativnim (sir) i završavamo opet s pozitivnim. Mislim da je previše uglačan, ali ako vam se sviđa - uzmite i koristite.

5. Preporučljivo je ne koristiti riječ "ali" u povratnoj informaciji (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. Na kraju krajeva, oni ne zavise jedno od drugog i ne poništavaju jedno drugo. Vaša devojka, koja vam je došla po savet o novoj odeći, će verovatno 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ćavaju da kažemo ovu istinu bez rizika da uvrijedimo prijatelje ili se posvađamo sa kolegama. Naravno, imam prijatelje i članove porodice kod kojih će "glupa suknja" pa čak i "krive noge" raditi, ali svi imamo malo takvih ljudi, pa pogledajte tačku 1.

6. Zapamtite da je dobra povratna informacija vrsta povratne informacije koja će omogućiti osobi koja je primi da nešto poboljša. Zapamtite također da niko nije dužan složiti se s vašim povratnim informacijama i prihvatiti ih - na kraju krajeva, vi ste uvijek subjektivni.
Ovo je, prijatelji moji, izuzetno važna tačka. Ne zaboravimo da će prijatelj sa glupim cipelama najverovatnije nastaviti da hoda u njima. A naše mišljenje nije mišljenje u posljednjoj instanci. V najbolji slucaj možemo se nadati da će to biti uzeto u obzir na ovaj ili onaj način. U drugom slučaju, naše mišljenje može ostati samo naše, a to je NORMALNO. Uostalom, ni mi sami ne prihvatamo uvek mišljenje onoga ko nam daje povratnu informaciju, bilo da je trostruki nobelovac ili majka. Tako da ostavljamo odluku - prihvatiti ili ne prihvatiti povratnu informaciju sa strane sa sigurnosnom kopijom.

7. Povratne informacije ne bi trebalo da budu osuđujuće, već treba da odražavaju SAMO vaša razmišljanja i osećanja o primaocu povratne informacije u određenoj situaciji.
Da, da, čim osudimo, naša povratna informacija gubi na vrijednosti, čini mi se da ni primjer ovdje nije potreban, pa je sve jasno.

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

9. Veoma je važno da ne izgubite pozitivne povratne informacije tokom 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 konstruktivna i tačna lista nedostataka, već i nezamjenjiva oznaka pluseva i potraga za dobrim stvarima. Uostalom, svom mužu kažete ne samo "Dragi, presolio si supu!", već i "Draga, kakve si ukusne lepinje ispekla!" :) Uostalom, ako muž sve vreme čuje samo za zagorene kotlete i za slanu supu, brzo će prestati da kuva. Dakle, u drugim oblastima – 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 ličan, ali mi je važno da vam ispričam ovo iskustvo da bih ga pokazao prava akcija ovaj alat ne samo na apstraktnom Vasya Pupkinsu iz mojih primjera.
Prije otprilike godinu dana, moj najbliži prijatelj me pozvao u kafić. Ilan, moj sin, imao je 3 mjeseca, ja sam tek pocela da izlazim 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 poslednjih 6 meseci potpuno udubila u sebe i u svoju porodicu, da ne pricam sa njom telefonom, ne govorim joj nista o trudnoci ili sinu, da je ne slusam probleme i radosti. Rekla je da sam joj jako nedostajala, i da ne zna šta će dalje biti sa našom vezom, pošto se odselimo, a ja apsolutno nisam upoznat sa njenim vestima. Dodala je da prolazi kroz veoma težak period u životu i da joj je zaista potrebna moja podrška.
Bio je to pravi udarac. Govorila je o svojim osjećajima, navodeći primjere konkretnih situacija. Nije me osuđivala zbog uživljenosti u porodicu, pričala je o tome šta bi željela 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 udubljena u svog tek rođenog sina, a prije toga - u trudnoću, da nisam primijetila kako sam otuđila sebi najbliže i veoma važne ljude! Ustao sam danasšokiran koliko nisam bio svjestan svog ponašanja.

Šta bi se dogodilo da tada nije razgovarala sa mnom? Najvjerovatnije, niz pritužbi: "zašto me ne nazoveš?" “nismo se vidjeli sto godina”, “ne zanima te moj život” itd.
Šta se zaista dogodilo? Probudio sam se". Jasno sam joj rekao da ne želim nigde da idem, da je volim i da se vraćam. Sabrao sam se, i napravili smo nekoliko "sastanaka" odjednom za naredne mjesece. Počeo sam češće da zovem, i pokušavam da podignem slušalicu kada je ona nazvala. I takođe - otišao sam u posjetu još jednoj prijateljici, kojoj je teže dati ovakvu povratnu informaciju, i sam joj postavio pitanje. A ispostavilo 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 vezu sa dve meni veoma važne osobe. I veoma sam zahvalan svom prijatelju na tom razgovoru.

U zaključku, želim reći da u životu ne postoji samo povratna informacija. Tu su svađe, seks, gluposti, svađe, ugađanje, humor, ogorčenost, ljubav, komplimenti, smeh 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 posjetilaca. Nažalost, vlasnici mnogih web stranica ovu č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 da dobijete povratne informacije od posjetitelja direktno na vaš email box.

HTML

Počnimo sa HTML markup. Stilska lista je uključena na početku dokumenta, a javascript izvori su na kraju. Ovo ubrzava performanse jer se skripte učitavaju posljednje dok je ostatak web stranice već učitan i prikazan.

: feedback.html

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

U tijelu dokumenta vidimo DIV "#feedback". Tajmirano je fiksnim pozicioniranjem u donji desni ugao prozora, u koji možete vidjeti sljedeći odjeljakčlanci.

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

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

Prelazeći na uređivanje stilova obrazaca, 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 sa #feedback. Na ovaj 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

#feedback(
background-color:#9db09f;
širina:310px;
visina:330px;
pozicija:fiksna;
bottom:0;
desno:120px;
margin-bottom:-270px;
z-indeks:10000;
}

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

#feedback .color(
float:left;
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;
margin:5px 0 12px;
text-indent:-99999px;
kursor:pokazivač;
}

#feedback textarea(
background-color:#fff;
border:none;
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. Dodeljuje mu se fiksna pozicija i tempirano je na prozor pretraživača. Zatim slijedi definicija DIV.sekcije i pet raspona u boji. Ovi rasponi se razlikuju samo po boji pozadine koju daju različite klase.

Na samom kraju imamo CSS pravila koja definišu izgled polja za unos teksta.

: styles.css - 2. dio

#feedback a.submit(
background:url("img/submit.png") no-repeat;
border:none;
display:block;
visina:34px;
margin:20px auto 0;
text-decoration:none;
text-indent:-99999px;
širina:91px;
}

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

#feedback a.submit.working(
background-position:gore desno !važno;
cursor: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;
pozicija:relativna;
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:desno dolje;)

#feedback .response(
font-size: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 dugme ima tri pozicije koje su vezane za istu pozadinska slika– submit.png i prikazuje se samo kada je potrebno. Položaji: standardna pozicija, lebdeći položaj i aktivna pozicija "trčanja". Kada je dugme u aktivnom položaju, efekat lebdenja je onemogućen.

Obrazac za povratne informacije ima dvije pozicije: skriveno i otkriveno. Kada se učita, prema zadanim postavkama njegova pozicija je postavljena na skrivena. Ali kada korisnik klikne na naslov, on se proširuje pomoću jQueryja. To se radi praćenjem događaja i pokretanjem najjednostavnija animacija kao što možete vizuelno vidjeti u nastavku.

: script.js - 1. dio

$(document).ready(function()(

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

// Keširanje objekta povratne informacije:
varfeedback = $("#feedback");

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

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

Varel = $(ovo).find(".arrow");

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

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

Feedback.stop().animate((marginBottom: anim.mb));

Feedback.find(.section").stop().animate((paddingTop:anim.pt),function()(
el.toggleClass("dolje");
});
});
Da bi naš kod bio uredan, premjestili smo klauzule if na vrh dokumenta i kreirali objekat anim koji drži vrijednosti odgovorne za animaciju. U zavisnosti od toga da li se na strelici nalazi klasa „dole“, sakrivamo ili otkrivamo formu.

Drugi dio script.js sadrži strukturu AJAX interakcije sa 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 dugmeta 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()),
kompletno: funkcija(xhr)(

vartext = xhr.responseText;

// Ovo će pomoći korisnicima da riješe probleme sa svojim obrascima:
if(xhr.status == 404)(
text = "Vaša putanja do submit.php je netačna.";
}

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

Button.fadeOut();

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

return false;
});
});
Ovdje koristimo AJAX metodu niži nivo jQuery - $.ajax(), preko kojeg se implementira interakcija sa submit.php. Ova metoda nam daje malo više kontrole nad vezom nego $.get() ili $.post().

Jedan velika prednost ovu metodu sastoji se od "punopravne" povratne poruke. Ovdje mapiramo odgovor na grešku 404 koja ljubazno kaže korisniku da provjeri putanju submitURL.

Sada nastavimo i pređimo na završni dio tutorijala - PHP odjeljak

PHP

PHP sadrži informacije prosleđene preko AJAX-a, obrađuje ih i šalje poruku u vašu e-poštu.

: submit.php

// Unesite svoju email adresu ispod
$emailAddress = " [email protected]";

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

session_name("quickfeedback");
session_start();

// 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("Molimo 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 magični navodniki omogućeni, skinite ih
$_POST["message"] = stripslashes($_POST["message"]);
}

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

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

// Korištenje PHPMailer klase

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

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

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

$mail->AddReplyTo(" [email protected]".$_SERVER["HTTP_HOST"], "Obrazac za brzu povratnu informaciju");
$mail->SetFrom(" [email protected]".$_SERVER["HTTP_HOST"], "Obrazac za brzu povratnu informaciju");

echo "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 u roku od sat vremena, tada će mu se prikazati greška.

Poruke se šalju pomoću PHPMailer klase. Radi samo sa PHP5, tako da server treba da podržava tu određenu verziju.

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

Ovim je naš razvoj završen!

U zakljucku

možeš koristiti ovaj obrazac za 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 direktno u vaše poštansko sanduče.

HTML

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

demo.html

Unutra tijelo nalazi div #feedback. Pozicioniran je u donjem desnom uglu prozora koristeći fiksno pozicioniranje, kao što će se vidjeti u CSS odjeljku tutorijala.

U okviru ovoga div postavljeno je pet obojenih elemenata raspon. Svaki od njih je širok 20% i pomaknut ulijevo. Tako se postavljaju tačno po cijeloj širini. div #feedback.

Zatim dolazi kontejner .odjeljak, koji sadrži naslov, oblast teksta i dugme.

css

Pređimo na stiliziranje forme. 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 #feedback. Ovo stvara prostor imena sličan CSS-u, što 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; right: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; cursor:pointer; ) #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 div #feedback. Dodeljuje mu se fiksna pozicija i usidrena je za prozor pretraživača. Nakon nje slijedi definicija za div .odjeljak i pet obojenih elemenata raspon. Ovi elementi se razlikuju samo po boji pozadine, koja se dodjeljuje posebno za svaku klasu.

Na samom dnu prikazanog dela CSS fajla definisana su pravila za prikaz oblasti teksta.

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 !important; cursor: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; pozicija:relativna; vrh: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; boja:#FCFCFC; display:block; )

Drugi dio liste stilova definira izgled gumba za slanje. Imajte na umu da postoje tri stanja dugmeta, 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 po defaultu postavljeno u donjem desnom dijelu ekrana. A jQuery stavlja obrazac u maksimalno stanje kada korisnik klikne dugme miša na naslov. Ova funkcija učinjeno povezivanjem događaja i izvođenjem jednostavnih animacija.

script.js - 1. dio

$(document).ready(function()( // Relativni URL skripte submit.php. // Vjerovatno ćete ga morati promijeniti. var submitURL = "submit.php"; // Keširajte objekt povratne informacije: var feedback = $( "#feedback"); $("#feedback h6").click(function()( // Vrijednosti svojstva animacije su pohranjene // u zasebnom objektu: var anim = ( mb: 0, // Bottom margin pt: 25 // gornja margina); var el = $(this).find(".arrow"); if(el.hasClass("down"))( anim = ( mb: -270, pt: 10) ; ) // Prva animacija pomiče formu gore ili dolje, a druga pomiče // naslov tako da se uskladi sa minimiziranom verzijom feedback.stop().animate((marginBottom: anim.mb)); feedback.find( ".section").stop() .animate((paddingTop:anim.pt),function()( el.toggleClass("dole gore"); )); ));

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

Drugi dio script.js obrađuje AJAX rad sa 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, // već i kao neka vrsta katanca 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 da identifikuje grešku: if(xhr.status == 404)( text = "Putanja do submit.php skripte je nevažeća."; ) // Sakrij dugme i tekstualno područje posle kojeg smo // prikazali primljen odgovor od dugmeta submit.php .fadeOut(); textarea.fadeOut(function()( var span = $(" ",( className: "response", html: text )) .hide() .appendTo(feedback.find(".section")) .show(); )).val(""); ) )); return lažno; )); ));

Koristimo jQuery metodu za AJAX $.ajax() za interakciju sa 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 za usklađenost 404 greška (stranica nije pronađena), i prikazati poruku korisniku u kojoj se traži da provjeri putanju submitURL.

Sada je vrijeme da pređemo na završni dio - PHP.

PHP

PHP analizira podatke prosleđene pomoću AJAX-a, potvrđuje ih i šalje e-mail poruka na datoj adresi.

submit.php

// Ovdje unesite svoju email adresu $emailAddress = " [email protected]"; // 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("Molimo sačekajte nekoliko minuta pre nego što ponovo pošaljete poruku."); ) $_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 primaoca $mail->AddAddress($emailAddress); $mail->Subject = "Nova poruka iz obrasca za povratne informacije"; $mail->MsgHTML($msg); $mail->AddReplyTo(" [email protected]".$_SERVER["HTTP_HOST"], "Obrasca za kontakt na demo stranici"); $mail->SetFrom(" [email protected]".$_SERVER["HTTP_HOST"], "Obrasca za kontakt na demo stranici"); $mail->Send(); echo "Hvala!";

Prvo koristimo upravljanje sesijom da odredimo koliko često korisnik koristi podnošenje obrasca u određenom vremenskom periodu. zadnji sat, te također odrediti vrijeme koje je proteklo od toga zadnja otprema. Ako je prošlo manje od 10 sekundi od posljednjeg slanja, ili ako je korisnik već poslao više od 10 poruka u posljednjem satu, prikazuje se poruka o grešci.

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

Višestruke metode PHPMailer koristi se za konfiguraciju odlaznu e-poštu. Metoda IsMail() govori klasi da koristi internu PHP funkcija mail(). Metoda AddAddress() dodaje adresu primaoca (možete dodati više od jednog primaoca uz dodatne pozive ovoj metodi). Nakon dodavanja predmeta pisma i teksta, ukazuje se adresa za odgovore i poruka se šalje.

Spremni!

Zaključak

Možete koristiti ovaj obrazac da organizirate brze povratne informacije od posjetitelja vaše stranice. Vrlo niska barijera prije podnošenja - samo trebate popuniti tekstualno polje i kliknuti na dugme - kreiraće se odlični uslovi tako da posjetitelji vaših stranica počnu dijeliti svoje ideje. Skripta je također dobro strukturirana i laka za postavljanje, što će vam pomoći minimalan napor koristite ga na svom sajtu.