Obrazac za povratne informacije, ili drugačije rečeno, jedan je od najvažnijih elemenata svake web stranice. I naravno, kao i svi ostali elementi korisničkog interfejsa, kontakt elementi moraju biti na neki način eksterno stilizovani i dizajnirani kako bi privukli pažnju korisnika i podstakli komunikaciju.
Nudim vam na razmatranje nekoliko opcija za stilove formulara za povratne informacije, isključivo pomoću 3, bez upotrebe dodatnih slika u dizajnu. Ništa suvišno, samo kratki fragmenti koda (isječci) za kontakt forme, izrađene u svijetlim i tamnim bojama.

1. Kontakt obrazac u tamnim bojama

Ovisno o boji glavne pozadine stranice, vizualno će se promijeniti osnovna boja pozadine samog obrasca. Veličina obrasca ovisi o veličini posude u koju će formular biti smješten.

Html okvir obrasca je standardan, potrebna su polja za unos i dugme „Pošalji“ za povezivanje sa CSS-om, svakom elementu obrasca je dodeljena određena klasa, ništa komplikovano, neće biti teško razumeti.

CSS

Neću ulaziti u detalje o stilovima, samo ću napomenuti jednu stvar: koristio sam neke CSS3 osobine u dizajnu, linearni gradijent, efekat sjene, blago zaobljene uglove itd., pokušao sam postići neki križ -kompatibilnost pretraživača za ova svojstva, ali u starijim verzijama pretraživača, obrazac će i dalje izgledati malo drugačije ((.

/* Osnovni stil obrasca */ forma ( margina: 0 auto; maksimalna širina: 95%; padding: 30px 30px 6px 30px; granica: 1px solid rgba(0,0,0,.2); -moz-border-radius : -webkit-border-radius: -moz-background-clip: padding-box 0, 0, 0,5; 13px 3px rgba(0,0,0,.5) -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0 ,.5) box-shadow (0,0); ,0,.5 overflow: hidden ) /* Polje poruke */ textarea( background: rgba(255, 255, 255, 0.4) ; širina: 100%; granica: 1px solid rgba(255,255,255,.6); -moz-border-radius: -webkit-background-clip: font-size: 18px; -top:12px; 5px 21px;

padding-left: 20px;

padding- desno: 20px;

margina- bottom: 20px;

) input[ type= submit] (kursor: pokazivač; ) ulaz. ime (pozadina: rgba(255, 255, 255, 0.4) ; padding- lijevo: 25px; ) ulaz. email (pozadina: rgba(255, 255, 255, 0.4) ; padding- lijevo: 25px; ) ulaz. poruka ( pozadina: rgba(255 , 255 , 255 , 0.4 ) ; padding- lijevo: 25px; ) ::- webkit- input- placeholder ( boja: #fff; ) :- moz- placeholder( boja: #fff; ) : :- moz- čuvar mjesta ( boja: #fff; ) :- ms- ulaz- čuvar mjesta ( boja: #fff; ) ulaz: fokus, textarea: fokus ( boja pozadine: rgba(0 , 0 , 0 , 0.2 ) ; - moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) - webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) ; 255, 255, 255, .5) prelivanje: skriveno;

/* Stilovi za dugme za slanje */

CSS

Prilikom formiranja osnovnih dimenzija formi i unutrašnjih elemenata koristio sam procentualne vrijednosti za širinu, zahvaljujući kojima se obrazac lako može prilagoditi dimenzijama posude u kojoj će se nalaziti. Šema boja dugmeta „Pošalji“, njegova veličina i lokacija mogu se lako promeniti samo sa određenim vrednostima.

/* Osnovni stilovi obrasca */ form( margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); % border-radius: rgba (0,0,0, 3) font size: font-size: 18px; ; margin-bottom: 30px:focus, .textbox:focus(outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba(24,149,215,1); ) /* Stilovi tekstualnih polja */ . poruka (pozadina: rgba(255, 255, 255, 0.4); širina:100%; visina: 120px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; -moz -border-radius: font-family: "Open Sans", -radius: 3px; ;

širina:100%;
border-radius:3px;

border:rgba(0,0,0,.3) 0px čvrst;

box-sizing:border-box;

Sve gore navedene točke će biti razmotrene u našem pregledu i detaljno prokomentirane.

Dakle, krenimo sa kreiranjem obrasca za povratne informacije:

) input[ type= submit] (kursor: pokazivač; ) ulaz. ime (pozadina: rgba(255, 255, 255, 0.4) ; padding- lijevo: 25px; ) ulaz. email (pozadina: rgba(255, 255, 255, 0.4) ; padding- lijevo: 25px; ) ulaz. poruka ( pozadina: rgba(255 , 255 , 255 , 0.4 ) ; padding- lijevo: 25px; ) ::- webkit- input- placeholder ( boja: #fff; ) :- moz- placeholder( boja: #fff; ) : :- moz- čuvar mjesta ( boja: #fff; ) :- ms- ulaz- čuvar mjesta ( boja: #fff; ) ulaz: fokus, textarea: fokus ( boja pozadine: rgba(0 , 0 , 0 , 0.2 ) ; - moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) - webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) ; 255, 255, 255, .5) prelivanje: skriveno;

Prije svega, pišemo HTML kod, koji specificira polja koja će korisnik ispuniti. Oni će biti formalizovani u budućnosti. Kod forme izgleda ovako:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >ime: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Poruka: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Pošalji" />

A vizuelno to sada izgleda ovako:

Slažem se, do sada je sve ružno i ništa nije jasno, ali tek smo počeli.

Pogledajmo gornji kod detaljno:

• < form method= "post" action= "mail.php" > …

  
  Da biste kreirali obrazac potrebno je da koristite oznaku forme. On je taj koji određuje početak i kraj forme za tumač koda. Ona, kao i svaka oznaka, ima čitav skup atributa, ali su potrebna samo dva da bi forma funkcionirala, a to su metoda (metoda slanja zahtjeva serveru, post se koristi kao standard za obrasce) i akcija ( označava putanju do datoteke za obradu obrasca, naime u Ova datoteka će sadržavati PHP skriptu, koja će nam zatim putem e-pošte poslati vrijednosti koje je unio korisnik. U našem slučaju vidimo da se ova datoteka zove mail.php i nalazi se u istom direktoriju stranice kao i stranica koju razmatramo).

• < input maxlength= "30" type= "text" name= "name" />

  
  Zatim imamo ulaze. To su zapravo sama polja obrasca u koja će korisnici unijeti informacije koje su nam potrebne (type="text" označava da će to biti tekst). Atribut maxlength specificira koliko znakova korisnik može unijeti u dato polje obrasca. Najvažniji atribut je ime – on specificira ime određenog polja. Pod ovim imenima će PHP skripta naknadno obraditi informacije koje u nju unose. Ako želite, možete postaviti i atribut čuvara mjesta, koji prikazuje tekst unutar polja koji nestaje kada se kursor postavi u njega. Jedan od problema sa čuvarom mesta je taj što ga neki stariji pretraživači ne podržavaju.

• < label for = "name" >ime:

  
  Koristi se ako imamo napuštene čuvare mjesta. Redovni potpis polja, for atribut govori na koje se polje ovaj potpis odnosi. Vrijednost označava naziv polja koje nas zanima.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Kao i unos, namijenjen je korisniku da unese informacije, samo što je ovaj put polje prilagođeno za dugačke poruke. Redovi određuju veličinu polja u redovima, kolone u znakovima. Općenito, oni postavljaju visinu i širinu našeg polja.

• < input type= "submit" value= "Pošalji" />

  
  Type="submit" nam govori da je ovo dugme za podnošenje obrasca, a vrijednost specificira tekst koji će biti unutar ovog gumba.

• < div class = "right" >

  
  koriste se samo za dalje vizualno oblikovanje forme.

CSS

Da bi naš obrazac za povratne informacije izgledao prezentativno, potrebno ga je formatirati. Da biste dobili sljedeći rezultat:

Koristili smo ovaj kod:

form (pozadina: #f4f5f7; padding: 20px; ) form. lijevo, obrazac . desno (prikaz: inline-blok; okomito-poravnanje: vrh; širina: 458px; ) form . desno ( padding- lijevo: 20px; ) label (prikaz: blok; veličina fonta: 18px; poravnanje teksta: centar; margina: 10px 0px 0px 0px; ) unos, polje teksta ( granica: 1px čvrsta #82858D; padding: 10px; font- size: 16px: width: 436px ) textarea (visina: 98px; margin- bottom: 32px; ) input[ type= "submit" ] (wire: 200px; float: right; border: none; background: #595B5F; boja: #fff transformacija teksta: velika slova;

Ne vidim smisao u detaljnom opisivanju CSS-a, samo ću vam skrenuti pažnju na ključne tačke:

1. Nema potrebe pisati dizajn za svaku oznaku u obrascu. Pokušajte da napravite svoje selektore tako da možete dizajnirati sve elemente koji su vam potrebni u nekoliko redova koda.
2. Nemojte koristiti nepotrebne oznake tipa za prekid linija i stvaranje udubljenja < br>, < p> itd. CSS sa prikazom: blok i margina sa svojstvima dopuna dobro se nosi sa ovim zadacima. Više o tome zašto ga ne biste trebali koristiti < br> u izgledu općenito, možete pročitati u članku Tag br, ali da li je to zaista potrebno? .
3. Ne biste trebali koristiti tabelarni izgled za obrasce. Ovo je u suprotnosti sa semantikom ove oznake, a pretraživači vole semantički kod. Da bismo formirali vizuelnu strukturu dokumenta, potrebne su nam samo div oznake i svojstva prikaza specificirana u CSS-u: inline-block (uređuje blokove u niz) i vertical-align: top (sprečava njihovo raspršivanje po ekranu) , postavite ih na potrebnu visinu i voila, ništa suvišno i sve je locirano kako nam treba.

Za one koji žele uštedjeti svoje vrijeme na dizajnu web stranica, mogu preporučiti korištenje CSS okvira prilikom kreiranja web stranica, posebno onih koje sami pišu. Moj izbor u tom pogledu je Twitter Bootstrap. Možete pogledati lekciju o tome kako dizajnirati obrasce koristeći ga.

PHP

Pa, vrijeme je da naš obrazac funkcionira.

Idemo u naš korijenski direktorij stranice i tamo kreiramo datoteku mail.php, do koje smo prethodno naveli putanju u atributu akcije oznake forme.

Na kraju će njegov kod izgledati ovako:

\" javascript: history.back()\" >Nazad

$nazad "

;

\" javascript: history.back()\" >Nazad

izlaz ;

) else ( eho ; izlaz ; ) ?> Možete preskočiti raspravu o HTML i CSS dijelovima ovog dokumenta. U osnovi, ovo je obična web stranica koju možete dizajnirati prema svojim željama i potrebama. Pogledajmo njegov najvažniji dio - PHP skriptu za obradu obrasca:$back = " Ovom linijom kreiramo link za povratak na prethodnu stranicu. Pošto ne znamo unaprijed s koje stranice će korisnik doći na ovu, to se radi pomoću male JS funkcije. U budućnosti ćemo jednostavno pristupiti ovoj varijabli da bismo je prikazali na mjestima koja su nam potrebna. if (! prazno ($_POST [ "ime" ] ) i ! prazno ($_POST [ "telefon" ] ) i ! prazno ($_POST [ "mail" ] ) i ! prazno ($_POST [ "poruka" ] ) ) (

//unutrašnji dio rukovaoca

) drugo ( eho

"Da pošaljete poruku, popunite sva polja! $back "

;

izlaz ;

Provjere mogu biti komplikovanije, ali ovo je po vašem nahođenju. Mi smo već instalirali minimalnu zaštitu na strani servera. Ostalo ćemo uraditi na strani klijenta koristeći JS.

Ne preporučujem potpuno odustajanje od zaštite obrazaca na strani servera u korist JS-a, jer, iako izuzetno rijetke, postoje jedinstvene s onemogućenim JS-om u pretraživaču.

Nakon čišćenja oznaka, dodajte slanje poruke:

pošta ( "[email protected]", "Pismo sa vaše_site_adrese", "Napisao vam je: " . $name . "
if (! prazno ($_POST [ "ime" ] ) i ! prazno ($_POST [ "telefon" ] ) i ! prazno ($_POST [ "mail" ] ) i ! prazno ($_POST [ "poruka" ] ) ) ( $name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ; mail (, , "Napisao sam vam: " . $name ."
Njegov broj: " . $phone ." "
Njegova poruka: ". $message "Content-type:text/html;charset=windows-1251") ;

Upravo je ova linija odgovorna za generiranje i slanje poruke nama. Popunjava se na sljedeći način:

1. “[email protected]” – ovdje ubacujete svoj email između navodnika
2. “Pismo sa vaše_site_adrese” je predmet poruke koja će biti poslana na vaš email. Ovdje možete napisati bilo šta.
3. "Pisao sam ti: ".$name." < br /> Njegov broj: ".$phone." < br /> Njegov email: ".$mail." < br /> Njegova poruka: „.$message – formiramo sam tekst poruke. $name – ubacujemo podatke koje je korisnik popunio pristupom poljima iz prethodnog koraka, u navodnicima opisujemo šta ovo polje znači, sa oznakom < br /> Prekidamo red tako da poruka u cjelini bude čitljiva.
4. Content-type:text/html;charset=windows-1251 - na kraju se nalazi eksplicitna indikacija tipa podataka koji se prenosi u poruci i njenog kodiranja.

VAŽNO!

Kodiranje navedeno u "glavi" dokumenta ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), kodiranje iz poruke Content-type:text/html;charset=windows-1251 i općenito kodiranje PHP datoteke mora se podudarati, inače će u porukama primljenim poštom umjesto ruskog ili Engleska slova.

Mnogi ljudi ne navode eksplicitno kodiranje poruke koja se šalje, ali na nekim klijentima e-pošte to može uzrokovati probleme u budućnosti (nečitljive e-poruke se šalju na poštu), pa preporučujem da to ipak navedete.

Provjera ispravnosti unesenih podataka obrasca

Kako korisnici ne bi slučajno promašili polja i sve ispravno popunili, vrijedi provjeriti unesene podatke.

Ovo se može uraditi u PHP-u na strani servera iu JS-u na strani klijenta. Koristim drugu opciju, jer na taj način osoba može odmah saznati šta je pogriješila i ispraviti grešku bez dodatnih prijelaza stranica.

Zalijepimo kod skripte u isti fajl gdje imamo HTML dio obrasca. Za naš slučaj to će izgledati ovako:

< script>funkcija checkForm(form) ( var ime = oblik. ime. vrijednost; var n = ime. podudaranje(/ ^[ A- Za- zA- Jaaz- z ] * [ A- Za- zA- Jaz- z ] + $/ ) ako (!n) ( upozorenje(); "Uneti naziv je netačan, ispravite grešku") ; return false ;) var telefon = obrazac. telefon. vrijednost; var p = telefon. podudaranje(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; ako (! p) ( upozorenje(

"Pogrešno unesen broj telefona"

) ; return false ;) var mail = form. mail. vrijednost;

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \ ) + [ A- Za- z] + $/ ) ;

ako (! m) ( upozorenje(

"E-mail koji ste uneli je netačan, ispravite grešku" ) ; return false ;

) input[ type= submit] (kursor: pokazivač; ) ulaz. ime (pozadina: rgba(255, 255, 255, 0.4) ; padding- lijevo: 25px; ) ulaz. email (pozadina: rgba(255, 255, 255, 0.4) ; padding- lijevo: 25px; ) ulaz. poruka ( pozadina: rgba(255 , 255 , 255 , 0.4 ) ; padding- lijevo: 25px; ) ::- webkit- input- placeholder ( boja: #fff; ) :- moz- placeholder( boja: #fff; ) : :- moz- čuvar mjesta ( boja: #fff; ) :- ms- ulaz- čuvar mjesta ( boja: #fff; ) ulaz: fokus, textarea: fokus ( boja pozadine: rgba(0 , 0 , 0 , 0.2 ) ; - moz-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) - webkit-box-shadow: 0 0 5px 1px rgba(255, 255, 255, .5) ; 255, 255, 255, .5) prelivanje: skriveno;

) return true ;

tako da kada kliknete na dugme za slanje obrasca, mi to provjerimo

CSS

Kada je obrazac spreman, možete ga malo transformirati. Ovde sve zavisi i od vaših potreba i fantazija. Radi jasnoće, skicirao sam nekoliko stilova za svaki element kako sve ne bi izgledalo tako ravno. Ali ako ste lijeni ili ne znate kako to učiniti, onda možete koristiti moju opciju:

Form( max-width: 400px; širina: 100%; margina: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0,11 margina: 10px; 0px 2px 0 1px crna)

Klijentski dio

Ovdje vrijedi detaljnije razumjeti, odnosno odabrati odgovarajuću opciju za sebe. Za slanje poruka e-poštom, moraćemo da koristimo php jezik, tj. kreirajte poseban fajl u koji ćemo prenijeti sve ove podatke. Ali ovu metodu nećemo razmatrati ovdje, jer je mnogo ljepše kada se sve dešava bez ponovnog učitavanja stranice. Zato ćemo razmotriti slanje podataka putem ajaxa.

Ako želite sve raditi na starinski način, morat ćete malo podesiti gornji html i postaviti vrijednost atributa metode forme (post ili get). Sve ovisi o tome kako želite prenijeti podatke iz obrasca. I također ne zaboravite napisati akciju koja će ukazati na putanju do php datoteke.

I mi ćemo koristiti napredniju metodu i slati podatke bez ponovnog učitavanja stranice, a kada dobijemo odgovor od servera, korisniku ćemo dati poruku o uspješnoj operaciji ili grešci. Međutim, trebat će nam i 2 fajla, recimo contact.php I custom.js.

Prije svega, ne zaboravite uključiti biblioteku Jquery, uz njegovu pomoć ćemo nekoliko puta smanjiti kod i moći ćemo lako izvršiti bilo koju radnju koristeći gotova rješenja.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( tip: "POST", url: "contact.php", podaci: str, uspjeh : function(msg) ( if(msg == "ok") ( alert("Poruka je poslana"); ) else ( alert("Greška! Možda ste pogrešno popunili polja."); ) ) ) );

Hajde sada da shvatimo plan akcije i zašto su nam potrebne sve ove biblioteke i fajlovi. Kada korisnik klikne na dugme za slanje, imamo događaj submit koji ćemo upisati u custom.js i na osnovu kojeg ćemo primiti sve podatke iz obrasca i proslediti ih u contact.php fajl. Ovdje još jednom provjeravamo da li su naša polja prazna (kako bismo izbjegli još jednu mogućnost neželjene pošte), šaljemo poruku e-poštom i obavještavamo korisnika o rezultatima, koji se šalju kao odgovor na custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail" "]); $txtphone = trim($_POST["mfbPhone"]); // od koga $fromMail = " [email protected]"; // Ovdje unesite svoju email adresu $emailTo = " [email protected]"; $subject = "Povratne informacije"; $subject = "=?utf-8?b?". base64_encode($subject) ."?="; $headers = "Od: Primjer obrasca<$fromMail>\n"; $headers .= "Tip sadržaja: tekst/običan; charset="utf-8"\r\n"; $headers .= "MIME-verzija: 1.0\r\n"; $headers .= "Datum: ". date("D, d M Y h:i:s O") ."\r\n"; // tijelo slova $body = "Primljeno pismo sa stranice ".$site." \n\nIme: ".$txtname."\nTelefon: ".$txtphone."\ne-mail: ".$txtemail."\nPoruka: ".$txtmessage; mail($emailTo, $subject, $body, $headers echo "ok";

Ovo je najosnovniji primjer kako funkcionira obrazac za kontakt. Postoji mnogo opcija za modifikaciju datoteke za proveru u PHP-u, kreiranje sopstvenih klasa itd. Ali naš zadatak je bio stvoriti jednostavan i funkcionalan primjer koji možete koristiti na svojoj web stranici.

demo

datoteke

Spremni dodaci

Budući da ste na WordPress blogu, vjerovatno ste spremni i željni korištenja svih vrsta dodataka, posebno ako ste potpuni lamer u programiranju i rasporedu. I ne krivim vas za ovo, a mogu vam čak i jednu od njih predstaviti radi jasnoće. Svrha ovog paragrafa nije preporuka, već samo primjer, pošto sam koristio dodatak Kontakt obrazac 7 u nekoliko projekata.

Vrlo je jednostavan za konfiguraciju i gotovo uvijek radi besprijekorno. Ako trebate kreirati vlastiti jedinstveni dizajn, možete to učiniti. Sve što treba da uradite je da dodate potrebna polja u konstruktor, prevedete i promenite obaveštenja o greškama i uspešnom slanju na svoj način, i gotovi ste. Zatim kopirajte kratki kod i zalijepite ga na željeno mjesto u obrascu.

Nikada nisam imao problema sa dodatkom i ako vam treba brzo i spremno rješenje, to je to. Ako imate vlastite zahtjeve za formom u smislu funkcionalnosti i dizajna, onda je bolje koristiti prvu opciju koja zahtijeva znanje u ovoj industriji.

U ovom članku ćemo govoriti o dinamičkom obrascu za povratne informacije, koji će, kada se promijeni veličina prozora, postati prilagodljiv za gledanje. Odnosno, obrazac za povratne informacije će biti dostupan za gledanje na svim vrstama uređaja, na personalnim računarima, laptopima, pametnim telefonima i tabletima.

Obrazac za povratne informacije će se sastojati od 3 polja za unos podataka - ime, email adresa i tekst pisma. Sva polja će biti obavezna i nećete moći poslati prazan email. Polje za unos adrese e-pošte dodatno će biti potvrđeno za ispravnost unosa. Podaci će biti predstavljeni u html kodu, stilovi dizajna obrasca za povratne informacije će biti napisani u zasebnom CSS fajlu. Na osnovu principa ove skripte moguće je, po analogiji, kreirati veći ili manji broj polja za unos.

Prednosti korištenja ovog obrasca su kontinuiran rad stranice i dinamičko dostavljanje podataka iz obrasca, bez ponovnog učitavanja stranice. Također treba napomenuti da je jednostavan za pregled na mobilnim uređajima.

U datoteci send.php uredite sljedeće redove: $to = " [email protected]"; $subject= "Poruka sa site.ru"; $header="Od: site.ru";;

Napiši pismo

* Sva polja su obavezna

Pošalji

$(function() ( $("#loader").hide(); $("forma").submit(function(e) (var name = $("#name").val(); var email = $("#e-mail").val() var message = $("#message").val(); ; if(data) ( $.ajax(( tip: "POST", url: "./send.php", data: data, beforeSend: function(html) ( $("#loader").show(); $("#submit").hide(), uspjeh: function(html)( $("#loader").hide(); $("#result").html(html); ) )); ) vrati false ));

1. Dodatak za kreiranje onlajn formulara “jFormer”

Kreiranje kontakt forme: povratne informacije, komentari, formular za prijavu, formular za registraciju sa provjerom tačnosti unesenih podataka.

2. Obrazac za registraciju korak po korak koristeći jQuery

Uredan formular sa punjenjem korak po korak. Ispod je indikator ispunjenosti obrasca.

3. Obrazac korak po korak

Popunjavanje obrasca u nekoliko koraka i provjera da li je ispravno popunjen.

4. Kontakt obrazac za stranicu

Provjera ispravnosti unesenih podataka vrši se u hodu prije slanja poruke koristeći javascript.

5. Animirano prebacivanje između obrazaca koristeći jQuery

Animirano prebacivanje koristeći jQuery između obrasca za prijavu na stranicu, obrasca za registraciju i polja za oporavak lozinke. Na demo stranici kliknite na žuti link da vidite efekat.

6. Odlazak PHP formular za povratne informacije

Slično rješenje se može koristiti da se posjetitelju pruži prilika da brzo kontaktira vlasnika stranice s bilo koje stranice. Na demo stranici kliknite na strelicu ispod da otvorite obrazac.

7. PHP formular za registraciju koristeći jQuery i CSS3

Obrazac sa provjerom tačnosti unesenih podataka.

8. PHP formular za registraciju u Facebook stilu

Lijep obrazac za registraciju implementiran korištenjem CSS, PHP i jQuery.

9. jQuery kontakt obrazac “SheepIt”

Implementirana je mogućnost dodavanja novih polja prije slanja poruke.

10. Fancy AJAX obrazac za kontakt

Lijep uredan PHP formular za povratne informacije sa provjerom tačnosti unesenih informacija. Tehnologije: CSS, PHP, jQuery.

11. Sistem autorizacije/registracije na sajtu

12. Obrazac za dostavljanje podataka

Uz provjeru ispravnosti punjenja.

13. jQuery “Contactable” dodatak

Da implementirate obrazac za odlazne povratne informacije za brzo slanje poruke.