Skripta za obrazac za povratne informacije u modalnom prozoru. Jednostavan Ajax obrazac za kontakt

Zdravo svima. Bombardirani su pitanjima o tome kako implementirati formu u kojoj se pojavljuje modalni prozor nakon klika na dugme i nakon slanja, prikazala bi se poruka o uspjehu ili neuspjehu.

Mislim da već ima dosta toga na internetu, ali pošto ljudi pitaju, odlučio sam da to uradim. Štaviše, takva funkcionalnost bi trebala biti prisutna na gotovo svakoj odredišnoj stranici kako bi se implementiralo dugme za povratni poziv. Zaista, sada se pojavljuje sve više rezultata testiranja AB -a koji govore da otvoreni obrasci rade lošije od onih koji su skriveni u modalnom prozoru i otvaraju se nakon klika na gumb.

Neki tvrde da je to zbog činjenice da ljudi polako "razvijaju imunitet", a otvoreni oblik je agresivna prodaja. Navodno je sada vrijeme kada je korisnik na vidiku otvorena forma vjeruje da mu pokušavaju nešto "prodati". Ne slažem se sasvim sa ovom teorijom, ali zrnce istine je prisutno. Možda je u nekim vrstama poslovanja to istina. Za sada, krenimo u implementaciju obrasca.

Bilješka! Neću detaljno opisivati ​​svaku radnju, ali nudim vam gotovu verziju u izvoru. Ako imate pitanja, pišite u komentarima. Shvatićemo :)

Danas nećemo početi s jQueryjem, već s izgledom gumba i obrasca. Sve skripte su uključene na kraju stranice.

Dugme klikom na koje će se otvoriti modalni prozor:

Pošaljite svoju prijavu

Možete postaviti bilo koju klasu, ali u href upišite #modal - ovo će biti id kontejnera sa senčenjem i kontakt formom.

Sada ću dati kod obrasca i blok na kojem će se obrazac nalaziti:

Nakon dodavanja stilova, to izgleda ovako:


Za kreiranje modalnog prozora korištena je Remodal biblioteka. Ovo je skup css i js datoteka, samo za kreiranje animiranih modalnih prozora. Možete ga preuzeti sa linka ili već sa mojim izmenama na kraju članka.

Uključite stilove između oznaka head:

I prije završne oznake tijela - dodajte skripte:

Script.js je skripta za obradu obrasca. Isti Ajax koji nam omogućava da izvršimo cijelu proceduru bez ponovnog učitavanja stranice:

$ (dokument) .ready (funkcija () ($ ("forma"). submit (funkcija () (// Dobijte ID obrasca var formID = $ (ovo) .attr ("id"); // Dodajte hash) na ime ID var formNm = $ ("#" + formID); $ .ajax ((tip: "POST", url: "mail.php", podaci: formNm.serialize (), uspjeh: funkcija (podaci) ( // Izlazni tekst rezultata slanja $ (formNm) .html (podaci);), greška: funkcija (jqXHR, tekst, greška) (// Izlaz teksta greške slanja $ (formNm) .html (greška);) )); vrati false;) ;));

Neću dati original css kod i js iz datoteka odgovornih za modalni prozor i formu, budući da su prilično velike. Ako ništa, pogledajte izvor. No, php handler je uglavnom standardni (ako mogu tako reći):

Ime pošiljaoca:$name Telefon:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Hvala što ste poslali poruku!
";) else (eho")
Greška. Poruka nije poslana!
";)) else (http_response_code (403); echo" Pokušajte ponovo ";)?>

Molim te, ne zaboravite promijeniti adrese Email na svoju ruku.

Evo ajax forme. Žao mi je što nisam pokušao detaljno objasniti kako je svaki element napravljen. Htio sam samo dati gotov rezultat, ali nema smisla opisivati ​​sve animacije, pojavljivanja. Preuzmite izvor i ugradite ga na svoju web stranicu. I to je sve za danas. Sretno svima!

Ljudi, toplo vas molim da testirate obrazac na pravom ili virtuelni server(hosting). Uvjerite se da vaš server podržava php, da imate plaćeni plan, a ne probni period. U suprotnom, u 90% slučajeva formular neće raditi.

Nemojte čekati pismo u poštanskom sandučetu ako ste upravo otvorili indeksnu datoteku u svom pretraživaču i kliknuli na dugme "Pošalji". PHP je jezik na strani servera!

Ako ste previše lijeni da to shvatite i sami napravite formu, onda preporučujem da obratite pažnju.

Ažurirana verzijačlanak je

Pozdrav dragi čitaoci a! U ovom tutorijalu pokazat ću vam kako možemo učiniti da HTML5 obrazac za registraciju putem e-pošte potvrdi validaciju unesenog URL-a pomoću JQueryja. Za provjeru ćemo koristiti regularne izraze, a unesenu adresu ćemo sačuvati u MySql bazi podataka. Tako će se prilikom spremanja koristiti AJAX(tj. pozovite PHP skriptu bez ponovnog učitavanja stranice). Rezultat se može pogledati na demo stranici, kao i preuzeti izvor. Hajde da počnemo!

Basic markup

Počnimo kreiranjem nove datoteke index.html. I napravimo jednostavnu strukturu dokumenta koja se drži HTML5. Također ćemo odmah uključiti CSS stilove i biblioteku, trebat će nam prilikom provjere unesenog e-maila:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


<html lang = "ru">
<glava>
<meta charset = "utf-8">
<naslov> Obrazac za registraciju putem e-pošte sa jQuery validatorom</ naslov>

<link rel = "stylesheet" type = "text / css" href = "style.css">

<tip skripte = "tekst / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ glava>

<tijelo>

</ tijelo>
</ html>

Sada ste spremni za kreiranje obrasca!

Obrazac za pretplatu na e-mail

Svrha našeg obrasca je da provjerimo unesenu adresu e-pošte posjetitelja i na neki način je spremimo na listu pretplatnika. Za ovo radimo regularna forma sa dugmetom, klikom na koje se adresa obrađuje i pohranjuje u bazu podataka ili u fajl kako je svakome zgodno. U lekciji ćemo razmotriti spremanje podataka u buzu. Tako će biti jasnije, fokusirat ćemo se na provjeru ispravnosti unesene adrese. Ovako izgleda obrazac za pretplatu:

1
2
3
4
5
6
7
8
9



"Unesite svoju e-poštu" autocomplete = "off" autocorrect = "off" autocapitalize = "off">

Umotajmo obrazac u #completeform div blok, tako da nakon pohranjivanja adrese, obrazac može biti skupljen.

Također koristimo nekoliko novih atributa u polju za unos. Tip polja je postavljen na "e-pošta" tako da mobilni pretraživači mogu prikazati odgovarajuću tastaturu. Chrome i neki preglednici WebKit ovo će koristiti za provjeru je li korisnik unio adresu. Atributi automatskog ispravljanja i autokapitalizacije dizajnirani su posebno za mobilne preglednike.

Raspon s id greška inicijalno skriveno, za koje je odgovorno svojstvo display sa vrijednošću none, ovo je zapisano u datoteci sa stilovima, o tome malo kasnije. Ali čim korisnik unese neispravnu adresu e -pošte u raspon, prikazuje se poruka upozorenja.

JQuery validator i AJAX zahtjev

Počnimo s jednostavnom funkcijom potvrde e-pošte. Koristimo niz regularnog izraza da testiramo da li se tekstualni niz podudara sa standardnom sintaksi e-pošte, a zatim vraćamo logički vrijednost true u suprotnom netočno.

Pogledajmo funkciju fullInviteForm (). Da ne bismo zbunili obrazac za unos adrese, skupit ćemo efekat fadeOut za 400 milisekundi. A kao povratni poziv, pozovimo funkciju $ .ajax (), upotrebimo je za pozivanje save.php datoteke i sačuvamo unesenu adresu u bazu podataka. U nastavku ću citirati izvorni kod datoteke save.php, ali za sada hajde da to shvatimo pomoću funkcije $ .ajax ().

$ .ajax- učitava udaljenu stranicu koristeći HTTP zahtjev... Kao argument funkciji $ .ajax (), prosljeđuje se objekt koji se sastoji od parova ključ / vrijednost koji se koriste za inicijalizaciju i manipulaciju zahtjevom. U našem slučaju koristit ćemo sljedeće objekte:

  • type: 'POST' - odaberite tip zahtjeva za datoteku, prema zadanim postavkama GET, razlika između POST-a i GET-a nije velika, samo sa GET zahtjevom, podaci se prenose u zaglavlju, a sa POST-om u tijelu zahtjeva, stoga pomoću POST-a možete prenijeti više informacija;
  • url: ’save.php’ - putanja do izvršne datoteke;
  • podaci: 'email =' + $ ("# email"). val ()- podaci koji se šalju na server. WITH koristeći CSS selektor #email se odnosi na element sa id = "e-pošta" i dobijete sadržaj atributa value, odnosno email koji je unio korisnik. I dodijelite ovaj sadržaj varijabli email koju ćemo koristiti u datoteci save.php;
  • uspjeh: funkcija () ($ ('# potpuni obrazac'). prije (' Sve je spremno! Dodani ste na mailing listu.‘);} - funkcija uspjeha se poziva na uspjeh ajax zahtjev... Funkcija izvodi sljedeću radnju. Ispred div #completeform ubacujemo sadržaj koji obavještava korisnika da je njegov email dodan na mailing listu.

1
2
3
4
5
6
7
8
9
10
11
12

funkcija completeInviteForm () (
setTimeout (funkcija () ($ ("# potpuni oblik") .fadeOut (400, funkcija () (
$ .ajax ((
upišite: "POST",
url: "save.php",
podaci: "email =" + $ ("# email") .val (),
uspjeh: funkcija () (
$ ("# potpuni obrazac") .before ( "Sve je spremno! Dodani ste na mailing listu." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

A pomoću metode setTimeout, obrazac je skriven i ajax zahtjev se izvršava asinhrono sa kašnjenjem od 1100 milisekundi.

Obrada obrasca

Radi praktičnosti pristupa elementima stranice, kreirajmo nekoliko varijabli s izbornicima #error i #btnwrap.

var erdiv = $ ("# greška");
var btnwrap = $ ("# btnwrap");

Korištenje obrađivača događaja live pratite klik na dugme "Pretplati se", njegov id = "sendbtn". E.preventDefault () metoda; poništava standardno ponašanje pretraživača za radnju (klikom na dugme), naime, poništavamo osvježavanje stranice i promjenu URL-a. Upisanu e -poštu dodjeljujemo varijabli emailval i možemo započeti obradu ove varijable.

Prvo ako ako (! isEmail (emailval)) provjeri da li je isEmail funkcija vratila false, to znači da adresa e-pošte koju je unio korisnik ne odgovara regularnom izrazu, odnosno nije tačna, o tome ćemo obavijestiti korisnika u blokirajte grešku i prikažite poruku (Unijeli ste pogrešnu adresu e-pošte).

Sada drugi ako izvršava se samo ako je korisnik unio ispravnu adresu e-pošte. Tada možemo započeti proces spremanja adrese.

Da bi proces bio jasan, umetnite odgovarajući tekst u blok greške i postavite GIF sliku u blok gdje se nalazilo dugme "Pretplati se". I pozivamo funkciju completeInviteForm (), o kojoj smo gore govorili.

1
2
3
4
5
6
7
8
9
10
11
12

if (! isEmail (emailval)) (
erdiv.html ( "Niste uneli tačnu email adresu") ;
erdiv.css ("prikaz", "blok");
}
if (isEmail (emailval)) (
erdiv.css ("color", "# 719dc8");
erdiv.html ("obrada...");
(completeInviteForm (), 900);
}
} ) ;
} ) ;

Baza podataka

Pošto sam odabrao način čuvanja unesene adrese u bazu podataka, ukratko ću govoriti o kreiranju same baze podataka i tabele, kao i o kodu obećanog save.php fajla koji radi sa MySql bazom podataka.

Za ovo nam je potrebno lokalni server, ja koristim Denwer. Sigurno ga mnogi koriste, pa neću ulaziti u detalje. Prolazimo phpMyAdmin i kreirajte bazu podataka email:

Da bismo sačuvali adrese pretplatnika, potrebna nam je jedna tabela sa dva polja, nazovimo je adresa:

Polja će biti sljedeća:

  • id- identifikator e-mail adresa(poznat i kao primarni ključ);
  • adresa- izravno samu adresu e -pošte.

Save.php fajl

Sada je vrijeme da razgovaramo o tome posljednji element kreirane pretplate, o datoteci save.php. Sadrži PHP skriptu za čuvanje adrese e-pošte u bazi podataka.

1
2
3
4
5
6

if (isset ($ _POST ["email"])) ($ email = $ _POST ["email"];)
$ db = mysql_connect ("localhost", "root", "");
mysql_select_db ("e-pošta", $ db);
mysql_query ( "UMETNI U VRIJEDNOSTI adrese (adrese) (" $ email ")", $ db);
?>

Prvo provjeravamo da li varijabla e-pošte postoji u globalnom POST nizu, ako je tako, zatim dodijelimo njenu vrijednost lokalnoj varijabli $ email. Zatim uspostavljamo vezu sa serverom mysql_connect (), korisnik je root, nema lozinke. Odabir baze podataka email i izvršite upit bazi podataka, ubacite novi zapis u adresnu tabelu, gde će vrednost varijable $ email biti umetnuta u adresna polja. To je sve!

Ovim je lekcija završena. Želim da vas podsjetim da ova pretplata radi samo na serveru (pošto koristimo bazu i).

Zdravo. U ovom tutorijalu ćemo napraviti kompletan oblik. povratne informacije, i pojavit će se u modalnom prozoru klikom na dugme na stranici. Ovu lekciju sam uradio sam, od nule, koristeći samo jQuery framework i jedan mali JavaScript "th. Lekcija je veoma zanimljiva, pa vas molim da ne prolazite! Ispod možete pogledati demo rezultujuće forme, kao i preuzeti potrebni fajlovi za rad:

Korak 1. opći opis i kako funkcionira obrazac za povratne informacije:

Prvo ću vam reći koje datoteke će nam trebati i, zapravo, zašto su potrebne:

  • slike- fascikla u kojoj se nalaze sve slike našeg obrasca;
  • index.html- glavna, "indeksna" datoteka u kojoj će se nalaziti dugme za pozivanje obrasca za povratne informacije;
  • contact.html- fajl koji sadrži sam obrazac. Ova datoteka će biti povezana sa modalnim prozorom;
  • send.php- file-handler, koji je odgovoran za slanje pisma;
  • jquery.js- glavni jQuery okvir;
  • style.css- fajl sa kaskadnim stilovima za naš obrazac.

Dakle, idemo dalje i redom... Rad obrasca će biti sljedeći: korisnik ulazi na stranicu na kojoj se nalazi dugme za pozivanje modalnog prozora, klikne ga, zatim se pojavljuje obrazac, na njemu posjetitelj unosi sve podatke i tekst poruke i šalje, zatim se prenosi na stranicu sa porukom o uspješnom ili neuspješnom slanju pisma. To je sve, počnimo s otkucavanjem forme ...

Korak 2. Dugme za pozivanje obrasca.

Da bi se pojavio naš modalni prozor sa formom, morate ga nekako natjerati da to učini. Da bismo to učinili, samo trebamo postaviti obično dugme na stranicu. Kod za takvo dugme je prikazan u nastavku, zajedno sa stilovima koji su primenjeni na njega:

Korak 3. Sam obrazac + postavke za njega

Sada ćemo shvatiti gdje će se nalaziti naš obrazac za povratne informacije. I to će biti u fajlu contact.html, koji se već nalazi u izvornom kodu lekcije. Ovaj obrazac je prilično mali, pa ću njegov kod postaviti ispod:

Slanje poruke administraciji:



*ime:
* E-mail:
tema:
*Poruka:

Kao što vidite, hodajući kroz kod, čak i golim okom, možete vidjeti da sam za bolji prikaz forme koristio raspored tabele. Ovo mi je bilo vrlo korisno da izjednačim sva polja obrasca.

Korak 4. Rukovalac odgovoran za slanje e-pošte

Ovdje ću vas brzo upoznati sa glavnim rukovaocem pošte. Neću davati njen kod ovdje, jer se nalazi u izvornom kodu. Preuzmite i pogledajte njegov sadržaj. Ako znate php negdje na srednjem nivou, poput mene, tada možete lako sami raščlaniti sav kôd ovog rukovatelja. Ako je sve spremno, idite dalje...

Korak 5. Pokretanje glavnog jQuery okvira

Sada, kao i sa svakim jQuery tutorijalom, trebamo da "zavrnemo" glavni jQuery okvir. Da bismo to učinili, vratimo se malo nazad, na mjesto gdje se nalazi naše dugme i između oznaka i ubacite sljedeći kod:

Korak 6. Stiliziranje forme

Kao što vidite, stilovi za naš obrazac su prikazani odvojeno, u datoteci style.css jer ovi stilovi zauzimaju previše prostora. Samo treba da povežemo kod u nastavku za naš indeksni fajl:

Korak 7. podešavanja jQuery -ja

Sada za potpuni rad prozora modalnog obrasca, moramo umetnuti sljedeći jQuery kod:

Zaključak.

Dakle, naš zanimljiv obrazac za povratne informacije je spreman. Put je bio dug i težak, pa ako neko nešto nije razumio, saslušat ću vaša pitanja u komentarima ove lekcije. I to je sve za mene, dok se ponovo ne sretnemo, prijatelji!

S poštovanjem jQuery - vodič - M.K.

Svi smo navikli da vidimo kontakte na zasebnim, posebno kreiranim stranicama za povratne informacije korisnika. U pravilu na takvim stranicama, osim obrazaca za kontakt, objavljuju i mnoge druge informacije za interakciju i komunikaciju. Mehanizam je otklonjen, dokazan godinama i radi savršeno. Ali u nekim slučajevima postaje potrebno prikazati odvojeno kontakt obrazac kao skočni prozor bez preusmjeravanja korisnika na druge stranice.
Nekad smo razmišljali o radu sa jQueryjem. Danas želim da vas upoznam sa zanimljivim rešenjem za kreiranje zasebnog, originalno dizajniranog, pop-up obrasca za kontakt za sajt.

Po mom mišljenju, divan primjer načina interakcije sa korisnicima.

Pogledali smo primjer. Sada, hajde da razložimo ovaj oblik na njegove komponente, od stvaranja ukupna struktura u HTML-u, prije nego što oblikujete izgled izgleda koristeći CSS.

HTML kôd obrasca

Ništa natprirodno, najjednostavniji okvir pravilne kontakt forme, smješten u blok element div s određenim identifikatorom i klasom za dodatno oblikovanje izgleda obrasca u css i u interakciji sa malim javascriptom koji će nam trebati da aktiviramo i zatvorimo iskačući obrazac.

Zatvori

Pošaljite nam poruku

Zatvori

Pošaljite nam poruku

Također, moramo stvoriti sloj zatamnjivanja za opću pozadinu, kada aktiviramo skočni oblik. Ovaj zadatak možete izvršiti na različite načine, ali nećemo biti previše pametni i dodati ćemo još jedan div dodjeljivanjem identifikatora: id = "fade" i class: class = "black-overlay". Možete ga postaviti pored obrasca kako ne biste dugo tražili ako je potrebno.

Povratne informacije

Verovatno ste primetili da je dugme za zatvaranje upisano u blok kontakt forme, neposredno ispred naslova, i to je logično, ali gde drugde treba da se pojavi i nestane dugme zajedno sa formom. Izgled i položaj dugmeta za zatvaranje, dalje ćemo formirati u CSS -u

To je sve, pogledajmo sada cijeli HTML kod stranice koji sadrži iskačući obrazac za povratne informacije:

Skočni kontakt obrazac Povratne informacije
Zatvori

Pošaljite nam poruku

Skočni kontakt obrazac Povratne informacije

Zatvori

Pošaljite nam poruku

Prije nego što pređemo na zabavni dio, stiliziranje naše kontakt forme sa CSS-om, malo ću se povući. Najpažljiviji, vjerovatno su primijetili da su dugmad za otvaranje i zatvaranje obrasca implementirana kao veze sa "jammer" href = "javascript: void (0)". Dobro ili loše, nisam pronašao tačan odgovor za sebe, koristim ovu metodu iz navike. Iako se za elemente na kojima skripta obrađuje događaj onclick čini mi se da je logičnije i ispravnije koristiti